Changing the Icons in a WebHelp Table of Contents

You can change the icons that appear in a WebHelp table of contents by assigning new image files in a custom CSS file. By default, the icons for the WebHelp table of contents are defined with the following CSS codes (the first example is the icon that appears for a collapsed menu and the second for an expanded menu):

.hasSubMenuClosed{
    background: url('../img/book_closed16.png') no-repeat;
    padding-left: 16px;
    cursor: pointer;
}

.hasSubMenuOpened{
    background: url('../img/book_opened16.png') no-repeat;
    padding-left: 16px;
    cursor: pointer;
}

To assign other icons, use the following procedure:

Create a custom CSS file that assigns your desired icons to the .hasSubMenuClosed and .hasSubMenuOpened properties.

.hasSubMenuClosed{
    background: url('TOC-my-closed-button.png') no-repeat;
}

.hasSubMenuOpened{
    background: url('TOC-my-opened-button.png') no-repeat;
}

It is recommended that you store the image files in the same directory as the default icons.
1. For DITA transformations: DITA_OT_DIR\plugins\com.oxygenxml.webhelp\oxygen-webhelp\resources\img\.
2. For DocBook transformations: [OXYGEN_INSTALL_DIR]\frameworks\docbook\xsl\com.oxygenxml.webhelp\oxygen-webhelp\resources\img\.
Edit the WebHelp transformation scenario and open the Parameters tab.
1. 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.
2. For a DocBook transformation, set the html.stylesheet parameter to the path of your custom CSS file.
Run the transformation scenario.