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, the icons for the WebHelp Classic 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
.hasSubMenuClosedand.hasSubMenuOpenedproperties..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.
- 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\.
- For DITA transformations:
- Edit the WebHelp transformation
scenario and open the Parameters tab.
- For a DITA transformation, set the
args.cssparameter to the path of your custom CSS file. Also, set theargs.copycssparameter toyesto automatically copy your custom CSS in the output folder when the transformation scenario is processed. - For a DocBook transformation, set the
html.stylesheetparameter to the path of your custom CSS file.
- For a DITA transformation, set the
- Run the transformation scenario.