Customizations Specific to DHTML

Dynamic HTML : Customizations Specific to DHTML

Customizations Specific to DHTML

This section covers project customizations specific to Dynamic HTML. DHTML-specific customizations refer to any project or output modifications that can only be applied to DHTML output – such as modifying drop-down hotspots.

These types of customizations are specific to DHTML:

Adding a PDF Button to the Toolbar

Customizing the Mini TOC

Modifying the Navigation Bar

Disabling External CSS Files

Modifying Drop-down Hotspots

Modifying Breadcrumbs

References to file locations in this document assume the user is making modifications to files in the Dynamic HTML format.

Adding a PDF Button to the Toolbar

In your ePublisher project, you can generate PDFs for each source document and/or each top-level group. You can either deliver the PDFs separately from your Help system, or you can add a PDF button to your toolbar that will display the PDFs in the frameset.

The PDF that displays when you click on the PDF button depends on whether you have generated PDFs for the top-level groups or each source document in your project.

In your project, if you have selected to:

Generate PDFs only for the top-level groups, then when you click the PDF button, the PDF for the top-level group in which the currently viewed topic is located will display.

Generate PDFs only for each source document, then when you click the PDF button, the PDF for the source document in which the currently viewed topic is located will display.

Generate PDFs for all source documents and for all top-level groups, then when you click the PDF button, the PDF for the source document in which the currently viewed topic is located will display.

For more information on generating PDFs, please see “Creating PDFs” on page 108.

Adding a PDF Button to the Toolbar:

1.	In ePublisher, select Format > Format Settings.

2.	Find the option Show PDF button.

3.	Click in the Value field next to the option to enable the drop-down menu.

4.	Select Enabled.

5.	Close the Style Designer.

6.	Regenerate project for changes to take effect.

Modifying the Appearance of the Table of Contents or Index

All of the modifications detailed here require the user to create a project override. The user will be making changes to the webworks.css file. Please follow the instructions on creating a project target override for modifying the table of contents or index before following the instructions for the specific modification you wish to make.

Creating a Project Target Override for Modifying the Table of Contents or Index:

1.	Open your project folder in Windows. Create the folder structure displayed in Figure 19. For customizations on the target level, this file structure should be created in the Targets directory. For customizations on the project level, this file structure should be created in the Formats directory.

Figure 19 Folder Structure for Modifying
the TOC or Index Appearance

2.	Navigate to ePublisher Pro\Formats\Dynamic HTML\Pages\css in your installation directory.

3.	Select and copy webworks.css.

4.	Paste webworks.css into the CSS file created inside your project folder in step 1.

5.	Open the webworks.css file placed in the project directory.

6.	Make modifications as detailed in the pertinent instructions below.

7.	Save changes made to webworks.css.

8.	Regenerate your project for changes to take effect.

Changing the Font Family of Text in the Table of Contents:

1.	Open the webworks.css file placed inside the project directory as detailed in “Creating a Project Target Override for Modifying the Table of Contents or Index:” on page 85.

2.	Place the following markup inside the braces following each `div.WebWorks_TOC_Levelx` (where x is the level number) markup:

font-family: Webdings;

Substitute your desired font family in place of “Webdings.” See Figure 20 for a screenshot of this modification.

Figure 20 Sample Markup for Changing
the Font Family in the Table of Contents

There are ten Table of Contents levels in webworks.css. The font-family attribute must be placed in the markup for each level for which the modification is desired.

3.	Save the changes to webworks.css.

4.	Regenerate your project for changes to take effect.

Changing the Font Size of Text in the Table of Contents:

1.	Open the webworks.css file placed inside the project directory as detailed in “Creating a Project Target Override for Modifying the Table of Contents or Index:” on page 85.

2.	Place the following markup inside the braces following each `div.WebWorks_TOC_Levelx` (where x is the level number) markup:

font-size: 14pt;

Substitute your desired font size in place of “14pt.” See Figure 21 for a screenshot of this modification.

Users may specify the font size to be in points, inches, centimeters, etc.

Figure 21 Sample Markup for Changing
the Font Size in the Table of Contents

3.	Save the changes to webworks.css.

4.	Regenerate your project for changes to take effect.

Changing the Margin Indent of Text in the Table of Contents:

1.	Open the webworks.css file placed inside the project directory as detailed in “Creating a Project Target Override for Modifying the Table of Contents or Index:” on page 85.

2.	Change the default markup inside the braces following each `div.WebWorks_TOC_Levelx` (where x is the level number) markup to the desired size. See Figure 22 for a screenshot of this modification..

The user may specify the margin size to be in points, inches, centimeters, etc.

Figure 22 Sample Markup for Changing
the Margin in the Table of Contents

3.	Save the changes to webworks.css.

4.	Regenerate your project for changes to take effect.

