Dave Lee – A flair for Flare

My blog about MadCap Flare and web design

Customising the Flare HTML5 Tripane skin



I’ve produced a full example project of how to customise the Flare HTML5 ‘Tripane’ skin.

Note: This post was originally written for the HTML5 skin in v10, which is now called the ‘Tripane’ skin in v11.

An example project with documentation is here:

This might be of use to anyone that needs to make modifications to the HTML5 skin which can’t be achieved using Flares’ skin editor.

The documentation shows how to:

  • Add content to the header area of the skin.
  • Add your own stylesheet to the skin, to style your own content, or change styles unavailable in the editor.
  • Move elements of the skin, such as the search box.

All details are on the linked site above, it should answer most questions.


15 thoughts on “Customising the Flare HTML5 Tripane skin

  1. Hey, this is great but I’m wondering how I can get it to work when using a global project. I can’t seem to find the correct link to place in the javascript command. I’ve tried several iterations and none of them find the new CSS file. If I place the file directly into the linked project it finds it, but I would like to have it on the global project so I won’ t need redundant copies of my files.

  2. If you’re using a project import (global project linking) in Flare, then you would import the skin file (flskn) and the skin CSS file from the ‘global’ project, into your current project. The script in the example has a relative link to the CSS file, so that CSS file must be part of the project.

  3. Thank you so much, Dave! However, the title I added does not persist in the Tablet and Mobile views. Any ideas? 🙂

    • Hi Connie, you need to add the title in two places, as described in the instructions – in the #header area and in the #responsiveHeader area (which adds the title in the responsive layout).

      You can see it working on the site itself, and you can download the project.


      • Hi Dave,

        We got it all sorted and then decided to go w/ the Top Nav skin in v11. Have you had a chance to determine if it’s possible to add a title? For now, we’ve resorted to graduated image files…


  4. Hi Connie,
    It’s certainly possible, but it’s not something I’ve looked at much. I’ve had a brief look at the top navigation skin but it doesn’t really do what I want, so I’m looking more at using the new skin components (proxies) to build my own navigation system.

    Anyway, the basic principle would be the same, but the differences with using the v11 top navigation are:

    1. The script needs to be added to the master page(s), instead of the skin.

    2. The elements (tags and class names) used by the new skin are different, so the script will need to be changed to work with the new skin; e.g.:

    $("nav.tab-bar a.logo").after('<div id="header-title">Your title</div>');

    Alternatively, you could add the text to the logo using:

    $(“nav.tab-bar a.logo”).text(‘Your title’);

    You’d have to work out your own CSS though, i.e. how you style #header-title {} to get it looking right.

    Hope that helps.

  5. Hi Dave,

    thanks for your effort. New to flare, I am tinkering with the HTML5 Tripane Skin right now. I am also hampered by a few limitations of the skin editor and would love to see the solutions you have come up with.

    Since the link to http://ukauthor.esy.es/SkinMods/Default.htm does not work anymore, I was wondering if you could provide a working link to your example.

    Many thanks in advance.

    Best regards,

  6. Your customization script was referenced in the Madcap Forums (https://forums.madcapsoftware.com/viewtopic.php?f=9&t=22036) with regards to adding search tips to the Search Results page. I’m creating Tripane Help with Flare 11 and was wondering if you could expand on how this is done exactly? I’ve been through your sample project and documentation but still don’t get how this is done (it’s all new to me). Thanks so much.

    • Hi Lyn,
      Having a quick look at the output, the search results are inside a container tag div#searchPane.
      (If you press F12 in your browser, you can ‘inspect’ the HTML.)

      So, say you wanted to insert some content at the top of that container (before the heading), you could use something like this as your skin toolbar script:

      $('div#searchPane').prepend('<p>Your content here.</p>');

      Hopefully that’ll get you in the right direction.


  7. Hi Dave,
    I downloaded your SkinMods project and it works great in Flare 11, but in Flare 12 the Print, Expand all, Remove Highlights, Previous and Next toolbar buttons are not added to the toolbar (but the “Customized skin” text is displayed). I’m looking at a diff of the Flare 11 default.htm and Flare 12 default.htm now trying to see if I can figure out how to make this work in Flare 12. Just wondering if you have a version that works on Flare 12?

    Thanks for all the tips and tricks.

    • Hi there, I’m not actively using v12 yet, so I haven’t tested this project.
      Usually if the toolbar doesn’t appear then it means there’s an error in the toolbar script.

  8. Hi,
    Finally figured out what was causing the issue with the toolbar buttons not displaying in Flare 12, and it had nothing to do with your custom scripts. In your project, in the Skin, I deleted the toolbar buttons CurrentTopicIndex, EditUserProfile, SelectLanguage, and TopicRatings so only the Print, ExpandAll, RemoveHighlight, PreviousTopic, and NextTopic were in the Selected pane. I rebuilt and the toolbar buttons displayed fine. I don’t know if it was the number of toolbar buttons, or if one of the buttons that I deleted was causing the issue.

    What I wanted to do was add an external link to the logo. I found your post on the user forum (https://forums.madcapsoftware.com/viewtopic.php?f=9&t=15217 ) and that worked like a champ.


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s