Edit online

How to Change 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;
}

Using Oxygen XML Editor/Author

To assign other icons and use a transformation scenario from within Oxygen XML Editor/Author, follow this 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\docbook\xsl\com.oxygenxml.webhelp.classic\oxygen-webhelp\resources\img\).
Edit the WebHelp transformation scenario and open the Parameters tab. Set the html.stylesheet parameter to the path of your custom CSS file.
Run the WebHelp transformation scenario to generate the output.

Using a Script Outside of Oxygen XML Editor/Author

Important: Running WebHelp transformations from a script outside of Oxygen XML Editor/Author requires an additional license and some additional setup:

You must have a valid license for the Oxygen XML WebHelp Plugin (https://www.oxygenxml.com/buy_webhelp.html).
The Oxygen XML WebHelp Plugin must be installed and integrated.

To assign other icons and use a script outside of Oxygen XML Editor/Author, follow this 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 ([DocBook XSL directory]\com.oxygenxml.webhelp.classic\oxygen-webhelp\resources\img\).
Reference your custom CSS file. Use the html.stylesheet parameter in your transformation script and set its value to the path of your custom CSS file.
Execute the transformation script.