The aim of the coremedia-richtext-1.0.css file is twofold. First, it defines the look of the XML elements in the RichText pane according to the CSS definitions (see http://www.w3c.org), but secondly it is used as the definition of the possible attributes.

Caution

The RichText pane supports only a subset of CSS.

You can use well known CSS syntax to define your own style groups and styles. Nevertheless, the RichText pane of the Site Manager does not support the display of all possible CSS formats. Some formats will be displayed in a WYSIWYG style (such as bold, italic, understroke ...) others will be displayed symbolic (color, value of a Style group etc.). The actual layout of the text depends on the definitions and structure of the generated website and can only be seen in the HTML preview of the browser.

Getting the file and add it to the editor

The coremedia-richtext-1.0.css file is included in a JAR file. So in order to add your extensions you have to get the file and put the changed file to a new location. Proceed as follows:

Define new style groups

A style group is a list of CSS style classes, that share a common prefix ending with "--". For example, [font-name--arial, font-name--times] is a style group font-name consisting of the two styles classes font-name--arial and font-name--times. You can limit the usage of your style group to single elements by adding the name of the element in front of the style group separated by a dot.

Caution

Due to limitations in the Swing CSS class use only lower case letters for the names of style groups and style classes.

Simply add the new StyleGroup to the coremedia-richtext-1.0.css file following the naming pattern given above. The following example adds a new style group inlineformat with the two style classes code and glossary to the CSS file. Text marked as code will be displayed with red background, text marked as glossary with blue background.

.inlineformat--code { background-color: red; }

.inlineformat--glossary { background-color: blue; }

Define new style classes

The style classes are defined as described above. Simply add an entry following the scheme:

<LimitedElement>.<StyleGroupName>--<StyleClassName> { <layout definition> }

Define free text style group

If you want to define a style group without predefined style classes where the user can enter own text proceed as follows:

This style sheet group will only appear in the attribute editors but not in the tool bar.