|
|
|
|
|
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). |
|
3) |
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. |
|
2) |
Navigate up one level; this directory should contain the .wep file and the Files, Data, Logs, and Output folders. |
|
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 Windows Explorer for a project named “WWHelp_Classic” and a Format Target named WebWorks 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 |
|
|
A1 - toolbar background |
|
|
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 |
|
|
A10 - closed book Contents icon |
|
|
A11 - page Contents icon |
|
|
B1 - navigation pane background |
|
|
B2 - numerics/Search background |
|
|
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. |
|
|
C2 - Active state of all the tabs. Represented by the <SelectedColors> tag. |
|
|
C3 - HoverText popup. Represented by the <HoverText> tag, which affects the background, foreground and border colors of hovertext popups. |
|
|
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. |
|
|
C5 - Link Color for navigation pane links. Represented by the <AnchorColors> tag. |
|
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
|
1) |
After locating the images, open the ones you want to modify in an image editing program such as Photoshop or Microsoft Paint. |
|
|
The images are .gif, so do not change the image format to .jpg or another image format. 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: |
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)
<DefaultColors foreground="#666666" /> <!-- C1 -->
<SelectedColors foreground="#FFFFFF" /> <!-- C2 -->
Area C3 (described in the image and table above)
<Font style="font-family: Verdana, Arial, Helvetica,
sans-serif ; font-size: 8pt" />
<Colors foreground="#000000" background="#FFFFCC"
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.
<Font style="font-family: Verdana, Arial, Helvetica, sans-serif ; font-size: 8pt" />
<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 Favorites tabs) individually. |
|
7) |
Save wwhelp_settings.xml. |
|
8) |
Regenerate the project (Project > Regenerate All). |
