How to Use CSS Styling to Customize WebHelp Output
Edit online

The most common way to customize the look and style of your WebHelp output is to use custom CSS styling. This method can be used to make small, simple styling changes or more advanced, precise changes. To implement the styling in your WebHelp output, you simply need to create the custom CSS file and reference it in your transformation scenario or script. This custom file will be the final CSS to be applied so its content will override the styles in the other pre-existing CSS files.

Using the CSS Inspector to Identify Content for Custom CSS File

You can use your browser's CSS inspector to identify the pertinent code in the current CSS files and you can even make changes directly in the CSS inspector to test the results so that you know exactly what content to use in your custom CSS file.

In most popular browsers (such as Chrome, Firefox, and Edge), you can access the CSS inspector by using F12 or by selecting Inspect Element (or simply Inspect) from the contextual menu.
Tip: When using Safari on Mac OS X, you must first enable the Develop menu by going to the Advanced settings and selecting Show Develop menu in menu bar. Then you can select Show Web Inspector from the Develop menu or click Command + Option + I.

Referencing the Custom CSS Using Oxygen XML Editor/Author

To use a custom CSS to style WebHelp output and use a transformation scenario from within Oxygen XML Editor/Author, follow this procedure:
  1. Create your custom CSS file.
  2. Edit the WebHelp transformation scenario and open the Parameters tab.
    • For a DITA transformation, set the args.css parameter to the path of your custom CSS file. Also, set the args.copycss parameter to yes to automatically copy your custom CSS in the output folder when the transformation scenario is processed.
    • For a DocBook transformation, set the html.stylesheet parameter to the path of your custom CSS file.
  3. Run the WebHelp transformation scenario to generate the output.

Referencing the Custom CSS Using a Script Outside of Oxygen XML Editor/Author

Important: Running WebHelp transformations from a script outside of Oxygen XML Editor/Author requires an additional license and some additional setup:
To use a custom CSS to style WebHelp output and use a script outside of Oxygen XML Editor/Author, follow this procedure:
  1. Create your custom CSS file.
  2. Reference your custom CSS file:
    • For DITA transformations, use the args.css parameter in your transformation script and set its value to the path of your custom CSS file. Also, set the args.copycss parameter to yes to automatically copy your custom CSS in the output folder when the transformation scenario is processed.
    • For DocBook transformations, use the html.stylesheet parameter in your transformation script and set its value to the path of your custom CSS file.
  3. Execute the transformation script.
For example, a DITA script might look like this::
  • Windows:

    dita.bat -i c:\mySample.ditamap -f webhelp -Dargs.css=c:\myFile.css -Dargs.copycss=yes

  • Mac OS X/ Linux:

    dita -i /mySample.ditamap -f webhelp -Dargs.css=/myFile.css -Dargs.copycss=yes