Standard Customizations

Dynamic HTML : Standard Customizations

Standard Customizations

These are the standard customizations that the user can apply to Dynamic HTML through ePublisher Pro:

Customizing Hyperlink Colors

Adding a Logo

Modifying the Company Contact Information

Displaying Company Contact Information

Disabling Autonumbering in Output

Modifying Page.asp

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

Hyperlink color settings are stored in webworks.css. The HEX color values of any of the anchor tags (e.g., a:link:active, a:visited, a:link:hover, and a:link) can be replaced with any HEX color value.

Changing the Color of Hyperlinks:

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 17 Folder Structure for Changing the Color of Hyperlinks

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:

a:link:active { color: #0000CC}

a:link:hover { color: #CC0033}

a:link { color: #3366CC}

a:visited { color: #9999CC}

7.	Replace the color values with the desired new HEX values.

a:link:active controls the color of the link when it is selected.

a:link:hover controls the color of the link when the user hovers over it.

a:link controls the color of unvisited links.

a:visited controls the color of links that have already been visited.

8.	Save webworks.css.

9.	Regenerate your project for changes to take effect.

Adding a Logo

If you add a logo image to your project, the logo will display alongside your company contact information on the top and/or bottom of the output pages in your Help system. There is a three-step process in order to get your logo image to display in your output. First, you must place the image that will be used as the logo in the User Files directory; next, you must select the image in Format Settings; finally, you must enable company information to display by using the Style Designer.

Adding a Logo:

1.	In ePublisher Pro, select View > User Files.

2.	Place the logo image into this directory.

3.	Select Format > Format Settings.

4.	Click on the value field next to the Company logo image setting.

5.	Type in the name of the logo image (e.g., logo.gif) or click on the button to select the image from the User Files directory.

6.	Click OK to close the Format Settings dialog box.

7.	Select View > Style Designer.

8.	Click on the Page Styles tab.

9.	Select the Default page style.

10.	Click on the Options tab.

11.	Enable the company information for the top and/or the bottom.

12.	Close the Style Designer.

13.	Regenerate project for changes to take effect.

Modifying the Company Contact Information

You can add your company’s contact information to each output page in your Help system. By default, the company contact information can display on the bottom and/or top of your output pages. You specify where the company contact information displays by enabling the Company info displayed at top or Company info displayed at bottom options in the Style Designer.

With DHTML you can specify your company’s name, e-Mail address, phone number, fax number, and create a link to a webpage. These are naming conventions for sections provided to add any information desired by the user. The user may enter any information in any field. The information displays in the following order:

Adding a webpage creates a link of the company name to that webpage. A mailto: link is added in the e-mail Address setting.

In order to display company contact information on the output pages, you must have the company contact information option enabled in the Style Designer. For more information, see “Displaying Company Contact Information” on page 80.

Modifying the Company Name

In addition to adding a company name to your navigation bar, you may modify the font and size of the text.

Adding a Company Name:

1.	Select Format > Format Settings.

2.	Find the setting Company name.

3.	In the Value field, enter the company’s name (e.g., Quadralay Corporation).

4.	Click OK to close the Format Settings dialog box.

Modifying the Appearance of the Company Name:

The procedure to modify the appearance of text in the navigation bar requires markup to be changed in one place for text appearing at the top of the output page and another place for text that appears at the bottom of the output page.

1.	Open the page.asp file placed inside the project directory as detailed in “Modifying Page.asp” on page 81.

2.	Modify the text appearing at the top or bottom of the page.

a.	To modify the appearance of the company name when it appears at the top of the page, locate the following markup:

...

b.	To modify the appearance of the company name when it appears at the bottom of the page, locate the following markup:

...

3.	Choose from the following options to modify your company name text.

a.	Change the font family by inserting the following markup in the table data element after `text-align:left;`:

font-family:webdings;

Substitute your preferred font family for “webdings.”

b.	Change the font size by changing the number in the following markup:

font-size:16px;

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

Modifying the Company e-Mail Address

In addition to adding an e-mail address to your navigation bar, you may modify the font and size of the text.

Adding a Company e-Mail Address:

1.	Select Format > Format Settings.

2.	Find the setting Company e-mail address.

3.	In the Value field, type in the e-mail address (e.g., info@webworks.com).

4.	Click OK to close the Format Settings dialog box.

Modifying the Appearance of the Company e-Mail Address:

1.	Open the page.asp file placed inside the project directory as detailed in “Modifying Page.asp” on page 81.

2.	Modify the text appearing at the top or bottom of the page:

a.	To modify the appearance of the company e-mail address when it appears at the top of the page, locate the following markup:

...

b.	To modify the appearance of the company e-mail address when it appears at the bottom of the page, locate the following markup:

...

3.	Choose from the following options to modify your company e-mail text.

a.	Change the font family by inserting the following markup in the table data element after `text-align:left;`:

font-family:webdings;

Substitute your preferred font family for “webdings.”

b.	Change the font size by changing the number in the following markup:

font-size:12px;

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

Modifying the Company Phone Number

In addition to adding a phone number to your navigation bar, you may modify the font and size of the text.

Adding a Company Phone Number:

1.	Select Format > Format Settings.

2.	Find the setting Company phone number.

3.	In the Value field, type in the phone number (e.g., 1-800-555-5555).

4.	Click OK to close the Format Settings dialog box.

Modifying the Appearance of Company Phone Information:

1.	Open the page.asp file placed inside the project directory as detailed in “Modifying Page.asp” on page 81.

2.	Modify the text appearing at the top or bottom of the page:

a.	To modify the appearance of the company phone number when it appears at the top of the page, locate the following markup:

...

b.	To modify the appearance of the company phone number when it appears at the bottom of the page, locate the following markup:

...

3.	Choose from the following options to modify your company phone information.

a.	Change the font family by inserting the following markup in the table data element after `text-align:left;`:

font-family:webdings;

Substitute your preferred font family for “webdings.”

b.	Change the font size by changing the number in the following markup:

font-size:12px;

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

Modifying the Company Fax Number

In addition to adding a fax number to your navigation bar, you may modify the font and size of the text.

Adding a Fax Number:

1.	Select Format > Format Settings.

2.	Find the setting Company fax number.

3.	In the Value field, type in the fax number (e.g., 1-800-555-5555).

4.	Click OK to close the Format Settings dialog box.

Modifying the Appearance of Company Fax Information:

1.	Open the page.asp file placed inside the project directory as detailed in “Modifying Page.asp” on page 81

2.	Modify the text appearing at the top or bottom of the page.

a.	To modify the appearance of the company fax information when it appears at the top of the page, locate the following markup:

...

b.	To modify the appearance of the company fax information when it appears at the bottom of the page, locate the following markup:

...

3.	Choose from the following options to modify your company fax text.

a.	Change the font family by inserting the following markup in the table data element after `text-align:left;`:

font-family:webdings;

Substitute your preferred font family for “webdings.”

b.	Change the font size by changing the number in the following markup:

font-size:12px;

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

Modifying the Link to the Company Webpage

You can add a link from your company name to your company’s website.

Adding a Company Webpage:

1.	Select Format > Format Settings.

2.	Find the setting Company webpage.

3.	In the Value field, type in the URL to the company’s website (e.g. http://www.webworks.com).

4.	Click OK to close the Format Settings dialog box.

Displaying Company Contact Information

If you have specified your company’s contact information – such as your company’s name and phone number – you need to enable either one or both of the company info display options in the Style Designer.

Displaying Company Contact Information:

1.	Select View > Style Designer.

2.	Click on the Page Styles tab.

3.	Select the first Default page style.

4.	Click on the Options tab.

5.	To display company information at the top of the page, find the option Company info displayed at top.

6.	To display company information at the bottom of the page, find the option Company info displayed at bottom.

7.	Click on the drop-down button and select Enabled.

8.	Close the Style Designer dialog box.

9.	Regenerate your project for changes to take effect.

Disabling Autonumbering in Output

Oftentimes in your source document(s), you will have autonumbering enabled for print delivery purposes (e.g., printed manuals and PDFs). This allows you to append autogenerated numbers to your chapters and headings; for online delivery, however, you might not want to include autonumbering in your Help system.

Disabling Autonumbering:

1.	Select View > Style Designer.

2.	Click on the Paragraph Styles tab.

3.	Select the paragraph style that contains the autonumbering.

4.	Click on the Options tab.

5.	For the option Keep paragraph numbering, choose Disabled.

6.	Repeat steps 1-5 for every paragraph for which you wish to disable autonumbering.

7.	Close the Style Designer dialog box.

8.	Regenerate your project for changes to take effect.

Modifying Page.asp

If you need to modify the formatting or display of any of the company information that displays at the top or bottom of your output pages, then you will need to modify Page.asp. For example, if you would like to change the font that your company’s contact information displays in, then you would need to modify Page.asp.

Modifying Page.asp:

1.	In Windows, open your project folder. Create the folder structure displayed in Figure 18. 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 18 Folder Hierarchy for Modifying Page.asp

2.	Navigate to the ePublisher Pro\Formats\Dynamic HTML\Pages folder inside the ePublisher Pro installation directory.

3.	Copy Page.asp.

4.	Paste Page.asp into the Pages folder created in step 1.

5.	Open Page.asp placed in the project directory.

6.	Make your changes to Page.asp.

7.	Save Page.asp.

8.	Regenerate your project for changes to take effect.

XHTML 1.0 CSS WAI-A

Changing the Color of Hyperlinks:WebWorks_WriteArrow(WebWorksRootPath, "wwdd1158115", false);

Adding a Logo:WebWorks_WriteArrow(WebWorksRootPath, "wwdd1250773", false);

Adding a Company Name:WebWorks_WriteArrow(WebWorksRootPath, "wwdd1244246", false);

Modifying the Appearance of the Company Name:WebWorks_WriteArrow(WebWorksRootPath, "wwdd1244255", false);

Adding a Company e-Mail Address:WebWorks_WriteArrow(WebWorksRootPath, "wwdd1231022", false);

Modifying the Appearance of the Company e-Mail Address:WebWorks_WriteArrow(WebWorksRootPath, "wwdd1237902", false);

Adding a Company Phone Number:WebWorks_WriteArrow(WebWorksRootPath, "wwdd1231281", false);

Modifying the Appearance of Company Phone Information:WebWorks_WriteArrow(WebWorksRootPath, "wwdd1236389", false);

Adding a Fax Number:WebWorks_WriteArrow(WebWorksRootPath, "wwdd1244552", false);

Modifying the Appearance of Company Fax Information:WebWorks_WriteArrow(WebWorksRootPath, "wwdd1244561", false);

Adding a Company Webpage:WebWorks_WriteArrow(WebWorksRootPath, "wwdd1231425", false);

Displaying Company Contact Information:WebWorks_WriteArrow(WebWorksRootPath, "wwdd1233983", false);

Disabling Autonumbering:WebWorks_WriteArrow(WebWorksRootPath, "wwdd1174699", false);

Modifying Page.asp:WebWorks_WriteArrow(WebWorksRootPath, "wwdd1187043", false);

Changing the Color of Hyperlinks:

Adding a Logo:

Adding a Company Name:

Modifying the Appearance of the Company Name:

Adding a Company e-Mail Address:

Modifying the Appearance of the Company e-Mail Address:

Adding a Company Phone Number:

Modifying the Appearance of Company Phone Information:

Adding a Fax Number:

Modifying the Appearance of Company Fax Information:

Adding a Company Webpage:

Displaying Company Contact Information:

Disabling Autonumbering:

Modifying Page.asp: