How to Use CSS Styling to Customize the OutputEdit online
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 FileEdit online
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.
Create the Custom CSSEdit online
- 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.
Referencing the CSS Using a Publishing TemplateEdit online
- If you haven't already created a Publishing Template, see Working with Publishing Templates.
- Using the Project 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 ParameterEdit online
- 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 toyes
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.