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.

Main

Lists items that appear on the main toolbar.

Add custom toolbar item

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

Link

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

For JavaScript, specify the function calls for these actions:

Onload

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

OnMouseOver

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

OnClick

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.

Dependencies

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

Add

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

Remove

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

Click to delete a selected custom toolbar item.

Contents, Index, Search, Glossary

Select the button to change and click the Edit button 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.

About

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:

Image

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

Company

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.

URL

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.

Author

Identify the system or give more information to users.

E-mail

Enter the e-mail address of the author.

Navigation Bar

Modify the items directly under the main toolbar , .

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 to select images, and specify other settings as needed:

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

Topic/Page

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.