Create custom skins for WebHelp and WebHelp Pro projects

The custom skin is saved as an SKN file to [Project folder]\!SkinSubFolder!\[skin name].

If you create a custom skin from a gallery skin, the gallery skin remains unchanged.

1)In the Output Setup pod, right-click the Skins folder. Select New Skin.

2)Do one of the following:

Select Create Custom WebHelp Skin. Click OK.

Select Create Skin From Gallery. Click OK. Select a skin. (Optional) Click Preview to view the selected skin.

3)Click the Toolbar tab. Set options, as needed:

note:    Some options aren’t available, depending on the output type.


Lists items that appear on the main toolbar.

Add custom toolbar item plus.png

On the Action tab, define a link or a script for the button:


Link the button to a URL. Type the path or click the Browse button browsebut.png to browse to it. Linked files are copied to the skins folder (ProjectName\!SkinSubFolder!\YourSkin).

For JavaScript, specify the function calls for these actions:


Specify a function to call when the page containing the button is loaded (MyFunction())


Specify the function to call when the pointer is over the button.


Specify the function to call when the button is clicked.

Under Advanced, add or remove dependent files for the custom toolbar item when using the multi-author feature.


Lists the dependent files already added. Click Add to specify the name of another dependent file.


Browse to the location of a dependent file. Click OK. External files are copied to the project folder automatically.


Remove a dependent file from the Dependencies list. An image in the custom toolbar cannot be removed. Files are removed only from the RoboHelp software, not from the hard disk.

Inline JavaScript

Write function definitions for custom button functions in the project.

External JavaScript File

Browse for and select the file.

Remove custom toolbar item minus.png

Click to delete a selected custom toolbar item.

Contents, Index, Search, Glossary

Select the button to change and click the Edit button EditPencilButton.png to edit the button text or to place an image on the button.

Search Input

Double-click to edit the field that appears in the toolbar and the Search pane. The button options apply to both the toolbar and the Search pane. The Caption and the Text Box Width apply to the toolbar only. The box can be from 10 to 40 characters wide.


Select and click Edit to change which image is displayed in the upper right of the main toolbar. Specify an About Button image, which is copied to the Skins folder. Then specify the following information, as needed for the output format:


Select an image to display at the left of the About box.


Enter the company name, which is displayed below the logo. This text is a hypertext link to a URL specified under URL.


Enter a copyright notice.


Enter a web address for the company website.

Title Image

Specify an image to display at the top of the About box. Keep the image smaller than 211 by 60 pixels.


Identify the system or give more information to users.


Enter the e-mail address of the author.

Navigation Bar

Modify the items directly under the main toolbar plus.png, minus.png.

Previous Topic, Next Topic, Sync TOC, and Hide Navigation Component

Select the item to change and click Edit to change the image for the button.

The Previous and Next buttons let users move back and forward through a series of topics you define in browse sequences. You can change the image shown for the buttons when they are enabled and disabled. Enabled indicates that the user can click the button for more topics. Disabled indicates that no topics exist in that direction.

You can change the image for the Sync TOC button. When you generate, select Synchronize TOC (Manually) to ensure that the button appears on the navigation bar.

note:   The Hide Navigation Component button does not appear in all versions of Netscape Navigator when the output uses a skin.

4)Click the Navigation tab. Click the browse buttons browsebut.png to select images, and specify other settings as needed:

note:    The toolbar is automatically resized to accommodate images. Images are tiled in back­grounds for the content and label region backgrounds.


Select an image for TOC topics.

Remote URL

Select an image for links not in the project.

Background Image

Select an image to use in the background of the content region. The images are tiled.

Hover Color

Select the color that is displayed when the mouse is hovered over the topic.

5)Click OK.

6)To rename the selected skin, right-click, select Rename, and type a name in the Name box.

note:   You cannot rename skins in the gallery.

7)Click Update View to view changes in the dialog box. Click Preview to view the changes in a separate window.

8)Click OK. Type a name and filename for the skin, including the .skn extension.

You can use the skin the next time you generate output.

tip:   To share a skin file (SKN) with others, define all customizable elements of the skin beforehand so that other authors can include or exclude certain elements when they generate output.

September 30, 2016

Legal Notices | Online Privacy Policy