Modifying the Appearance of Mini-TOC Entries

Designing Stationery » Designing, Deploying, and Managing Stationery » Designing Stationery » Defining TOCs and Mini-TOCs » Modifying the Appearance of Mini-TOC Entries

NOTE TO REVIEWERS: The steps in the task were updated for the 2009.2 release to reflect the new View menu functionality per ticket #36.

ePublisher stores CSS settings that control the appearance of mini-TOC entries in the webworks.css file. You can create an override file to modify these settings for specific levels of the mini TOC or for the entire mini TOC. For example, you can define a different font size and margin for each level in the mini TOC.

For more information about override files and locations, see Stationery, Projects, and Overrides.

To modify the appearance of the mini TOC

1. If you want to override the CSS settings for an output format, complete the following steps:

a. In your Stationery design project, on the View menu, click Format Override Directory.

b. Create the Formats\formattype\Pages\css folder in your project folder, where formattype is the name of the output format you want to override, such as Microsoft HTML Help 1.x.

2. If you want to override the CSS settings for a target, complete the following steps:

a. In your Stationery design project, on the View menu, click Target Override Directory.

b. Create the Targets\targetname\Pages\css folder in your project folder, where targetname is the name of the target you want to override.

3. Copy the webworks.css file from the following folder to the override folder you created within your project folder:

Program Files\WebWorks\ePublisher Designer\Formats\formattype\Pages\css

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

5. If you want to modify the appearance of the entire mini TOC, find the code for div.WebWorks_MiniTOC and modify the values specified within the braces:

To modify the background color, specify the desired RGB color value for the background-color option.

To modify the border color, specify the desired RGB color value for the border-color option.

To modify the border width, specify the number of pixels you want for the border-width option.

To modify the type of border, specify the appropriate border style value for the border-style option.

To modify the spacing between the border and the text, specify the number of pixels you want for the padding option.

To modify the font, specify the name of the font you want for the font-family option.

6. If you want to modify the appearance of a specific level of the mini TOC, find the code for div.WebWorks_MiniTOC_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 mini-TOC 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 mini-TOC 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 mini-TOC 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 mini-TOC entries.

div.WebWorks_MiniTOC_Level1

{ font-size: 14pt;

  font-family: Arial;

  margin-left: 6px;

div.WebWorks_MiniTOC_Level2

{ font-size: 12pt;

  font-family: Arial;

  margin-left: 16px;

div.WebWorks_MiniTOC_Level3

{ font-size: 10pt;

  font-family: Arial;

  margin-left: 16px;

Was this helpful?

Last modified date: 12/09/2021