Customizations Specific to WebWorks Help

WebWorks Help : Customizations Specific to WebWorks Help

Customizations Specific to WebWorks Help

This section will cover project customizations specific to WebWorks Help 5.0. WebWorks Help specific customizations refer to any project or output modifications that can only be applied to WebWorks Help output – such as replacing the splash image and using custom icons in the Contents tab.

These types of customizations are specific to WebWorks Help:

Adding a PDF Button to the Toolbar

Removing the Splash Page

Replacing the Splash Image

Changing the Toolbar Buttons

Changing the Background Color of the Toolbar

Setting the Initial Width of the Navigation Frame

Controlling the Appearance of the Hover Text in the Navigation Frame

Changing the Font Color on All Tabs in the Navigation Frame

Using Custom Icons on the Contents Tab

Assigning a Page Style to Popup Windows

Modifying the Appearance of the Search Message

Modifying the Search Rank

Selecting a Theme

Renaming the Top-Level File

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 separate 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 for 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 194.

Adding a PDF Button to the Toolbar:

1.	In ePublisher Pro, 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 the project for changes to take effect.

Replacing the Splash Image

The splash page is the first page that displays in the topic frame when the Help set launches initially. By default, WebWorks Help systems display the WebWorks splash image; however, you can replace the default splash image with a custom image.

Replacing the Splash Image:

In Windows, open your project folder. Create the folder structure displayed in Figure 44. 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 44 File Structure for Replacing the Splash Image

Replace the Lobby_Blue folder with the name of the skin or theme that is used in the project. If the theme consists of two words, separate the words with an underscore (e.g., Architect_Red, Aero_Blue, Freeform_Green, etc.). To determine what theme the project is using, go to Format > Format Settings and find the Theme setting.

2.	Within the images folder, place the image that will be used as the splash image.

3.	Rename the image splash.jpg.

4.	Regenerate the project for changes to take effect.

Removing the Splash Page

Initially, when WebWorks Help launches, it displays the splash page; however, instead of displaying the splash page, WebWorks Help can display the first topic page instead. This means that when the Help system launches, it will take the user directly to the first topic page of your Help set.

Removing the Splash Page:

In Windows, open your project folder. Create the folder structure displayed in Figure 45. 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 45 File Structure for Removing the Splash Image

2.	Navigate to C:\Program Files\WebWorks\ePublisher Pro\Formats\WebWorks Help 5.0\Files\wwhelp\wwhimpl\common\html.

3.	Copy first.htm.

4.	Paste first.htm into the html folder created in step 1.

5.	Rename first.htm to default.htm.

6.	Regenerate the project for changes to take effect.

Changing the Toolbar Buttons

WebWorks Help systems have a standard toolbar that comes with the following buttons:

Show in Contents button

Previous button

Next button

PDF button

Removing or Replacing the Show in Contents Button

The Show in Contents button allows users to synch the topic they are viewing to the TOC.

Removing the Show in Contents Button:

1.	In ePublisher Pro, go to Format > Format Settings.

2.	Find the setting Automatically synchronize the TOC.

3.	Change the value to Disabled.

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

5.	Regenerate the project for changes to take effect.

Replacing the Show in Contents Button:

In Windows, open your project folder. Create the folder structure displayed in Figure 46. 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 46 File Structure for Replacing the Show in Contents Button

2.	Inside the images folder, place the image that will be used as the Show in Contents button.

3.	Name the image syncx.gif.

4.	Regenerate the project for changes to take effect.

Removing and Replacing the Previous and Next Buttons

The previous button allows users to navigate back to preceding topics in the Help system.

Removing the Previous and Next Button:

1.	In ePublisher Pro, go to Format > Format Settings.

2.	Find the setting Show previous & next toolbar buttons.

3.	Change the value to Disabled.

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

5.	Regenerate the project for changes to take effect.

Replacing the Previous Button:

In Windows, open your project folder. Create the folder structure displayed in Figure 47. 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 47 File Structure for Replacing the Previous Button

Replace the Lobby_Blue folder with the name of the skin or theme that is used in the project. If the theme consists of two words, separate the words with an underscore (e.g. Architect_Red, Aero_Blue, Freeform_Green, etc.). To determine what theme the project is using, go to Format > Format Settings, and find the Theme setting.

2.	Inside the images folder, place the image that will be used as the Previous button.

3.	Name the image prev.gif.

4.	Regenerate the project for changes to take effect.

Replacing the Next Button:

In Windows, open your project folder. Create the folder structure displayed in Figure 48. 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 48 File Structure for Replacing the Next Button

2.	Inside the images folder, place the image that will be used as the Next button.

3.	Name the image next.gif.

4.	Regenerate the project for changes to take effect.

Changing the Background Color of the Toolbar

The toolbar in WebWorks Help 5.0 is composed of a single repeating GIF image: toolsbg.gif. This image is located in the images folder of your project’s theme directory. To modify the background color of the toolbar, you will need to modify the color of toolsbg.gif with an image editor.

