Styling Options

Styling options give editors more choices for formatting text in content items. A styling option has as its basis a font, definition and any number of other CSS formatting options (margin, alignment, spacing etc.) which is then combined with the existing format definitions for h1, h2, paragraph, and so forth. The CSS class(es) containing the style definition(s) are part of the channel design. It is useful to know that the defined class is added as a class attribute in the HTML generated in the channel. For example, if an editor adds the styling "Monospace" to an h2, then the HTML generated would be

<h2 class=”monospace"></h2>.

If the CSS code of the channel contains a rule such as h2.monospace { color: red;} then the editor can make the h2s red.

The definition of a style in your CSS will look similar to the following:

.monospace {
   font-family: "Courier New", Courier, monospace;
   color: #ff0000;
   margin-bottom: 5px;
   text-align:center;
}

In XperienCentral, the style is added as follows:

1. Navigate to Configuration > Design Templates.
2. Click the "Styling options" tab.
3. Select "<new>" from the Select drop-down list.
4. Enter the name of the style in the "Name" field. This is the name that will appear in the Styling drop-down list in the Editor.
5. Enter the name of the CSS class in the "CSS class" field without the prefixed period (.). This is the name of the styling's CSS class. In the example above, the class is named .monospace in the code, therefore the name in the style definition is "monospace". For example:
   
   
   
   
   
   
   
6. Click [Apply] and then [Close]. If you add a new style while other users are logged in to XperienCentral, they need to refresh their browser session in order to pick up the new style definition.

See Entering Rich Text for complete information on applying custom styles to content.