Selecting and Combining Multiple CSS Styles
Oxygen XML Editor provides a Styles drop-down menu on the toolbar that allows you to select one main (non-alternate) CSS style and multiple alternate CSS styles. 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.
Managing the CSS Styles
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.
You can Add, Edit, or Delete styles from this dialog box to manage 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 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
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 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. 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.
Using the Styles Drop-Down Menu
You can use the Styles drop-down menu to select a main style that applies to the whole document and then select one or more alternate styles that behave like layers and are merged sequentially with the main style. The main styles are listed in the top section, while the alternate styles are listed in the bottom section.
The selections from the Styles drop-down menu are persistent, meaning that Oxygen XML Editor will remember the selections when subsequent documents are opened.
EXAMPLE: CSS Styles in DITA
Oxygen XML Editor comes with a set of predefined CSS layer stylesheets for DITA documents (as well as some that are specifically for DITA 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.