Website Deliverables - webworks.com Previous Next Index Print
Customizing Tabs and Panels in WebWorks Help 5.0

Customizing Tabs and Panels in WebWorks Help 5.0

Last Modified: October 12, 2006

ePublisher Pro

The purpose of this article is to explain how to modify the appearance of the tabs and panels in WebWorks Help 5.0

If you would like to change the font and colors for the tabs and panels in WebWorks Help 5.0, you will need to make changes in the wwhelp_settings.xml file.You will need to make sure you perform a project target override on this file before proceeding with this article. For more information on this procedure, please see “Creating Project Target Overrides”.

This article will walk you through the different settings you can modify to change the appearance of WebWorks Help 5.0 based on the settings in the wwhelp_settings.xml file.

*

By default, the wwhelp_settings.xml file is in the directory C:\Program Files\WebWorks\ePublisher Pro\Formats\WebWorks Help 5.0\Skins\[SKIN NAME] where [SKIN NAME] is the name of the skin name you are using. The default skin name in WebWorks Help 5.0 is Lobby Blue.

Choose an element of the WebWorks Help 5.0 layout to modify:

 

Tabs Color Settings

To change the font color for the Contents, Index, Search and Favorites tab buttons, locate the default code below in the wwhelp_settings.xml file and make modifications to the color values.

Tag

Attribute [value] - Description

DefaultColors

foreground [any valid color value] - Specifies the color of all non-selected tabs.

SelectedColors

foreground [any valid color value] - Specifies the color of tab that is selected by a user.

Default Code:

<Tabs>

<DefaultColors foreground="#666666" />

<SelectedColors foreground="#FFFFFF" />

</Tabs>

Modified Code Example:

<Tabs>

<DefaultColors foreground="lime" />

<SelectedColors foreground="pink" />

</Tabs>

Example Results:

Tabs Font Settings

To change the font type for the Contents, Index, Search and Favorites tab buttons, locate the default code below (beneath the <Implementations> tag) in the wwhelp_settings.xml file and make modifications using valid CSS font information.

Tag

Attribute [value] - Description

Font

style [any valid CSS font information] - Specifies the font type for tabs.

Default Code:

<Tabs>

<!-- <Font> overrides can be specified here -->

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

</Tabs>

Modified Code Example:

<Tabs>

<!-- <Font> overrides can be specified here -->

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

</Tabs>

Example Results:

Panels Default Settings

You can specify the default settings for all the panels or modify them individually. To modify the default settings for all the panels, locate the default code below in the wwhelp_settings.xml file and make the appropriate modifications.

Tag

Attribute [value] - Description

Font

style [any valid CSS font information] - Specifies the default font type for all panels.

Indent

value [value in pixels] - Specifies the left text indent for all panels.

AnchorColors

highlight [any valid color value] - Specifies the background color of the selected link for all panels.

enabled [any valid color value] - Specifies the link color for all panels.

disabled [any valid color value] - Specifies the text color for all panels.

Default Code:

<Implementations>

<JavaScript>

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

<Indent value="17" />

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

Modified Code Example:

<Implementations>

<JavaScript>

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

<Indent value="20" />

<AnchorColors highlight="lime" enabled="red" disabled="orange" />

Example Results:

Contents Panel Settings

To modify the Contents panel settings only, locate the default code below in the wwhelp_settings.xml file and make the appropriate modifications.

Tag

Attribute [value] - Description

Font

style [any valid CSS font information] - Specifies the font type for the Contents panel only.

Indent

value [value in pixels] - Specifies the left text indent for the Contents panel only.

AnchorColors

highlight [any valid color value] - Specifies the background color of the selected link for the Contents panel only.

enabled [any valid color value] - Specifies the link color for the Contents panel only.

disabled [none] - This option is not applicable in the Contents panel since there is no text and only links.

Default Code:

<Contents>

<!-- <Font>, <Indent>, and <AnchorColors> overrides can be specified here -->

</Contents>

Modified Code Example:

<Contents>

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

<Indent value="25" />

<AnchorColors highlight="lime" enabled="red" disabled="orange" />

</Contents>

Example Results:

*

