user styles

User styles are regular CSS styles listed in the Sitecake toolbar drop-down so editors can pick and apply them. They give clients curated formatting choices without touching the code.

When a designer builds a website, they define a set of consistent visual styles for text, images, lists, and everything else. Sometimes it’s useful to design alternative styles that can be applied by the website editor (client) at the time of need. We call these user styles.

To create a user style, a specific CSS rule must be defined in an external stylesheet — either a .css file referenced via <link> or an inline style defined using <style>.

Examples

Given this basic HTML structure:

<div class="sc-content sidebar">
  ...
</div>

<div id="main-column" class="sc-content main">
  ...
</div>

The following would be valid user styles:

Example 1

.sidebar p.red { background-color: red; }
.sidebar p.blue { background-color: blue; }

Defines two variants (blue and red) of the p tag in the sidebar container.

Example 2

.sidebar ul.red-dot {
  padding: 5px;
}

.sidebar ul.red-dot li {
  background: url(../images/red-dot.png);
}

.sidebar ul.blue-dot li {
  background: url(../images/blue-dot.png);
}

Defines two styles (red-dot and blue-dot) for ul tags in the sidebar.

Example 3

.sidebar p.red, .main p.red {
  ...
}

Defines a red user style for paragraphs in both sidebar and main containers.

Example 4

#main-column > div.sc-html.outlined {
  outline: solid 1px red;
}

Defines an outlined style for custom HTML items in the main container.

What will not work

A style without the parent container in the declaration:

p.red { color: red; }

If you don’t include the parent, Sitecake doesn’t know which container to offer the style for.