Changing the icons in a WebHelp Classic table of contents

You can change the icons that appear in a WebHelp Classic table of contents by assigning new image files in a custom CSS file. By default, these icons 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 within a transformation scenario, follow this procedure:

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

    For example:

    .hasSubMenuClosed{
    background: url('TOC-my-closed-button.png') no-repeat;
}
    .hasSubMenuOpened{
    background: url('TOC-my-opened-button.png') no-repeat;
}
  2. It is recommended that you store the image files in the same directory as the default icons. For example: [DITA-OT DIR]\plugins\com.oxygenxml.webhelp.classic\oxygen-webhelp\resources\img\.
  3. Edit the WebHelp transformation scenario and open the Parameters tab. 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.
  4. Run the WebHelp transformation scenario to generate the output.