BETA: Using Advanced Mode in Custom Styles

Within Custom Styles we have a beta feature called Advanced Mode that will allow you to make small tweaks using CSS.

The Advanced feature is currently in a closed beta. Get in touch with our team if you're interested in using it and let us know a bit more about what you're hoping to do.

Our Custom Styles feature is meant to allow you to make changes to your styling without needing any CSS. If you sometimes want to make changes outside of those limitations this Advanced Mode (beta!) is for you.

There are still limits in place of what you can modify and we always recommend sticking to small changes to ensure that your Qwilr Pages will continue to look great on every screen size.

Accessing Advanced Mode

Within your Block, head to the Custom Styles menu and either edit or create a new style.

From there head to Advanced:

From there the advanced editor panel will open up.

Using Advanced CSS

Once you have the advanced CSS panel open you'll see sections for Container, Heading, Sub Heading and Paragraph.

In general, you'll want to stick to the element you want to update. So if you want to change your H1 color, you'd do that from the "Heading" section.

Within the container section, you'll want to name the element you want to change. So while in the Heading section you could have the code "color:#444;" to change the color, in the Container section it would need to be, "h1 {color:#444;}".

Troubleshooting

 - Changes aren't visible - The first thing to try here is add !important before your closing ;. So this:
h1 {color:#444;} 

Would become:
h1 {color:#444 !important;}

 - Can't target specific elements - This feature is specifically limited and some things (the Quote Block for example) can't be modified via CSS.

 - Not sure of the specific code - We have a few examples below, but in general this feature is use at your own caution. We recommend only people very familiar with CSS use it and you'll want to keep in mind that things on the Qwilr side can and will change and that may break your style.

Examples of Advanced CSS

// To make the background a different color (in this case #ccc = grey). This uses a Hex Color Code. You would place this in the section you want to change

background: #ccc;

// If you can't place it within the correct section, you'll need to target the correct element and add it to the Container section. The below would change the background color of the H1 element.

h1 {background: #ccc;}
// Do some fancy typographic adjustments and change the line height

.letter-spacing:0.15em; 
text-transform:uppercase; line-height: 1.75;

// Again this goes in the section you want to change. If you want to add it to the container section you'll need to target a specific element.
// Change your heading color, as a one-off change rather than a branding change. In the heading section. You'll use whatever HEX code you wish.

color:#000;
Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.