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 different 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: [OXYGEN_INSTALL_DIR]\frameworks\dita\DITA-OT\plugins\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.
2. For a DocBook transformation, set the html.stylesheet parameter to the path of your custom CSS file.