Standard Customizations

WebWorks Help : Standard Customizations

Standard Customizations

Standard customizations refer to any modifications that can be made to most formats, such as adding your company’s contact information or specifying the HEX color value for your hyperlinks. Within each format, there are different methods of implementing standard customizations. In the following sections, we will cover the standard customizations that are applicable to WebWorks Help 5.0.

Typically, customizations to the WebWorks Help 5.0 format will require that you create a project override.

These are the standard customizations that you can apply to WebWorks Help:

Customizing Hyperlink Colors

Adding a Logo

Displaying Company Contact Information

Modifying Company Contact Information

Disabling Autonumbering in Output

Modifying Page.asp

Creating Popups

Creating Related Topics

Creating Context-Sensitive Help

Customizing Hyperlink Colors

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 color HEX value.

Changing the Color of Hyperlinks:

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

Figure 40 Folder Structure for Changing the Color of Hyperlinks

2.	Navigate to ePublisher Pro\Formats\WebWorks Help 5.0\Pages\css in your installation directory.

3.	Select and copy webworks.css.

4.	Paste webworks.css into the css folder created inside your project folder 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 any of the color values with the HEX values you would like to use.

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 the mouse pointer over the link.

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 the project for changes to take effect.

Modifying Company Contact Information

You can add your company’s contact information to each output page in your Help system. The company contact information can display on the bottom and/or top of your Topic frame. 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 WebWorks Help, users may specify a company’s name, e-mail address, phone number, fax number, and create a link to a Web page. The user may enter any information in any field. The information displays in the following order:

Adding a web page creates a link in the Company Name to that Web page. A mailto: link can be added in the e-mail Address section.

Once you have specified your company’s contact information, you will need to enable the company info display options in the Style Designer. For more information, see “Displaying Company Contact Information” on page 134.

Modifying the Company Name

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

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.

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

Modifying the Appearance of the Company Name:

The procedure to modify the appearance of the Company Name field 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 135.

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 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:16px;

The user 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 field.

Adding a Company Email 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:

The procedure to modify the appearance of the Company e-Mail address field 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 135.

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

The user 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 field.

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:

The procedure to modify the appearance of the Company Phone Number field 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 135.

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;

The user 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 field.

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 the Company Fax Information:

The procedure to modify the appearance of the Company Fax field 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 135.

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

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

Modifying the Link to the Company Web Page

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

Adding a Company Web Page:

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

After 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. Company contact information appears in the Topic frame.

Displaying Company Contact Information:

1.	Select View > Style Designer.

2.	Click on the Page Styles tab.

3.	Select the 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.

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 3-5 for every paragraph for which you wish to disable autonumbering.

7.	Close the Style Designer.

8.	Regenerate your project for changes to take effect.

Modifying Page.asp

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

Modifying Page.asp:

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

Figure 41 Folder Hierarchy for Modifying Page.asp

2.	Navigate to the ePublisher Pro\Formats\WebWorks Help 5.0\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.

6.	Make your changes to Page.asp.

7.	Save Page.asp.

8.	Regenerate your project for changes to take effect.

Creating Popups

To create a popup window, there must be a link between the hot text and the content it will display; after the popup links have been created, popups may be implemented by using marker styles or paragraph styles. Once you set up the hyperlinks in your source document and apply paragraph or marker styles to your content, you will need to assign popup behavior to your paragraph and marker styles.

Using Marker Styles to Create Popups

The three marker styles that are involved in creating usable popups are Popup, PopupOnly, and PopupEnd. These markers are inserted into the source document to specify content that will be displayed in a popup window and whether the popup content will be available through a clickable link. After the popup markers have been properly embedded in the source document(s), popup behavior needs to be assigned in the project.

Here are the popup behaviors that can be assigned to marker styles:

Popup start: Use this option to designate this marker style as the starting point for popup content.

Popup start with no output: Use this option to designate this marker style as the starting point for popup content without a clickable link.

Popup end: Use this option to designate this marker style as the ending point for popup content.

Adobe FrameMaker users must create the popup marker styles they will use before proceeding. If you use Microsoft Word to author your source documents, skip to “Preparing your Document for Popups.”

Creating Popup Marker Styles in FrameMaker:

1.	Go to Special > Marker.

2.	Select Edit... from the Marker Type drop-down menu.

3.	Create a custom marker to designate the starting point for popup content:

a.	To display popups in a window and with a clickable link, name the marker Popup.

b.	To display popups in a window only, name the marker `PopupOnly`.

4.	Click Add.

5.	Create a custom marker named `PopupEnd` to designate the ending point for popup content.

6.	Click Add.

7.	Click Done.

8.	Save your document.

Preparing Your Document for Popups:

1.	Create the hyperlink between the hot text and the content to be displayed and ensure that the link resolves in the document. If you have problems creating the hyperlink, refer to your authoring tool’s Help documentation for information on creating hyperlinks.

If you have more than one paragraph in the popup window the hyperlink should go to the first paragraph.

2.	Place the insertion point at the beginning of the content to be displayed in the popup window.

3.	Insert the popup markers in your document:

▪	For Adobe FrameMaker:

a.	Go to Special > Marker.

b.	Select the marker to designate the beginning of your popup content from the drop-down menu:

Choose Popup to display your popups in a window and with a clickable link

Choose PopupOnly to display your popups in a window only.

c.	Click New Marker to insert the marker.

d.	Place the insertion point at the end of the content to be displayed in the popup window.

e.	Select PopupEnd from the Marker Type drop-down menu.

f.	Click New Marker to insert the new PopupEnd marker.

g.	Save your document.

▪	For Microsoft Word:

a.	From the menu bar in Word, go to WebWorks > Markers.

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

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

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

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

Adding a Company Email Address:WebWorks_WriteArrow(WebWorksRootPath, "wwdd1208471", false);

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

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

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

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

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

Adding a Company Web Page:WebWorks_WriteArrow(WebWorksRootPath, "wwdd1208580", false);

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

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

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

Creating Popup Marker Styles in FrameMaker:WebWorks_WriteArrow(WebWorksRootPath, "wwdd1234336", false);

Preparing Your Document for Popups:WebWorks_WriteArrow(WebWorksRootPath, "wwdd1234350", false);

Changing the Color of Hyperlinks:

Adding a Logo:

Adding a Company Name:

Modifying the Appearance of the Company Name:

Adding a Company Email 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 the Company Fax Information:

Adding a Company Web Page:

Displaying Company Contact Information:

Disabling Autonumbering:

Modifying Page.asp:

Creating Popup Marker Styles in FrameMaker:

Preparing Your Document for Popups: