Custom styles

Deprecated: This feature will no longer be available in version 7.0. We recommend using snippets to insert elements with custom classes in your pages.

You can define your own custom styles in the Live Editor. Start by selecting a site and going to the Edit Custom Styles option in the sidebar. A modal will appear allowing you to paste in some CSS.

You can define one or more classes using basic CSS. For example:

.fancy {
    font-family: cursive;
    font-size: 20px;
    color: #08c;

.not-so-fancy {
    font-family: sans-serif;
    font-size: 20px;
    color: #444;

Don’t paste in your entire stylesheet! By design, Surreal will only parse classes with simple selectors like the ones above. If you don’t see a style appearing, make sure your selector is in the .class-name {...} format.

Surreal will pick up valid classes and allow you to select them from the Custom Styles menu in the Live Editor. This makes it really easy for clients to apply predefined styles to their content without having to format them manually.

Some (but not all) CSS properties will be shown in the preview. For example, font styles, colors, and certain background properties will be displayed. This helps you select styles visually instead of by using just a class name.

Importing classes from your stylesheet

The best way to import Custom Styles is by copying over certain classes from your stylesheet manually. Only paste in the ones you want clients to be able to select. Don’t paste in your entire stylesheet! There is a 20KB limit, and pasting in extra styles that your clients don’t need will make it harder for them to use.

Surreal will only apply the appropriate classes to your elements, not inline styles. Make sure any styles that exist in your Custom Styles also appear in your stylesheet, otherwise they won’t appear to do anything when you select them.