Selecting and Combining Multiple CSS Styles

Oxygen XML Editor provides a Styles drop-down list 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. 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.
Note: Oxygen XML Editor comes with a set of predefined CSS layer stylesheets for DITA documents only, but the support is available for all other document types.
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 List in a DITA Document

The main and alternate styles that are listed in the Styles drop-down list can be controlled in the Document Type Association dialog box. To access this dialog:
  1. Open the Preferences dialog box .
  2. Go to Document Type Association.
  3. Select the appropriate document type and press the Edit button.
The CSS styles associated with the particular document type are listed in the Author tab.
The names listed in the Styles drop-down list 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 list.
Note: To group alternate styles into categories, use a vertical bar character ( | ) in the Title column. The part before the vertical bar will be rendered as a menu entry in the Styles dropdown, while the part after the vertical bar will be rendered as the style's name.

Example: Let's suppose that we add two alternate stylesheets, with the Title column set to User Assistance|Hints and User Assistance|Inline Actions. Oxygen XML Editor will add in the Stylesdropdown a User Assistance submenu, containing the Hints and Inline Actions items.

A developer can add, edit, or delete styles from this dialog box to control the main and alternate styles associated to the particular document type. Notice that the CSS styles shown in the following figure match the styles listed in the drop-down list in the previous figure.

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

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. 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 radio button options 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 selections from the Styles drop-down list 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.
Related information
CSS