Website Deliverables - webworks.com Previous Next Index Print
Changing WebWorks Help 5.0 Colors and Buttons

Changing WebWorks Help 5.0 Colors and Buttons

Last Modified: July 12, 2006

ePublisher Pro

This article provides steps to change colors and replace buttons for WebWorks Help 5.0.

You can modify the WebWorks Help 5.0 Classic theme to change the colors of the toolbar frame and toolbar buttons, navigation frame and navigation tabs, and the text color and font of the content in the navigation frame.

 

Section 1: Getting Started

The following are required before beginning the steps:

1)

You should have an ePublisher Pro Project or format target based on the WebWorks Help 5.0 format. If you do not have a WebWorks Help 5.0-based format target, create a new one in Project > Manage Format Targets. Make sure this target is selected as your Active Format Target:

2)

Select the “Classic” Theme in your Project Format Settings (Format > Format Settings).

Section 2: Creating a Project Target Override

Next, you will perform a Project Format Override, to override the default images which make up the WebWorks Help Classic theme, and replace them with your new images.

For detailed information about Project Format Overrides, please see the knowledge base article, “Creating Project Target Overrides”.

1)

In ePublisher Pro, choose View > User Files.

4)

Name the folder Targets.

5)

Open the Targets folder, and within the Targets folder, create a new folder.

6)

Create a new folder and assign it the name of the format target you have selected in your project (by default, the format target will be WebWorks Help 5.0).

8)

Download the attached file, Skins.zip, and save it into the format target folder. Right-click on “Skins.zip” and choose “Extract to folder” using a zip program such as WinZip. After unzipping the file, you should have a folder in that directory called “Skins”.

*

The image below depicts what the file hierarchy would look like expanded in Win­dows Explorer for a project named “WWHelp_Classic” and a Format Target named Web­Works Help 5.0.

Section 3: Identifying and modifying areas of the WebWorks Help interface

Using the image and the corresponding table below locate the letter/number combinations to identify the areas of the WebWorks Help 5.0 Classic interface you want to modify and the corresponding files to be modified. All these files are located in the Skins folder you have unzipped.

 

WebWorks Help Area

Corresponding file

A1 - toolbar background

toolsbg.gif

A2 - synchronize TOC button

sync.gif (active state), syncx.gif (inactive state)

A3 - previous topic button

prev.gif (active state), prevx.gif (inactive state)

A4 - next topic button

next.gif (active state), nextx.gif (inactive state)

A5 - PDF button

pdf.gif (active state), pdfx.gif (inactive state)

A6 - related topics button

related topics button - related.gif (active state), relatedx.gif (inactive state), relatedi.gif (inline icon that appears in the content pane)

A7 - print button

print.gif (active state), printx.gif (inactive state)

A8 - bookmark button

bkmark.gif (active state), bkmarkx.gif (inactive state

A9 - open book Contents icon

fo.gif

A10 - closed book Contents icon

fc.gif

A11 - page Contents icon

doc.gif

 

 

B1 - navigation pane background

viewbg.gif

B2 - numerics/Search background

navbg.gif

B3 - Index, Search, Contents, and Favorites tab background

btn_bg.gif (active state), btnx_bg.gif (inactive state)

 

 

C1 - Inactive state of all the tabs. Represented by the <DefaultColors> tag.

wwhelp_settings.xml

C2 - Active state of all the tabs. Represented by the <SelectedColors> tag.

wwhelp_settings.xml

C3 - HoverText popup. Represented by the <HoverText> tag, which affects the background, foreground and border colors of hovertext popups.

wwhelp_settings.xml

C4 - Highlight color for navigation pane links. Represented by the <AnchorColors> tag, which affects global font properties for anchors and anchor highlighting for navigation pane entries.

wwhelp_settings.xml

C5 - Link Color for navigation pane links. Represented by the <AnchorColors> tag.

wwhelp_settings.xml

Locate area A1-A11 images (toolsbg.gif, sync.gif, syncx.gif, prev.gif, prevx.gif, next.gif, nextx.gif, pdf.gif, pdfx.gif, related.gif, relatedx.gif, relatedi.gif, print.gif, printx.gif, print.gif, bkmark.gif, bkmarkx.gif, fo.gif, fc.gif, doc.gif) in the following folder:

\Skins\Classic\Files\wwhelp\wwhimpl\common\images

Locate area B1-B3 images (viewbg.gif, navbg.gif, btn_bg.gif, btnx_bg.gif) in the following folder:

\Skins\Classic\Files\wwhelp\wwhimpl\js\images

*

The images are .gif, so do not change the image format to .jpg or another image for­mat. Save the image with the exact same name and in the same directory as the default image you are replacing.

4)

Areas C1-C5 are controlled by the wwhelp_settings.xml file. With a text editor such as Notepad, open the wwhelp_settings.xml file located in the following folder:
Skins\Classic\wwhelp_settings.xml

There are many online resources that will help if you do not know what color HEX values you want. Here is one resource:

http://hotwired.lycos.com/webmonkey/reference/color_codes/

Areas C1 and C2 (described in the image and table above)

<Tabs>

<DefaultColors foreground="#666666" /> <!-- C1 -->

<SelectedColors foreground="#FFFFFF" /> <!-- C2 -->

</Tabs>

Area C3 (described in the image and table above)

<HoverText enable="true">

<Font style="font-family: Verdana, Arial, Helvetica,

sans-serif ; font-size: 8pt" />

<Colors foreground="#000000" background="#FFFFCC"

border="#999999" />

<Size width="150" />

</HoverText>

Areas C4 and C5 (described in the image and table above)

The AnchorColors HEX value for highlight controls the highlight color of the selected entry; the enabled value controls the link color; the disabled value controls the color of entries that do not link to anything.

<JavaScript>

<Font style="font-family: Verdana, Arial, Helvetica, sans-serif ; font-size: 8pt" />

<Indent value="17" />

<AnchorColors highlight="#CCCCCC" enabled="#315585" disabled="black" />

*

The rest of the Implementations section is for overriding the global font settings specified in the code block above, for each content pane (Contents, Index, Search and Favor­ites tabs) individually.

7)

Save wwhelp_settings.xml.

8)

Regenerate the project (Project > Regenerate All).