How to Change the Icons in a WebHelp Classic Table of Contents
Edit online

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:
  1. 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;
}
  2. 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.classic\oxygen-webhelp\resources\img\.
    • For DocBook transformations: [OXYGEN_INSTALL_DIR]\frameworks\docbook\xsl\com.oxygenxml.webhelp.classic\oxygen-webhelp\resources\img\.
  3. Edit the WebHelp transformation scenario and open the Parameters tab.
    • 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.
    • For a DocBook transformation, set the html.stylesheet parameter to the path of your custom CSS file.
  4. 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:
To assign other icons and use a script outside of Oxygen XML Editor/Author, follow this procedure:
  1. 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;
}
  2. 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.classic\oxygen-webhelp\resources\img\.
    • For DocBook transformations: [DocBook XSL directory]\com.oxygenxml.webhelp.classic\oxygen-webhelp\resources\img\.
  3. Reference your custom CSS file:
    • For DITA transformations, use the args.css parameter in your transformation script and set its value 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.
    • For DocBook transformations, use the html.stylesheet parameter in your transformation script and set its value to the path of your custom CSS file.
  4. Execute the transformation script.
For example, a DITA script might look like this::
  • Windows:

    dita.bat -i c:\mySample.ditamap -f webhelp -Dargs.css=c:\myFile.css -Dargs.copycss=yes

  • Mac OS X/ Linux:

    dita -i /mySample.ditamap -f webhelp -Dargs.css=/myFile.css -Dargs.copycss=yes