How to Use CSS Styling to Customize the Output

The most common way to customize WebHelp Responsive 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 (using an Oxygen Publishing Template or a transformation parameter). 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 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 macOS, 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.

Create the Custom CSS

As a practical example, the following procedure changes the background color of the footer bar in the WebHelp output:

Use the browser's CSS inspector to identify the current CSS code that styles the footer bar. In this particular case, the pertinent code that would be identified is:
```
.wh_footer {
  font-size: 15px;
  line-height: 1.7em;
  background-color: #000;
}
```
If you want to test the color you want to apply as the background of this particular element, use the browser's CSS inspector to change the value of the background-color attribute. After you find a suitable color, copy that new code.
Create a custom CSS file and paste or enter the copied code. For example:
```
.wh_footer {
  background-color: #255890;
}
```
Save the custom CSS file at a location of your convenience.
Reference the CSS file in a WebHelp Responsive transformation using an Oxygen Publishing Template or the args.css parameter.

Fastpath: Regenerating the output to see the changes made in the CSS is not required. Instead, you can directly edit the files in WebHelp Output Directory/oxygen-webhelp/template and reload the page in your browser. Once you obtained the desired output, simply copy the stylesheet back to your publishing template folder.

Referencing the CSS Using a Publishing Template

If you have not already created a Publishing Template, see How to Create a Publishing Template.
Using the Project Explorer view, copy your custom CSS in a folder inside the publishing template root folder (for example, in the custom_footer_template/resources folder).

Open the template descriptor file associated with your publishing template and add your custom CSS in the resources section.

<publishing-template>
    ...
    <webhelp>
        ...                
        <resources>            
            ...          
            <css file="resources/MyCustom.css"/>

Open the DITA Map WebHelp Responsive transformation scenario.
Click the Choose Custom Publishing Template link and select your template.
Click OK to save the changes to the transformation scenario.
Run the transformation scenario.

Result: Your custom CSS will be applied as a final layer on top of any existing CSS rules and the output will reflect the changes you made.

Referencing the CSS Using the args.css Parameter

Edit the DITA Map WebHelp Responsive transformation scenario and open the Parameters tab.
Set the args.css parameter to the path of your custom CSS file.
Set the args.copycss parameter to yes to automatically copy your custom CSS in the output folder when the transformation scenario is processed.
Click OK to save the changes to the transformation scenario.
Run the transformation scenario.

Result: Your custom CSS will be applied as a final layer on top of any existing CSS rules and the output will reflect the changes you made.