Adding a Logo Image in the Title Area

You can customize the title area of your WebHelp output by using a custom CSS.

For example, to add a logo image before the title, you could use the following code:

#header  h1:before {
    display:inline;
    content:url('oxygen-webhelp/resources/img/myLogoImage.gif');
}

In the example above, myLogoImage.gif is an image file that you need to store in an images directory from which it will be copied automatically by the WebHelp transformation to the output directory.

It is recommended that you store the image files in the same directory as the default icons.

For DITA transformations: DITA_OT_DIR\plugins\com.oxygenxml.webhelp\oxygen-webhelp\resources\img\.
For DocBook transformations: [OXYGEN_INSTALL_DIR]\frameworks\docbook\xsl\com.oxygenxml.webhelp\oxygen-webhelp\resources\img\.

Then you need to specify the path of your custom CSS in the transformation scenario.

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.