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 onwards.
An example project with documentation can be downloaded here:
Example “Skin Mods” project (on my Google Drive)
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 in the linked project above, it should answer most questions.
A flair for Flare 
November 17, 2014 at 10:42 pm
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.
Thanks!
November 18, 2014 at 10:28 am
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.
January 15, 2015 at 11:11 pm
Thank you so much, Dave! However, the title I added does not persist in the Tablet and Mobile views. Any ideas? 🙂
January 16, 2015 at 8:14 am
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.
Thanks.
April 1, 2015 at 5:56 pm
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…
Thanks!
Connie
April 2, 2015 at 7:29 am
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.:
$(document).ready(function(){$("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.
April 2, 2015 at 5:09 pm
Yes, thanks so much for pointing us in the right direction! 🙂
April 30, 2015 at 12:08 pm
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,
Mike
April 30, 2015 at 7:21 pm
Hi Mike,
I’ve just tried the link and it works fine for me – so I’ not sure what the problem is there.
Thanks,
Dave
August 6, 2015 at 8:23 pm
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.
August 7, 2015 at 1:18 pm
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:
$(document).ready(function(){$('div#searchPane').prepend('<p>Your content here.</p>');
});
Hopefully that’ll get you in the right direction.
Cheers.
August 7, 2015 at 7:14 pm
Worked beautifully. Thanks again for your help.
June 17, 2016 at 6:26 pm
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.
Nancy
June 20, 2016 at 1:34 pm
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.
Thanks.
June 21, 2016 at 5:10 am
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.
Thanks,
Nancy
October 7, 2016 at 8:05 am
Hey Dave,
Thanks for this article. I’m wondering if it’s still impossible to create a fully self-made skin in late 2016? We’re working with customers which have their own style guides, also for documentations. Therefore we need to develop our own template.
Btw: It’s recommended to use `$(function(){ … }));` instead of `$(document).ready(function()`. It’s deprecated as of jQuery 3.0.
October 24, 2017 at 5:39 pm
I have used this to have the In This Section in my help. I have since updated to the latest version of Flare and now nothing appears under the In This Section. Any clues?
August 23, 2018 at 12:51 pm
Hi Dave, thanks for this post. I am trying to modify the width of the Tablet left menu skin. Could you do this using this method. I have tried adding the following to the stylesheet, but is does not seem to work.
@media only screen and (max-width: 1279px)
{
hide-extras.active #navigation[role=”complementary”]
{
width:30% !important;
}
active #contentBody[role=”main”]
{
margin-right:-30% !important;
}
}