The Common Styles page of the Admin Console enables you to create a customized CSS, in which you define a set of styles that designers can use when creating Interaction elements. The CSS is built directly on the Common Styles page, using the CodeMirror editor. Both tag styles (e.g., H1) and custom classes (.title) are supported.

When the CSS is saved, it is automatically downloaded and parsed when an Interaction is opened in the Interaction Designer. (Interactions that were already open while the CSS was updated need to be closed and re-opened for the updates to take effect.) The available classes are displayed to the designer in the HTML Editor. For example:

To create common styles:

  1. From the menu bar, select Resources > Common Styles.
    The Common Styles page opens.
  2. In the editor, create and/or update your styles as required.
    Note: As you build the CSS, use CSS2 standard tags and classes only. CSS3 tags and classes are not supported in the Interaction Designer.
  3. At the upper right corner of the page, click Save.
    A confirmation message is displayed, and changes are saved in the system.

Using Style Classes
The list of common styles, at the upper right corner of the Editor, provides a list of all the styles that are currently defined in the Jacada Interaction Server Admin Console. For example:

These styles may be applied to selected content, as appropriate. If no style is applied, content is displayed in the default style (No style class).

To apply a style to content, select the relevant content, and then select the required style from the Styles list. In the following example, the warning style is applied to the words warning message, and the error style is applied to the words error message. The rest of the words do not have a style applied to them, and will therefore appear in the default style (No class).

The following figure shows how this example page would be displayed in runtime.