Table of Contents

Previous

Next


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 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_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:

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

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

  5. To modify the left margin indent of all index 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 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;

}

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