Including Search Bars

Enabling Search in Skins

The first step in making search accessible in your online documentation is to include a search bar.

HTML5 output is designed to show a search bar at the top of all topics via the skin. You just need to make sure this option is enabled, which is the default setting. Therefore, you might not need to do anything.

However, you might want to insert a search bar elsewhere (e.g., in the middle of your Home page). In this case, you would need to use a Search Bar proxy. You might also need to hide the search bar from some topics so that you do not have two search bars on a page.

How to Enable the Search Bar in an HTML5 Skin

  1. From the Project Organizer, open the HTML5 skin.
  2. Select the Styles tab.
  3. In the Header section, expand Search Bar.
  4. Expand Layout.
  5. In the Display field, make sure block is selected.
  6. Click Save the active file. to save your work.

How to Insert a Custom Search Bar

  1. Open a template page or topic, depending on whether you want the search bar to be show on many pages or only one page.
  2. Place your cursor where you want the search bar to be shown in the output.
  3. Select Insert > Proxy > Insert Search Bar Proxy. The Search Bar Proxy dialog opens.

  4. If you have added a Search Bar skin component to your project and want to use it to control the look of the search bar, you can select it from the Skin File field. See Editing Skin Settings and HTML5 Skin Styles.

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

    Note The Search Bar proxy and skin component are not supported in HTML5 Tripane output.

  5. Click OK. The proxy is added.
  6. Click Save the active file. to save your work.

How to Hide the Search Bar From All Topics

  1. From the Project Organizer, open the HTML5 skin.
  2. Select the Styles tab.
  3. In the Header section, expand Search Bar.
  4. Expand Layout.
  5. In the Display field, select none.
  6. Click Save the active file. to save your work.

How to Hide the Search Bar From a Single Topic

  1. Assuming you are already using a primary stylesheet for all topics (see Associating Primary Stylesheets With All Files), make sure the option to Allow local stylesheets is selected.
  2. Create a new stylesheet to be used for the topic where you want to hide the search bar.

  3. Open the new stylesheet in the Internal Text Editor (i.e., in the Content Explorer, right-click it and select Open with > Internal Text Editor). Then, copy and paste the following into it.

    Copy 
    .nav-search
    {
        display: none;
    }
  4. Click Save the active file. to save your work.
  5. Associate the topic with the new stylesheet. See Associating Stylesheets Locally With Specific Files.

How to Enable Search in a Skin for Other Output Types

HTML Help, WebHelp, and WebHelp Plus are not as commonly used as HTML5. However, if you are using one of these outputs, you can enable search as follows.

  1. From the Project Organizer, open the Standard skin.
  2. Select the General tab.
  3. In the Features list, click the Search check box.
  4. (Optional) If you are creating Microsoft HTML Help, you can include advanced search options. To enable or disable these options, open the skin. In the Skin Editor, click the HTML Help Setup tab, then place a check in the Show Advanced
  5. Search box.
  6. Click Save the active file. to save your work.

What's Next?

After you have finished enabling the search feature in a skin, you need to make sure the skin is associated with a target. See Associating Skins With Targets.

Also, if you are generating HTML5 output, you can set up your search engine—MadCap Search, Google Search, or Elasticsearch (for Top Navigation, Side Navigation, or skinless outputs). See Setting Up a Search Engine.