The Advanced CSS panel adds to a block a CSS property that the editor does not offer, for one state and one screen. This article explains how to write a declaration, read the panel’s alerts and share the declaration with a registered style.
Before you start
- The Advanced CSS panel is for properties that no editor setting offers. When a setting exists, prefer it: it keeps the link with your design system, the states and the screens.
- The panel is the last one in the Styles tab. It appears on the blocks that can carry a registered style.
- It requires the Administrator role. Other roles do not see it: see the section Edit a page that carries advanced CSS.
- Like any change, your declarations stay on Staging until the next publication of the site.
Add a declaration
The following example balances the lines of a heading that leaves a single word on its last line.
- Select the heading, open the Styles tab, then the Advanced CSS panel.
- Choose the state and the screen at the top of the tab. For all screens, keep Overall.
- In the Add a declaration field, type
text-wrap, then choose the property in the list. A row appears. - In the Value field of the row, enter
balance. The heading is spread over lines of similar length.
Each row carries a link to the documentation of the property on MDN and a Remove button. The declaration applies in the editor as you type.
The Add a declaration field offers only the available properties. A row carries only one property: a block of CSS cannot be pasted. The Value field, however, accepts a paste, for example a long gradient copied from another tool.
Write a value
A value accepts calculation functions (calc(), min(), max(), clamp()), color functions (rgb(), hsl(), oklch(), color-mix(), light-dark()), gradients, transforms, filters, clip-path shapes, as well as repeat() and minmax() for grids. A value is at most 2,048 characters long.
Use a design system variable
- Click in the Value field of a row, where the variable should go.
- Expand Design variables.
- Click the variable. It is inserted at the cursor.
The list shows every color, spacing, text size, shadow, radius and font of your site. A spacing, a size or a radius is shown by its value, a color or a shadow by its name. A declaration written with a variable follows your design system: if your main color changes, the declaration changes with it.
Understand the alerts of the Value field
As you type, the Value field can show two alerts.
| Border | Meaning | Line saved |
|---|---|---|
| Red, with a sentence under the line | The value contains something the panel refuses. The sentence names it, for example vmm is not a unit that advanced CSS accepts., followed by Lovely Render will not write this line into the page. | No. It does not apply in the editor either. Correct the text, it stays in the field. |
| Amber | Your browser does not understand this value for this property. It is saved as is. Check the spelling. | Yes. A more recent browser might understand it. |
An amber border most often comes from a typo, for example a calc(100%-10px) without spaces around the minus.
Know the limits of advanced CSS
The panel refuses as you type what it cannot write into the page. The server rechecks each declaration before applying it.
| Refused | Reason |
|---|---|
A selector, a nested rule, an @media | Lovely Render writes the selector from the chosen state and screen. |
The characters < > ; { } @ \ ! and comments, so !important | Your declaration already takes precedence over the block’s styles. |
url() and any function that loads a resource | Images, fonts and files go through their own tools. Gradients are still accepted. |
A variable missing from your design system, or var() with a fallback value | The variables of your design system are always declared. |
content, animation and transition properties, prefixed properties such as -webkit-… | They are not in the list. Animations and transitions have their own panels. |
Read the inherited declarations
Under your rows, the Already applied here list shows the declarations that act on this block, at this state and this screen, but come from elsewhere: from a registered style of the block, or from Overall when you are on a specific screen.
- Spot the declaration in Already applied here.
- Click Override. It moves into your rows.
- Change its value. Your version applies to this block only.
Removing your version brings back the original declaration. To remove a declaration from a registered style, open the style’s Update form and tick the row to remove.
Share a declaration between several blocks
| On a block | In a registered style | |
|---|---|---|
| Scope | This block, on this page. | All the blocks that carry the style. |
| Purpose | A one-off adjustment. | A rule to reuse. |
| Action | Write the row in the panel. | Write the row, then create or update the style with the Advanced CSS family ticked. |
Once in the style, the declaration leaves your rows and moves into Already applied here. Two styles that declare different properties add up on a block. If they declare the same one, the last in the list wins.
Your declarations are written in plain CSS, in the site’s stylesheet for a style, at the top of the page for a block. They add no script and no request. They go property by property with your content in the site export.
Edit a page that carries advanced CSS
A member who is not an administrator does not see the Advanced CSS panel, but can edit the pages that carry it. A block keeps its declarations when this member moves it, duplicates it or changes its text. Translating a page, copying it, starting from the template of a content type or pasting a block copied to another page of the site also carries its advanced CSS along.
A block copied from another site can carry advanced CSS that your site does not have. For a member who is not an administrator, saving is then refused with the message Only a site administrator can add advanced CSS, and a block in this content carries some that the site does not have, often a block pasted from another site. Remove this block, or ask an administrator to save. Remove the pasted block, or ask an administrator to save the page. An AI connected to the site follows the same rule as the member who connected it.