Other Changes to Text in the Table of Contents

Any change can be made to the text in the table of contents by adding the proper markup inside the braces. Remember to place the value after a colon, and to place a semicolon at the end of the added markup. Table 8 details the proper markup for some common modifications.

Table 8: Markup for Miscellaneous Changes to Text in the Table of Contents
Markup	Possible Values	Explanation
`font-style:`	`normal \| italic \|` `oblique`	Selects between normal (sometimes referred to as "roman" or "upright"), italic, and oblique faces within a font family.
`font-weight:`	`normal \| bold \| bolder \|` `lighter \| 100 \| 200 \|` `300 \| 400 \| 500 \| 600 \|` `700 \| 800 \| 900`	Selects the weight of the font. The value 'normal' is synonymous with '400,’ and 'bold' is synonymous with '700.'
`text-transform:`	`capitalize \| uppercase \|` `lowercase \| none`	Changes the case of the text.
`text-align:`	`left \| right \| center \|` `justify`	Describes how text is aligned on a page

Changing the Font Family of Text in the Index:

1.	Open the webworks.css file placed inside the project directory as detailed in “Creating a Project Target Override for Modifying the Table of Contents or Index:” on page 85.

2.	Place the following markup inside the braces following each `div.WebWorks_Index_Levelx` (where x is the level number) markup:

font-family: Webdings;

Substitute your desired font family in place of “Webdings.” See Figure 23 for a screenshot of this modification..

Figure 23 Sample Markup for Changing
the Font in the Index

There are ten Index levels in webworks.css. The font-family markup must be placed in the markup for each level for the font change to take effect for that level.

3.	Save the changes to webworks.css.

4.	Regenerate your project for changes to take effect.

Changing the Font Size of Text in the Index:

1.	Open the webworks.css file placed inside the project directory as detailed in “Creating a Project Target Override for Modifying the Table of Contents or Index:” on page 85.

2.	Place the following markup inside the braces following each `div.WebWorks_Index_Levelx` (where x is the level number) markup:

font-size: 14pt;

Substitute your desired font size in place of “14pt.” See Figure 24 for a screenshot of this modification..

Users may specify the font size to be in points, inches, centimeters, etc.

Figure 24 Sample Markup for Changing
the Font Size in the Index

3.	Save the changes to webworks.css.

4.	Regenerate your project for changes to take effect.

Changing the Margin Indent of Text in the Index:

1.	Open the webworks.css file placed inside the project directory as detailed in “Creating a Project Target Override for Modifying the Table of Contents or Index:” on page 85.

2.	Change the default markup inside the braces following each `div.WebWorks_Index_Levelx` (where `x` is the level number) markup to the desired size. See Figure 25 for a screenshot of this modification..

Users may specify the font size to be in points, inches, centimeters, etc.

Figure 25 Sample Markup for Changing
the Margin in the Index

3.	Save the changes to webworks.css.

4.	Regenerate your project for changes to take effect.

Other Changes to Text in the Index

Any change can be made to the text in the index by adding the proper markup inside the braces. Remember to place the value after a colon and before a semicolon. Table 9 details the proper markup for some common modifications.

Table 9: Markup for Miscellaneous Changes to Text in the Index
Markup	Possible Values	Explanation
font-style:	normal \| italic \| oblique	Selects between normal (sometimes referred to as “roman” or “upright”), italic, and oblique faces within a font family.
font-weight:	normal \| bold \| bolder \| lighter \| 100 \| 200 \| 300 \| 400 \| 500 \| 600 \| 700 \| 800 \| 900	Selects the weight of the font. The value 'normal' is synonymous with '400,' and 'bold' is synonymous with '700.'
text-transform:	capitalize \| uppercase \| lowercase \| none	Changes the case of the text.
text-align:	left \| right \| center \| justify	Describes how text is aligned on a page

Customizing the Mini TOC

Mini TOC settings are stored in webworks.css. Modifications may be made to specific levels of the Mini TOC or to the entire Mini TOC.

Modifying the Appearance of the Mini TOC:

1.	In Windows, open your project folder. Create the folder structure displayed in Figure 17. For customizations on the target level, this file structure should be created in the Targets directory. For customizations on the project level, this file structure should be created in the Formats directory.

Figure 26 Folder Structure for Modifying the Miniature TOC

2.	Navigate to ePublisher Pro\Formats\Dynamic HTML\Pages\css in your installation directory.

3.	Select and copy webworks.css.

4.	Paste webworks.css into the css folder created inside your project directory in step 1.

5.	Open the webworks.css file placed in the project directory.

6.	Find the following block of markup:

div.WebWorks_MiniTOC

