Creating a Topic Toolbar

The generation of topic toolbars is based on the following elements:

• Topic Toolbar Proxy The Topic Toolbar proxy is used to tell Flare where you want the topic toolbar to be displayed in the output. If you want the toolbar to be shown at the top of only a few topics, you can insert the proxy at the top of each of those topics. If you want the toolbar to be shown at the bottom of all topics in your output, you can insert the proxy into a master page to be used for that target. You can even insert the proxy in the middle of text in a topic if you want certain toolbar buttons to be displayed there. When inserting a topic toolbar, you can select a skin if you are generating HTML5 output. You can also select an optional style class if you want to use it to control the look of the toolbar. Finally, you can choose which buttons to include in the toolbar. However, buttons can also be selected in your skin. If you are generating HTML5 output, keep in mind that the selection of the skin in the Topic Toolbar Proxy dialog overrides both the style class and button settings in the lower portion of the dialog.

• Skin The way the skin works with topic toolbars is a bit different for HTML5 than it is for outputs that are using Standard and Mobile skins.

  • HTML5 Skins Although topic toolbars can be inserted into most online outputs, only HTML5 uses a Topic Toolbar skin component as part of the process. With HTML5, the settings in the Topic Toolbar skin component have precedence over any settings in the Topic Toolbar Proxy dialog, including the selection of which buttons to be included in the toolbar. See Topic Toolbars in HTML5 Skin Components.

  • Standard and Mobile Skins For Standard and Mobile skins, there is a tab in the Skin Editor called "Topic Toolbar." The fields in that tab mirror those in the WebHelp Toolbar tab (for Standard skins). As an alternative to specifying buttons in the Topic Toolbar proxy, you can specify them here in the skin. However, with Standard and Mobile skins, the settings in the proxy take precedence over those in the skin. See Topic Toolbars in WebHelp Outputs and Topic Toolbar for WebHelp Mobile Output.

    You can control the look of the items in the topic toolbar, and the background of the topic toolbar, by opening the Styles tab of the Skin Editor and modifying the appropriate styles. By default, the background is transparent so it will show whatever is behind it in the body of the topic. When you change any of these styles, they affect settings for items in both regular web toolbars and in topic toolbars. See Standard Skin Styles and WebHelp Mobile Skin Styles.

• Style Class Regardless of the type of output, you also have the option of using the Madcap|topicToolbarProxy style to change the look of the toolbar. See Using Styles to Determine the Look of Topic Toolbars.

notes

Note: Although you can insert Topic Toolbar proxies in most of the online outputs, choosing the buttons for the toolbar can be done in the skin for only some outputs. For Microsoft HTML Help and DotNet Help outputs, you can select buttons in the Topic Toolbar proxy only.

Note: If you are generating an Eclipse Help target that uses a Topic Toolbar proxy, Flare will automatically remove the proxy when building the output. This is because the Eclipse development platform provides its own toolbar support. See the Platform Plug-in Developer Guide from Eclipse at: http://help.eclipse.org/kepler/index.jsp

Following are steps for inserting a Topic Toolbar proxy. Again, for most of the supported outputs, you can select the buttons either in these steps or in the skin.

1. Do one of the following:

   • Open a topic where you want the toolbar to appear. This is a good method if you only want the toolbar to be shown in one topic, or just a few topics.

     OR

   • Open a master page that you will use when generating the target. This is the best method if you want the toolbar to be shown on all topics in the output.
2. Place your cursor where you want the toolbar to be shown in the output (e.g., bottom or top of the topic or master page). If you are working in a master page, you may need to press the down arrow on your keyboard and then press Enter at the correct location.
3. Select Insert>Proxy>Insert Topic Toolbar Proxy. The Topic Toolbar Proxy dialog opens.

4. (Optional) If you are working with HTML5 output, you can select a skin component in the Skin File field. From the Skin Editor, you can select the buttons to be included in the toolbar (see Editing Skin Settings and HTML5 Skin Styles). Alternatively, you can select buttons from the Buttons field below.

   If you do not select a skin component in this field, Flare uses the first one it finds in your project (if one exists). Otherwise, Flare provides a default design.

5. (Optional) In the Stylesheet class for proxy field, you can select a class to affect the look of the entire toolbar.

   You might create and use a proxy style class, for example, if you want to add a border around the toolbar. If you do not select a class from this field, the generated toolbar will use the style settings from the parent MadCap|topicToolbarProxy style. You have the option of creating a class for this proxy style in the Stylesheet Editor. To do this, select the MadCap|topicToolbarProxy style and click Add Class to create a class. The class will then be available from this field.

