Customizing Author Mode Using CSS Files Associated with a Framework
Edit online

The easiest way to customize the main CSS stylesheet of a framework is to create a new 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 /frameworks/dita/css/edit folder (where the default main stylesheet named style-basic.css is located).
  2. Edit the DITA framework and go to the 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.
    Tip: If you do not have write permissions to modify the document type, use the Extend button to create an extension of the framework.
    1. Go to the CSS subtab of the Author tab.
    Figure 1: 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. Select the Alternate option to define it as an alternate stylesheet that will be applied as an additional layer to the main CSS.
    Figure 2: Add CSS 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.