close

Filter

loading table of contents...

Site Manager Developer Manual / Version 2107

Table Of Contents

3.6.2 Extend the coremedia-richtext-1.0.css file

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

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:

  1. Build the editor-components module in the development workspace of CoreMedia Project.

  2. Extract the coremedia-richtext-1.0.css file from the cap-editor-resources.jar file in the target/../lib directory.

  3. Customize the file to your needs.

  4. Put the file into the properties/css directory of the editor module.

  5. Configure the property editor.richtext.css.location in editor.properties to the properties/css/coremedia-richtext-1.0.css location in order to override the default CSS file.

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

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:

  1. Define a style group without style classes, for example:

  • .freetext {background: blue;}

  1. Add the style group to the Content Editor as explained in Section 3.6.4, “Add to Content Editor”.

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

Search Results

Table Of Contents
warning

Your Internet Explorer is no longer supported.

Please use Mozilla Firefox, Google Chrome, or Microsoft Edge.