6. (Optional) You can select buttons for the toolbar here, rather than doing so in the skin.

   1. Click Select buttons.

   2. From the Available section, select the buttons you want to include (select multiple buttons by pressing the SHIFT or CTRL key and clicking a range or individual buttons, respectively). Then click to move the button(s) to the Selected section.

      add topic to favorites

      Lets users add the active topic to the Favorites pane so that they can quickly access the topic in the future.

      

      back

      Lets users open the topic that was viewed previously.

      

      collapse all

      Lets users collapse all elements such as togglers, drop-down effects, and expanding text effects in a topic (if they are expanded).

      

      current topic index

      Lets users see the display for the current topic in the sequence. This is typically used in conjunction with the "Next Topic" and "Previous Topic" buttons when the topic in question exists in a browse sequence. Flare finds the current topic in a browse sequence and display its position in relation to the rest of the topics in that sequence. (The root node is used to determine the count; in other words, if there are "child" topics in the sequence structure under the current topic, they will be included in the count.)

      

      expand all

      Lets users expand all elements such as togglers, drop-down effects, and expanding text effects in a topic (if they are not yet expanded).

      

      forward

      Lets users open the next topic in a previously viewed sequence.

      

      home

      Lets users open a designated home page (such as your company's website).

      

      next topic

      Lets users open the next topic in the sequence. First, Flare attempts to find the current topic in a browse sequence and navigate to the next topic from there. If you do not have a browse sequence, Flare looks at the position of the current topic in your table of contents (TOC) and opens the next topic after it.

      

      previous topic

      Lets users open the previous topic in the sequence. First, Flare attempts to find the current topic in a browse sequence and navigate to the previous topic from there. If you do not have a browse sequence, Flare looks at the position of the current topic in your table of contents (TOC) and opens the previous topic before it.

      

      print

      Lets users open the Print dialog so that they can send the open topic to the printer.

      

      quick search

      Lets users initiate a search in the active topic for the word or phrase that has been typed in the field next to the button.

      

      refresh

      Lets users update the content of the topic being viewed.

      

      remove highlight

      After a user performs a quick search in a topic, the search text found in the topic is highlighted. This button lets users turn the highlights off.

      

      select browse sequence

      Lets users open the Browse Sequence feature.

      

      select Community

      Lets users access their Pulse community featuers, if the are using MadCap Pulse (see About MadCap Pulse).

      

      select favorites

      Lets users open the Favorites feature.

      

      select glossary

      Lets users open the Glossary feature.

      

      select index

      Lets users open the Index feature.

      

      select Language

      Lets users switch between languages using a drop-down menu, if you have built multilingual output.

      Example

      Example

      Let’s say you want your users to be able to switch between US English, Spanish, and Japanese Help in your HTML5 output.

      Before you can build your output, you need to make sure that each of your linked multilingual projects has the SelectLanguage button is available in its HTML5 toolbar. If it the button isn't there, users won't be able to switch from one language to another in your output.

      Open the Project Organizer. In the Skins folder, open the Topic Toolbar skin component. On the Setup tab, select the SelectLanguage button, click to add it to your skin, and then save your work.

      

      Now you can prepare and build your multilingual output. See How to Select Languages for a Specific Target.

      When you open the HTML5 output, it defaults to the US English Help because that is your browser’s default setting.

      However, because you added the SelectLanguage button to your Topic Toolbar skin component, you can easily change the language setting using a drop-down menu.

      

      

      select search

      Lets users open the Search feature.

      

      select Skin

      Lets users choose from multiple skins to change the display of the output.

      Example

      Example

      Let's say your main Top Navigation skin has a black header background, but you want users to be able to select a skin with a green header background and a different logo, or even a third skin that does not have a header at all. Therefore, you create the additional skins and edit them to look the way you want. Then you add the Skins button in your Topic Toolbar skin component.

      In the output, a user can click the button in the topic toolbar and choose one of the options, which are based on the skin file name.

      

      If the user selects Green, the output might look something like this:

      

      And if the user selects NoHeader, the output might look something like this:

      

      The name of the skin is reflected at the end of the URL in the browser.

      

      select toc

      Lets users open the TOC feature.

      

      separator

      This is the divider on the side of the row of buttons.

      

      stop

      Lets users prevent a page from downloading file information.

      

      toggle navigation pane

      Lets users toggle between hiding and showing the navigation pane in the output window.

      

   3. Click OK when you are finished.

7. Click OK. The proxy is added.

8. Click to save your work.

After inserting a Topic Toolbar proxy, you can edit it. To do this, open the topic or master page where the proxy is inserted, right-click on it, and select Edit Topic Toolbar Proxy.

Although topic toolbars can be added in most online outputs, only certain buttons are supported in the various outputs. The following table provides an overview.

The following table does not list Pulse-related toolbar buttons, such as Edit User Profile and Topic Ratings. These kinds of buttons must be added either via the web toolbar (for HTML5 Tripane, WebHelp, or WebHelp Plus outputs) or the Topic Toolbar skin component (for all HTML5 outputs).