{

background-color: #33FF00;

border-color: #00FFFF;

7.	Modify values as desired.

a.	`background-color`: Enter the desired HEX value to modify the background color

b.	`border-color`: Enter the desired HEX value to modify the border color

c.	`border-width`: Enter a numerical value in pixels to modify the border width.

d.	`border-style`: Enter the appropriate value to modify the border style. See Table 10 for possible values for this markup.

Table 10: Border-style Values
Dashed	Inset
Dotted	None
Double	Outset
Groove	Ridge
Hidden	Solid (default)

e.	`padding`: Enter a numerical value in pixels to modify the padding between the border and the text.

f.	`font-family`: Enter a font name to modify the font family of the mini TOC.

8.	Save webworks.css.

9.	Regenerate your project for changes to take effect.

Modifying the Appearance of Individual Entries in the Mini TOC

Users may modify specific entries in the mini TOC. For instance, each line may be a different font or font size. In addition, margins may be modified.

Modifying Individual Entries in the Mini TOC:

1.	Open your project folder in Windows. Create the folder structure displayed in Figure 27. For customizations on the target level, this file structure should be created in the Targets directory. For customizations on the project level, this file structure should be created in the Formats directory.

Figure 27 Folder Structure for Modifying the Mini TOC

2.	Navigate to ePublisher Pro\Formats\Dynamic HTML\Pages\css in your installation directory.

3.	Select and copy webworks.css.

4.	Paste webworks.css into the css foldercreated inside your project directory in step 1.

5.	Open the webworks.css file placed in the project directory.

6.	Locate the following markup:

div.WebWorks_MiniTOC_Levelx

{

margin-left: 0pt;

}

where x equals the level number you wish to modify.

7.	Insert the desired markup to modify that particular miniature TOC level.

a.	To modify the font of a particular miniature TOC level, place the following markup inside the braces following each `div.WebWorks_MiniTOC_Levelx` (where x is the level number) markup:

font-family: Webdings;

Substitute your desired font family in place of “Webdings.”

b.	To modify the font size of a particular miniature TOC level, place the following markup inside the braces following each `div.WebWorks_MiniTOC_Levelx` (where x is the level number) markup:

font-size: 14pt;

Substitute your desired font size in place of “14pt.”

Users may specify the font size to be in points, inches, centimeters, etc.

c.	To modify the margin indent of a particular miniature TOC level, change the default markup inside the braces following each `div.WebWorks_MiniTOC_Levelx` (where x is the level number) markup to the desired size..

The user may specify the margin size to be in points, inches, centimeters, etc

See Figure 28 for a screenshot of this modification.

8.	Save changes.

9.	Regenerate your project for changes to take effect.

Figure 28 Sample Markup for Changing the Font-Size, Font-Family
and Margin in the Mini TOC

Modifying the Navigation Bar

The user may add graphics to the navigation bar. To add an image to the navigation bar see “Adding a Logo” on page 70. The navigation buttons can also be resized or replaced.

Changing the Navigation Buttons:

1.	Open your project folder in Windows. Create the folder structure displayed in Figure 29. For customizations on the target level, this file structure should be created in the Targets directory. For customizations on the project level, this file structure should be created in the Formats directory.

Figure 29 Folder Structure for Changing Navigation Buttons

2.	Paste .jpgs with the identical name as the image you wish to replace in the images folder created in step 1. See Table 11 for a list of button images and their file names.

3.	Regenerate your project for changes to take effect.

Table 11: Navigation Buttons
Image	Image Name	Description
	toc.gif	This button sends the user to the table of contents
	tocx.gif	This button is displayed when the user is in the table of contents, or if the table of contents is inaccessible.
	index.gif	This button sends the user to the index
	indexx.gif	This button is displayed when the user in in the index, or if the index in inaccessible.
	prev.gif	This button sends the user to the previous HTML document.
	prevx.gif	This button is displayed when there is no previous HTML document available.
	next.gif	This button sends the user to the next HTML document.
	nextx.gif	This button is displayed when there is no next HTML document available.

Disabling the Navigation Bar:

1.	Select View > Style Designer.

2.	Select Page Styles.

3.	Select the first Default option.

4.	Set the value for “Navigation links shown at bottom of page” and “Navigation links shown at top of page” to “Disabled.”

5.	Regenerate your project for the changes to take effect.

Disabling External CSS Files

For each document in your ePublisher Pro project, an external CSS file is created. Depending on how many files are in the project and the amount of style information in each document, these CSS files can become very large and redundant. Often, customers will use a custom CSS file to get around this. ePublisher will still emit the external CSS files, however. Users can simply delete the unused CSS files, but this can be problematic if they are deploying straight to a web server.

To choose whether to emit the external CSS files, the pages.fti and styles.xsl files must be modified.

Disabling External CSS Files:

1.	Open your project folder in Windows. Create the folder structure displayed in Figure 30. For customizations on the target level, this file structure should be created in the Targets directory. For customizations on the project level, this file structure should be created in the Formats directory.

Figure 30 Folder Structure for Modifying pages.fti

2.	Navigate to ePublisher Pro > Formats > Transforms in the installation directory.

3.	Copy pages.fti and styles.xsl.

4.	Paste pages.fti and styles.xsl in the Transforms folder created in step 1.

5.	Open pages.fti in a text editor.

6.	Navigate to the `<Groups>` tag.

7.	Add the following markup under the `<Groups>` tag:

<Group name="css" />

8.	Under the `<Settings>` tag add the following markup:

:

</Setting>

9.	Save and close this file.

10.	Open styles.xsl in a text editor.

11.	Under the `<wwfiles:Files version="1.0">` tag add the following markup:

:<xsl:if test="wwprojext:GetFormatSetting('emit-external- css', 'false') = 'true'">

12.	Under the `<!-- Call template -->` tag replace

<xsl:variable name="VarResult">

with the following markup:

<xsl:variable name="VarResultAsXML">

13.	Under the `<!-- Call template -->` tag and just before the `<xsl:value-of select="wwexsldoc:Document($VarResult,` `$VarPath, 'utf-8', 'text')" />` tag, add the following markup:

<xsl:variable name="VarResult" select="msxsl:node- set($VarResultAsXML)" />

14.	Under the `<xsl:variable name="VarProgressProjectGroupsEnd"` `select="wwprogress:End()" />` tag add the following markup:

</xsl:if>

15.	Save and close this file.

16.	Open Format Settings and set the value for “emit-external-css” to “Disabled.”

17.	Regenerate your project for changes to take effect.

Modifying Drop-down Hotspots

Users may change the images used to denote expanded or collapsed hotspots.

Modifying a Drop-down Hotspot:

1.	Open your project folder in Windows. Create the folder structure displayed in Figure 31. For customizations on the target level, this file structure should be created in the Targets directory. For customizations on the project level, this file structure should be created in the Formats directory.

Figure 31 Folder Structure for Modifying Drop-down Hotspots

2.	Paste .gifs with the identical name as the image you wish to replace in the images folder created in step 1. See Table 12 for details on drop-down images and their file names.

3.	Regenerate your project for changes to take effect.

Table 12: Drop-down Hotspot Image Details
Image	Image Name	Image Size

Adding a PDF Button to the Toolbar:WebWorks_WriteArrow(WebWorksRootPath, "wwdd1251745", false);

Modifying the Appearance of the Table of Contents or Index

Creating a Project Target Override for Modifying the Table of Contents or Index:WebWorks_WriteArrow(WebWorksRootPath, "wwdd1211118", false);

Changing the Font Family of Text in the Table of Contents:WebWorks_WriteArrow(WebWorksRootPath, "wwdd1212233", false);

Changing the Font Size of Text in the Table of Contents:WebWorks_WriteArrow(WebWorksRootPath, "wwdd1210968", false);

Changing the Margin Indent of Text in the Table of Contents:WebWorks_WriteArrow(WebWorksRootPath, "wwdd1213328", false);

Changing the Font Family of Text in the Index:WebWorks_WriteArrow(WebWorksRootPath, "wwdd1226094", false);

Changing the Font Size of Text in the Index:WebWorks_WriteArrow(WebWorksRootPath, "wwdd1213161", false);

Changing the Margin Indent of Text in the Index:WebWorks_WriteArrow(WebWorksRootPath, "wwdd1213758", false);

Modifying the Appearance of the Mini TOC:WebWorks_WriteArrow(WebWorksRootPath, "wwdd1245328", false);

Modifying Individual Entries in the Mini TOC:WebWorks_WriteArrow(WebWorksRootPath, "wwdd1245281", false);

Changing the Navigation Buttons:WebWorks_WriteArrow(WebWorksRootPath, "wwdd1214340", false);

Disabling the Navigation Bar:WebWorks_WriteArrow(WebWorksRootPath, "wwdd1245856", false);

Disabling External CSS Files:WebWorks_WriteArrow(WebWorksRootPath, "wwdd1206946", false);

Modifying a Drop-down Hotspot:WebWorks_WriteArrow(WebWorksRootPath, "wwdd1245034", false);

Adding a PDF Button to the Toolbar:

Creating a Project Target Override for Modifying the Table of Contents or Index:

Changing the Font Family of Text in the Table of Contents:

Changing the Font Size of Text in the Table of Contents:

Changing the Margin Indent of Text in the Table of Contents:

Changing the Font Family of Text in the Index:

Changing the Font Size of Text in the Index:

Changing the Margin Indent of Text in the Index:

Modifying the Appearance of the Mini TOC:

Modifying Individual Entries in the Mini TOC:

Changing the Navigation Buttons:

Disabling the Navigation Bar:

Disabling External CSS Files:

Modifying a Drop-down Hotspot: