skip to main content
Designing Stationery » Customizing Dynamic HTML » Modifying the Appearance of the Table of Contents in Dynamic HTML
Modifying the Appearance of the Table of Contents in Dynamic HTML
ePublisher stores CSS settings that control the appearance of table of contents entries in the webworks.css file. You can create an override file to modify these settings for specific levels of the table of contents. For example, you can define a different font size and margin for each level in the table of contents.
To modify the appearance of the table of contents
1. In your Stationery design project, on the View menu, click Project Directory. For more information about override files and locations, see Stationery, Projects, and Overrides.
2. If you want to override the CSS settings for all Dynamic HTML targets in the project, create the Formats\Dynamic HTML\Pages\css folder in your project folder.
3. If you want to override the CSS settings for a specific target, create the Targets\targetname\Pages\css folder in your project folder, where targetname is the name of the target you want to override.
4. Copy the webworks.css file from the following folder to the override folder you created within your project folder:
Program Files\WebWorks\ePublisher Pro\Formats\Dynamic HTML\Pages\css
5. Open the webworks.css file you copied to your project override folder.
6. Find the code for div.WebWorks_TOC_Levelx, where x is the level number you want to modify. Then, specify the values within the braces to modify the font or margin:
*To modify the font of all table of contents entries for the specified level, specify the name of the font you want, such as font-family: Arial;.
*To modify the font size of all table of contents entries for the specified level, specify the size of the font you want, such as font-size: 14pt;.
*To modify the left margin indent of all table of contents entries for the specified level, specify the indent you want, such as margin-left: 10px;.
7. Save the webworks.css file.
8. Regenerate your project to review the changes.
For example, the following figure illustrates how you could customize your table of contents entries.
div.WebWorks_TOC_Level1
{ font-size: 14pt;
  font-family: Arial;
  margin-left: 12px;
}
div.WebWorks_TOC_Level2
{ font-size: 12pt;
  font-family: Arial;
  margin-left: 24px;
}
Was this helpful?
Last modified date: 11/30/2021