Customizing the Main CSS of a Document Type

The easiest way to customize the main CSS stylesheet of a document type is to create a new CSS stylesheet, save it as an alternate CSS file that will be applied as an additional layer to the main CSS, and then select it from the Styles drop-down menu in Author mode.

For example, suppose that you want to customize the main CSS for DITA documents. To do this, follow these steps:

  1. First, create a new CSS stylesheet and save it in the [OXYGEN_INSTALL_DIR]/frameworks/dita/css/edit folder (where the default main stylesheet named style-basic.css is located).
  2. Edit the DITA framework and go to its CSS subtab:
    1. Open the Preferences dialog box (Options > Preferences) and go to Document Type Association.
    2. Select the DITA document type and press the Edit button.
    3. Go to the CSS subtab of the Author tab.

    Figure: CSS Subtab of the Document Type Association Author Tab

  3. Add the new stylesheet as an alternate CSS stylesheet:
    1. Click the Add button to open a dialog box that allows you to specify the URI and Title for your newly created stylesheet.
    2. Check the Alternate option to define it as an alternate stylesheet that will applied as an additional layer to the main CSS.

    Figure: Add CSS Stylesheet Dialog Box

  4. Press OK in all the dialog boxes to validate the changes.
  5. Select your newly created CSS stylesheet from the Styles drop-down menu on the toolbar in Author mode.
    You can now edit DITA documents based on the new CSS stylesheet. You can also edit the new CSS stylesheet itself and see its effects on rendering DITA documents in the Author mode by using the Refresh action that is available on the Author toolbar and in the DITA menu.