Changing the Background Color of the Toolbar:

In Windows, open your project folder. Create the folder structure displayed in Figure 49. 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 49 File Structure for Changing the Background Color of the Toolbar

2.	Navigate to C:\Program Files\WebWorks\ePublisher Pro\Formats\WebWorks Help 5.0\Skins\Lobby_Blue\Files\wwhelp\wwhimpl\common\images.

Replace the Lobby_Blue folder with the name of the skin or theme that is used in the project.

3.	Copy toolsbg.gif.

4.	Paste toolsbg.gif into the images folder created in step 1.

5.	Open toolsbg.gif with an image editor (e.g., Paint).

6.	Modify toolsbg.gif to reflect the color that will be used as the toolbar background and save the changes to the image.

7.	Regenerate the project for changes to take effect.

Setting the Initial Width of the Navigation Frame

The navigation frame refers to the pane that contains the Contents, Index, Search, and Favorites tabs. When a WebWorks Help system launches, the initial width of the navigation frame is set to 300 pixels; however, by modifying wwhelp.htm, you can specify the initial width of the navigation frame when the Help set opens initially.

Setting the Initial Width of the Navigation Frame:

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

Figure 50 File Structure for Setting the Initial
Width of the Navigation Frame

2.	Navigate to C:\Program Files\WebWorks\ePublisher Pro\Formats\WebWorks Help 5.0\Files\wwhelp\wwhimpl\js\html.

3.	Copy wwhelp.htm.

4.	Paste wwhelp.htm into the html folder created in step 1.

5.	Open wwhelp.htm with a text or HTML editor (e.g., Notepad).

6.	Find the following block of code:

7.	Change `300` (the value for frameset columns) to the desired width for navigation frame.

The width of the frameset is measured in pixels.

8.	Save wwhelp.htm.

9.	Regenerate the project for changes to take effect.

Controlling the Appearance of the Hover Text in the Navigation Frame

Hover text refers to the popup window that displays whenever you move your mouse over a link on the Contents tab. See Figure 51.

Figure 51 Hover Text in the Navigation Frame

The appearance of the hover text can be altered by modifying the wwhelp_settings.xml file. Within this file, you can modify the appearance of the hover text that appears in the navigation frame when the user hovers over any topic link. This includes changing the font color, background color, border color, and font of the hover text. Within this file, you can also disable the hover text from appearing in the navigation frame.

Changing the Font Color of the Hover Text:

In Windows, open your project folder. Create the folder structure displayed in Figure 52. 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 52 File Structure for Changing the Font Color of the Hover Text

2.	Navigate to C:\Program Files\WebWorks\ePublisher Pro\Formats\WebWorks Help 5.0\Skins\Lobby_Blue.

Replace the Lobby_Blue folder with the name of the skin or theme that is used in the project.

3.	Copy wwhelp_settings.xml.

4.	Paste wwhelp_settings.xml into the Lobby_Blue folder created in step 1.

5.	Open wwhelp_settings.xml with a text or an XML editor (e.g., Notepad).

6.	Find the following block of code:

</HoverText>

7.	Replace `#000000` with the desired HEX color value.

8.	Save wwhelp_settings.xml.

9.	Regenerate the project for changes to take effect.

Changing the Background Color of the Hover Text:

In Windows, open your project folder. Create the folder structure displayed in Figure 53. 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 53 File Structure for Changing the Background
Color of the Hover Text

2.	Navigate to C:\Program Files\WebWorks\ePublisher Pro\Formats\WebWorks Help 5.0\Skins\Lobby_Blue.

Replace the Lobby_Blue folder with the name of the skin or theme that is used in the project.

3.	Copy wwhelp_settings.xml.

4.	Paste wwhelp_settings.xml into the Lobby_Blue folder created in step 1.

5.	Open wwhelp_settings.xml with a text or an XML editor (e.g., Notepad).

6.	Find the following block of code:

</HoverText>

7.	Replace `#FFFFCC` with the desired HEX color value.

8.	Save wwhelp_settings.xml.

9.	Regenerate the project for changes to take effect.

Changing the Font and Font Size of the Hover Text:

In Windows, open your project folder. Create the folder structure displayed in Figure 54. 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 54 File Structure for Changing the Font and Font
Size of the Hover Text

2.	Navigate to C:\Program Files\WebWorks\ePublisher Pro\Formats\WebWorks Help 5.0\Skins\Lobby_Blue.

Replace the Lobby_Blue folder with the name of the skin or theme that is used in the project.

3.	Copy wwhelp_settings.xml.

4.	Paste wwhelp_settings.xml into the Lobby_Blue folder in the project format override.

5.	Open wwhelp_settings.xml with a text or an XML editor (e.g. Notepad).

6.	Find the following block of code:

</HoverText>

7.	To change the font, replace “`Verdana, Arial, Helvetica, sans-serif`” with the desired font.

8.	To change the font size, replace “`8pt`” with the font size you want to use.

