Moving the search box in Flare HTML5 Tripane output

One of the things that isn’t available to change in the Flare skin is the location of the search box in HTML5 output. Try as I might, I couldn’t find a way to move that box without doing some post-processing editing of the stylesheet for the skin (which is a different stylesheet from the one you use to style your content).

A few days ago, I found an answer for this on the MadCap forums. Using this method will allow you to move your search box without doing any post-processing on the css file. I’m putting it here for future reference for me and for my clients.

First, add custom jQuery to the skin file.

  1. Open you HTML5 skin in Flare.
  2. Click the Toolbar tab.
  3. In the Custom JavaScript to include in Toolbar page box, enter the following jQuery script:
    $('head').append('<link rel="stylesheet" href="Content/Resources/Stylesheets/skin.css" type="text/css" />');

    When you run an HTML5 build, this script will tell Flare to look for the skin.css file in the Content/Resources/Stylesheets folder. You can name the css file anything you want and can put it anywhere in the content explorer, but you’ll need to update the script accordingly.

Next, create the stylesheet and add the appropriate selector.

  1. In the Content Explorer, right-click the Stylesheets folder, and then select New > Stylesheet. If you pointed your script to a different folder than the one in Step 3 above, then perform this step on whatever folder you specified. The Add File window opens.
  2. In the File Name box, enter skin. If you specified a different filename in step 3 above, use that filename instead. Click OK. The new stylesheet is added to the project.
  3. Open the new stylesheet in the internal text editor by right-clicking on it and selecting Open with > Internal Text Editor.
  4. Delete all of the contents in the file.
  5. Add the following:
    .search-bar
    {
     margin-top: 10px;
     margin-right: 10px;
    }

    Adjust the pixel dimensions as necessary to position the search box where you want it.

 

One thought on “Moving the search box in Flare HTML5 Tripane output

  1. Thanks for this quick fix.
    However, I cannot get it to work.
    I have IE 8 installed.
    Can it be that it doesn’t work with my version of jquery?
    How can I tell?
    thanks again for sharing this valuable tip

Leave a Reply

Your email address will not be published. Required fields are marked *