Modifying the Appearance of the Index in Dynamic HTML

Designing Stationery » Customizing Dynamic HTML » Modifying the Appearance of the Index in Dynamic HTML

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

To modify the appearance of the index

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 Designer\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_Index_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 index 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 index 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 index 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 index entries.

div.WebWorks_Index_Level1

{ font-size: 14pt;

  font-family: Arial;

  margin-left: 12px;

div.WebWorks_Index_Level2

{ font-size: 12pt;

  font-family: Arial;

  margin-left: 24px;

Was this helpful?

Last modified date: 11/30/2021