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.
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.