Styling Embedded Pages
If you need to edit the UI of one of our embedded pages, you can do so by using a CSS file template. This page will guide you through the steps you need to get it working.
Available templates
You can choose between two CSS templates. The first one is populated with CSS variables and rules (pages-embedded-variables.css
) and the second one (pages-embedded-clean.css
) contains only the CSS rules with no variables or properties assigned to them.
pages-embedded-variables.csspages-embedded-clean.css
Which template should I choose and what can be edited
The scope of the CSS rules in those templates is more focused on text alignment, font styling, margins, paddings, borders and colours of the pages and some of its components (buttons and input fields*, for example). The CSS templates' rules do not include changes in the positioning or layout of the page elements (e.g. no flexbox or grid rules, for example).
That said, for more simple and cosmetic changes, the pages-embedded-variables.css
template will probably suffice. For bigger changes, it is probably best to stick with the pages-embedded-clean.css.
We recommend taking a look at both and then making the call on which one to use.
Uploading the file
After deciding on which CSS template to use, you must rename it to pages-embedded.css and upload it to the /public/dashboard/css/embeded
folder of your WebDAV server. If youโre not familiar with this process, refer to How to upload files via WebDAV.
The file must be renamed as mentioned or else the changes wonโt take place
Editing the file after upload
It is possible to edit the CSS file and see the changes on the fly if youโre using Cyberduck to access the WebDAV server. Just right-click on the file and select the โEdit Withโ option in the menu and select your preferred app to open it. Leave Cyberduck open while youโre editing the stylesheet (or else youโll be disconnected from the server). Save the file on your code editor and you should get a notification that the file was updated in the server.