9.	Save wwhelp_settings.xml.

10.	Regenerate the project for changes to take effect.

Changing the Border Color of the Hover Text:

In Windows, open your project folder. Create the folder structure displayed in Figure 55. 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 55 File Structure for Changing the Border Color of the Hover Text

2.	Navigate to C:\Program Files\WebWorks\ePublisher Pro\Formats\WebWorks Help 5.0\Skins\Lobby_Blue.

Replace the Lobby_Blue folder with the name of the skin or theme that is used in the project.

3.	Copy wwhelp_settings.xml.

4.	Paste wwhelp_settings.xml into the Lobby_Blue folder created in step 1.

5.	Open wwhelp_settings.xml with a text or an XML editor (e.g., Notepad).

6.	Find the following block of code:

</HoverText>

7.	Replace `#999999` with the desired HEX color value.

8.	Save wwhelp_settings.xml.

9.	Regenerate the project for changes to take effect.

Disabling the Hover Text:

In Windows, open your project folder. Create the folder structure displayed in Figure 56. 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 56 File Structure for Disabling the Hover Text

2.	Navigate to C:\Program Files\WebWorks\ePublisher Pro\Formats\WebWorks Help 5.0\Skins\Lobby_Blue.

Replace the Lobby_Blue folder with the name of the skin or theme that is used in the project.

3.	Copy wwhelp_settings.xml.

4.	Paste wwhelp_settings.xml into the Lobby_Blue folder created in step 1.

5.	Open wwhelp_settings.xml with a text or an XML editor (e.g., Notepad).

6.	Find the following block of code:

</HoverText>

7.	Change the value in `<HoverText enable="true">` from `“true”` to `“false”`.

8.	Save wwhelp_settings.xml.

9.	Regenerate the project for changes to take effect.

Changing the Font Color on All Tabs in the Navigation Frame

The tabs in the navigation frame all share the same font and text style properties. These style properties are specified in the wwhelp_settings.xml file, which is located in your project’s theme directory.

Changing the Font Color on All the Tabs in the Navigation Frame:

In Windows, open your project folder. Create the folder structure displayed in Figure 57. 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 57 File Structure for Changing the Font Color on All the
Tabs in the Navigation Frame

2.	Navigate to C:\Program Files\WebWorks\ePublisher Pro\Formats\WebWorks Help 5.0\Skins\Lobby_Blue.

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

Replacing the Splash Image:WebWorks_WriteArrow(WebWorksRootPath, "wwdd1147140", false);

Removing the Splash Page:WebWorks_WriteArrow(WebWorksRootPath, "wwdd1149983", false);

Removing the Show in Contents Button:WebWorks_WriteArrow(WebWorksRootPath, "wwdd1151345", false);

Replacing the Show in Contents Button:WebWorks_WriteArrow(WebWorksRootPath, "wwdd1151457", false);

Removing the Previous and Next Button:WebWorks_WriteArrow(WebWorksRootPath, "wwdd1152323", false);

Replacing the Previous Button:WebWorks_WriteArrow(WebWorksRootPath, "wwdd1213436", false);

Replacing the Next Button:WebWorks_WriteArrow(WebWorksRootPath, "wwdd1152596", false);

Changing the Background Color of the Toolbar:WebWorks_WriteArrow(WebWorksRootPath, "wwdd1175736", false);

Setting the Initial Width of the Navigation Frame:WebWorks_WriteArrow(WebWorksRootPath, "wwdd1153993", false);

Controlling the Appearance of the Hover Text in the Navigation Frame

Changing the Font Color of the Hover Text:WebWorks_WriteArrow(WebWorksRootPath, "wwdd1154605", false);

Changing the Background Color of the Hover Text:WebWorks_WriteArrow(WebWorksRootPath, "wwdd1214448", false);

Changing the Font and Font Size of the Hover Text:WebWorks_WriteArrow(WebWorksRootPath, "wwdd1156139", false);

Changing the Border Color of the Hover Text:WebWorks_WriteArrow(WebWorksRootPath, "wwdd1156122", false);

Disabling the Hover Text:WebWorks_WriteArrow(WebWorksRootPath, "wwdd1155791", false);

Changing the Font Color on All Tabs in the Navigation Frame

Changing the Font Color on All the Tabs in the Navigation Frame:WebWorks_WriteArrow(WebWorksRootPath, "wwdd1175806", false);

Adding a PDF Button to the Toolbar:

Replacing the Splash Image:

Removing the Splash Page:

Removing the Show in Contents Button:

Replacing the Show in Contents Button:

Removing the Previous and Next Button:

Replacing the Previous Button:

Replacing the Next Button:

Changing the Background Color of the Toolbar:

Setting the Initial Width of the Navigation Frame:

Changing the Font Color of the Hover Text:

Changing the Background Color of the Hover Text:

Changing the Font and Font Size of the Hover Text:

Changing the Border Color of the Hover Text:

Disabling the Hover Text:

Changing the Font Color on All the Tabs in the Navigation Frame: