You are here: Features > Skins (Windows) > More About Skins > Specifying Custom Toolbar Settings for HTML Help Output

Specifying Custom Toolbar Settings for HTML Help Output

If you incorporate MadCap Feedback into your Flare project and generate HTML Help output, a Web toolbar is automatically added to the top of each topic in the CHM file. However, this toolbar is not only for MadCap Feedback. Even if you are not using MadCap Feedback in your project, you can add the Web toolbar to your HTML Help output. See Adding a Web Toolbar to HTML Help Output.

In addition to submitting topic ratings and comments, the default buttons in the Web toolbar let users expand or collapse Dynamic HTML effects (e.g., drop-down text, expanding text), search, go to the next or previous topic, and more. You can change the buttons included in the Web toolbar, removing ones you do not want and adding others.

How to specify custom toolbar settings for HTML Help output

After adding the Web toolbar for HTML Help output, complete the following steps.

  1. Open the skin.
  2. Select the WebHelp Toolbar tab.
  3. Select the Topic Toolbar tab.
  4. Select the appropriate options to include specific features (buttons) in the toolbar. Items that will be included in the toolbar are displayed in the "Selected" section on the right. Items that will not be included in the toolbar are displayed in the "Available" section on the left. You can use the right arrow button to move items from the "Available" section to the "Selected" section.

    The number of options available depends on whether you are working in a Standard skin or a WebHelp Mobile Skin. The WebHelp Mobile skin only includes the following options: PreviousTopic, CurrentTopicIndex, NextTopic, CollapseAll, ExpandAll, Separator.

    Below are descriptions of the various items.

  5. (Optional) You can use the buttons at the bottom of the tab to perform additional tasks:

    Opens the New Toolbar Button dialog, which lets you add a custom button to the toolbar. After creating the custom button, select it and click to move it to the "Selected" section.

    Unless you specify otherwise, in the output the new button will display the text for the name you gave it. However, you can change this by editing the control type for the new button. To do this, you can select the Styles tab in the Skin Editor, expand the Type property group, and from the ControlType field select Button. To choose an image for the button, expand the General property group on the Styles tab and select image files in the Icon fields.

    If you want to provide a command for the custom button (e.g., so that clicking the button opens a website), you can select the Styles tab in the Skin Editor, expand the Type property group, and enter a command in the OnClick field. For example, the following command opens the MadCap Software website when a user clicks the button:

    window.open("http://www.madcapsoftware.com");

    Alternatively, you can use the JavaScript area to enter a command for the button. See the next step.

    Removes the selected custom button from the "Available" section.

    Moves the selected item up in the order in the "Selected" section. In the output, buttons are displayed left to right according to the order in which they appear on this tab, with the item at the top being the first button shown on the left in the output.

    Moves the selected item down in the order in the "Selected" section.

    Removes the selected item(s) from the "Selected" section.

    Adds a separator to the "Selected" section. A separator is the divider between the toolbar buttons and the navigation pane.

    Resets the toolbar to the default settings.

  6. (Optional) If you want to include custom JavaScript in the toolbar, click Edit in the area to the right. This opens the Toolbar JavaScript dialog, which you can use to enter or load custom JavaScript for the toolbar.

    For example, the following command opens the MadCap Software website when a user clicks the button:

    function MyFunction()

    {

    window.open("http://www.madcapsoftware.com");

    }

  7. Press CTRL+S or click to save your work.

Note: You can also specify which buttons should be included in the navigation toolbar at the top of the CHM window. See Specifying Buttons for HTML Help Output.

Note: You can also add a Web toolbar that is displayed within topic content. This can be done with the help of a topic toolbar proxy. See Specifying Custom Settings for Topic Toolbars and Inserting Topic Toolbar Proxies.

WHAT'S NEXT?

Make sure that you associate the skin with the target.

See Also

Downloads (PDF Format):

Flare Quick Guide

Flare Getting Started Guide

Flare What's New Guide

Flare Key Features Guide

Flare Transition From RoboHelp Guide

Flare Transition From FrameMaker Guide

Flare Styles Guide

Flare Printed Output Guide

Flare WebHelp Plus Guide

Flare Shortcuts