Selecting and Combining Multiple CSS Styles

Oxygen XML Editor provides a Styles drop-down menu on the Author Styles toolbar that allows you to select one main (non-alternate) CSS style and multiple alternate CSS styles. An option in the preferences can be enabled to allow the alternate styles to behave like layers and be combined with the main CSS style. This makes it easy to change the look of the document.

An example of a common use case is when content authors want to use custom styling within a document. You can select a main CSS stylesheet that styles the whole document and then apply alternate styles, as layers, to specific parts of the document.

The main and alternate styles that are listed in the Styles drop-down menu can be controlled in the Document Type configuration dialog box. To access it, follow these steps:

Open the Preferences dialog box .
Go to Document Type Association.
Select the appropriate document type and press the Edit button.

The CSS styles (CSS files) associated with the particular document type are listed in the CSS subtab of the Author tab.

You can Add, Edit, or Delete styles from this dialog box to control the main and alternate styles associated to the particular document type. You can also change the order of the styles by using the Move Up and Move Down buttons. This will also change the order that they appear in the Styles drop-down menu. The alternate styles are combined with the main CSS sequentially, in the order that they appear in this list. Therefore, if the same style rules are included in multiple CSS files, the rules that are defined in the last alternate style in this list will take precedence, since it is the last one to be combined (applied as a layer).

The CSS styles (and their order) shown in the following figure will match the styles listed in the Styles drop-down menu.

Figure: Main and Alternate CSS Styles in the Document Type Association Dialog Box

The URI column shows the path of each CSS file. The names listed in the Styles drop-down menu match the values in the Title column. The value in the Alternate column determines whether it is a main or alternate CSS. If the value is no it is a main CSS. If the value is yes it is an alternate CSS and the style can be combined with a main CSS or other alternate styles when using the Styles drop-down menu.

Note: To group alternate styles into categories (submenus), use a vertical bar character ( | ) in the Title column. You can use multiple vertical bars for multiple submenus. The text before each vertical bar will be rendered as the name of a submenu entry in the Styles drop-down menu, while the text after the final vertical bar will be rendered as the name of the style inside the submenu.

Example: Suppose that you want to add two alternate stylesheets in separate submenus, with the Title column set to My Styles|User Assistance|Hints and My Styles|User Actions|Inline Actions, respectively. Oxygen XML Editor will add a My Styles submenu with two submenus (User Assistance that contains the Hints style, and User Actions that contains the Inline Actions style) in the Styles drop-down menu.

The Enable multiple selection of alternate CSSs box at the bottom of the pane must be checked in order for the alternate styles to be combined. They are applied like layers and you can activate any number of them. If this option is disabled, the alternate styles are treated like main CSS styles and you can only select one at a time. By default, this option is enabled for DITA documents. There are also a few options that allow you to specify how to handle the CSS if there are CSS styles specified in the document. You can choose to ignore or merge them.

The following rules apply for merging CSS styles:

CSS files with the same title will be merged.
CSS files without a title will contribute to all others.
They are merged sequentially, in the order that they appear in the list.

The selections from the Styles drop-down menu are persistent, meaning that Oxygen XML Editor will remember the selections when subsequent documents are opened.

Note: The application also supports working directly with LESS stylesheets, instead of CSS.

CSS Styles in DITA

Oxygen XML Editor comes with a set of predefined CSS layer stylesheets for DITA documents (including maps). In the subsequent figure, a DITA document has the Century style selected for the main CSS and the alternate styles Full width, Show table column specification, Hints, and Inline actions are combined for additive styling to specific parts of the document.

Tip: The Hints style displays tooltips throughout DITA documents that offer additional information to help you with the DITA structure. The Inline actions style displays possible elements that are allowed to be inserted at various locations throughout DITA documents.

Figure: Styles Drop-down Menu in a DITA Document