The color orange does not appear in the output results because there are only hyperlinks in the TOC and there is not simple text, so the disabled attribute is not applicable in the Contents panel.

Index Panel Settings

To modify the Index panel settings only, locate the default code below in the wwhelp_settings.xml file and make the appropriate modifications.

Tag

Attribute [value] - Description

Font

style [any valid CSS font information] - Specifies the font type for the Index panel only.

Indent

value [value in pixels] - Specifies the left text indent for the Index panel only.

AnchorColors

highlight [any valid color value] - Specifies the background color of the selected link for the Index panel only.

enabled [any valid color value] - Specifies the link color for the Index panel only.

disabled [any valid color value] - Specifies the text color for the Index panel only.

SectionNavigation

threshold [any integer] - Specifies the number of index entries in the Index before the Index uses separate pages for each navigation link.

separator [character separator] - Specifies the character that separates the Index navigation links.

Font

style [any valid CSS font information] - Specifies the font type for the Section Navigation area of the Index panel.

CurrentColor

value [any valid color value] - Specifies the color of the selected link letter in the Section Navigation area of the Index panel.

AnchorColors

highlight [none] - This option is not applicable in this section of the Index panel since there is the CurrentColor tag.

enabled [any valid color value] - Specifies the navigation link color in the Section Navigation area of the Index panel.

disabled [any valid color value] - Specifies the navigation text color in the Section Navigation area of the Index panel.

Default Code:

<Index>

<!-- <Font>, <Indent>, and <AnchorColors> overrides can be specified here -->

 

<SectionNavigation threshold="500" separator=" - ">

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

<CurrentColor value="black" />

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

</SectionNavigation>

</Index>

Modified Code Example:

<Index>

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

<Indent value="5" />

<AnchorColors highlight="lime" enabled="red" disabled="orange" />

<SectionNavigation threshold="10" separator=" * ">

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

<CurrentColor value="aqua" />

<AnchorColors highlight="pink" enabled="purple" disabled="yellow" />

</SectionNavigation>

</Index>

Example Results:

*

The color pink for the attribute highlight does not appear in the output results. This option is not applicable in this section of the Index panel since there is the CurrentColor tag.

Search Panel Settings

To modify the Search panel settings only, locate the default code below in the wwhelp_settings.xml file and make the appropraite modifications

Tag

Attribute [value] - Description

Search

resultsbybook [true, false] - Specifies whether the search results displays the results by book.

Font

style [any valid CSS font information] - Specifies the font type for the Search panel only.

AnchorColors

highlight [any valid color value] - Specifies the background color of the selected link for the Search panel only.

enabled [any valid color value] - Specifies the link color for the Search panel only.

disabled [none] - This feature is not currently working.

Default Code:

<Search resultsbybook="true">

<!-- <Font> and <AnchorColors> overrides can be specified here -->

</Search>

Modified Code Example:

<Search resultsbybook="false">

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

<AnchorColors highlight="lime" enabled="red" disabled="orange" />

</Search>

Example Results:

Favorites Panel Settings

To modify the Favorites panel settings only, locate the default code below in the wwhelp_settings.xml file and make the appropriate modifications.

Tag

Attribute [value] - Description

Font

style [any valid CSS font information] - Specifies the font type for the Contents panel only.

AnchorColors

highlight [any valid color value] - Specifies the background color of the selected link for the Favorites panel only.

enabled [any valid color value] - Specifies the link color for the Favorites panel only.

disabled [none] - This option is not applicable in the Favorites panel since there is no text and only links.

Default Code:

<Favorites>

<!-- <Font> and <AnchorColors> overrides can be specified here -->

</Favorites>

Modified Code Example:

<Favorites>

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

<AnchorColors highlight="lime" enabled="red" disabled="orange" />

</Favorites>

Example Results:

*

The disabled attribute is not applicable here because there are only hyperlinks and not simple text.

Custom Buttons & Background Colors

If the themes included with ePublisher Pro don’t give you the look you want for your WebWorks Help 5.0 output, you can create a custom theme by modifying the color of the images used to build the format. See “Creating a Custom Theme for WebWorks Help 5.0”.