Table of Contents

Previous

Next


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 Windows Explorer, open your project folder. For more information about override files and locations, see “Understanding Stationery, Projects, and Overrides” on page 327.

  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

  1. Open the webworks.css file you copied to your project override folder.

  2. 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:

  3. 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;.

  4. 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;.

  5. 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;.

  6. Save the webworks.css file.

  7. 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;

}

ePublisher/2008.3/Help/Designing_Templates_and_Stationery/Customizing_Stationery.4.34 (last edited 2008-10-11 06:33:01 by BenAllums)