Creating a Search Bar

A Search Bar proxy lets you create a field that can be used to perform searches in HTML5 output. When you build the output, the proxy is replaced with the generated search bar. If you insert a search bar using a 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 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.

If the animation below is cut off, you can see the complete animation by clicking the link under it to open the full topic.

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.

Editing a Search Bar Proxy

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

What's Next?

If you inserted the proxy into a template page, make sure the template page is associated with your target. See Associating Template Pages With Targets.