Example: Customising the HTML5 tripane skin

[Dave Lee]

I've produced a full example project of how to customise the Flare HTML5 tripane skin.

ModCap.png

An example project with documentation is here:
http://ukauthor.esy.es/SkinMods/Default.htm

This might be of use to anyone that needs to make modifications to the HTML5 skin which can't be achieved using Flare's 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.

[Nita Beck]

And the Oscar / Emmy / Tony goes to....(wait for it)... Dave Lee!!!!!!

This is a wonderful contribution to the Flare community. Thank you so much, Dave. (Maybe make this thread sticky?)

[Dave Lee]

Thanks, I've posted a few times here about tweaking the skin, so I thought it was worth making a detailed guide.
(It's now stickified.)

[Msquared]

Thank you! I don't do HTML5 help yet - we're still on WebHelp here because we need to support older browsers for some of our products. But the developers are keen to move on too, so hopefully it won't be too long before I need to read and digest this.

[straygoat]

I've just tried using this to add the text to the right of the logo, but it only added the text to the top left, even with the css style sheets in place. I have got another solution that is working for me:

Code: Select all

$('<link>')
.appendTo($('head'))
.attr({type : 'text/css', rel : 'stylesheet'})
.attr('href', 'Content/Resources/Stylesheets/header.css');




$(document).ready(function(){
  $( "#logo" ).wrap( "" );
$( ".search-bar" ).wrap( "" );


/* To add div between the logo and search box*/
$( "#header").append("");/* this div is compulsory*/
/* to add text*/
$( "#header").append("<div class='pull-left margin20'>&nbsp;</div>");
$( "#header").append("<div class='div-clr pull-left'>div 1</div>");

$( "#header").append("<div class='div-clr pull-left'>div 2</div>");

$( "#header").append("<div class='div-clr pull-left'>div 3</div>");

$( "#header").append("<img src='Skins/default/stylesheets/Images/small.png'   />");


});

The css for this:

Code: Select all


#header{background:#242E83 !important;border-top:10px solid #ffffff !important;border-bottom:10px solid #fff !important;padding:10px !important;height:78px !important;}
.search-filter{ background:#00928F !important; }
.search-submit-wrapper{ background:url('../../../Skins/default/stylesheets/Images/SearchIcon.png') no-repeat scroll center center, none repeat scroll 0 0 #00928f !important; }
#body{ top:79px !important; }
#search-field{background:#fff !important; }
.div-clr{background: #006fb7;color:#fff;margin-right:10px;padding:2px;}
.pull-left{float:left; max-height:45px;min-height:45px;}
.margin20{ margin-left: 20%;}

.marginright5{margin-right:5px;}
.img{height: 55px;
position: relative;
top: -9px;
width: auto;}



This code adds 4 divs to the right of the logo, with the last one containing an image. It also makes the background behind the TOC and Body white, and the background behind the logo and search dark blue. This is just for the desktop version, though it shouldn't take too much tweaking for mobile. Whether it is technically correct etc., I don't know - it is still a work in progress.

[straygoat]

Actually, having tried that with logo images of different sizes, it isn't working right, either.

I'll get it sorted out and post again when I've tested it properly.

[Dave Lee]

I've just tried using this to add the text to the right of the logo, but it only added the text to the top left, even with the css style sheets in place.

Using what?

The site that I've linked to above contains a link to a zipped Flare project; this project was used to generate the site itself, so it definitely works.

If you've added the code in one of your own projects, and the CSS file isn't loading, it's possibly because you've used one of these target settings:
* Exclude content not linked directly or indirectly from the target. Flare doesn't check for links in scripts, so if you want to use this then include a link to the stylesheet that Flare can 'see', e.g. add an @import to your main CSS.
* Do not use "Content" folder in output. If you use this, obviously don't include a Content folder in the path.
* Use lowercase filenames. I add a duplicate link with the path in lower case to get round this.

[straygoat]

Sorry Dave, yes I meant I tried using your code in a project I am working on...maybe I have one of those other settings enabled and didn't realise. I will go check. I was a bit overtired when I tried and posted last night.

I will try again with fresh eyes today.

[straygoat]

Okay, I have it working now...god knows what I was doing yesterday.

I noticed that in your skin, you have a transparent logo image - why is that?

[Dave Lee]

I noticed that in your skin, you have a transparent logo image - why is that?

That's something that Flare does, I'm not sure why. It sets the skin logo image as a background to h1.logo, which contains a transparent image.

[straygoat]

Hi Dave

I've been working on modifying the skin too and have a problem that affects your example too - when the help is resized to a small size, the search bar overlays the other stuff in the header. I asked a developer about this and they said that it is because MadCap use fixed values to define the logo div and the search bar div, and also the TOC and contents don't clear the header div. What I would like is if the search bar wrapped underneath the logo (and anything else) if the browser is resized, with the toc and body moving down as the header height increases.

I'm trying to find a javascript pro to see if there is a way to create a script that changes the skin to use % for each part, then it would be much easier to change the layout. If you have any ideas on this, please let me know...could be that I am barking up the wrong tree!

[dorcutt]

Hi Dave,

First off, so many thanks for posting this amazing guide. It's (mostly) working like a charm for me and it's incredibly helpful.

However, I've run into a bit of a strange issue. I can append my stylesheet and merrily format my header caption as well as successfully overwrite any style specified in the Styles.css stylesheet. However, styles in the Topic.css stylesheet appear to be immune. Either I'm missing something obvious here, or I'm guessing that the Topic.css stylesheet is somehow called after stylesheet appended by the script? Somehow?

My situation is this: I can append the following code directly to the end of the Topic.css stylesheet and successfully overwrite the styles in the HTML5 output (bad policy I know but super convenient when tweaking the output repeatedly), but when I copy and paste the exact same code at the end of my css stylesheet (which is successfully overwriting other styles, except for the ones specified in Topic.csss), the output does not change.

My append stylesheet code is copied and pasted from your example. In case it matters, the code that works when added directly to the end of Topic.css is the following:

Code: Select all

/*Topics.css changes*/

div.MCBreadcrumbsBox_0
{
    background-color: #020033;   
}


.dropDownHotspot.dropDownHotspotFooter:link
{
    font-weight: normal;
}



.dropDownHotspot:hover
{
   color: #E68F11;
}


.dropDownHotspot.dropDownHotspotFooter:hover
{
       font-weight: bold;
   font-family: Arial, sans-serif;
   color: #fff;
}


.dropDownBody
{
   border-bottom: solid 1px #E68F11;
}

.toggler:link {
    color: #1A6690;
}


Is this a bug with Flare, or am I missing something obvious? It might very well be the latter.

[Dave Lee]

Is this a bug with Flare, or am I missing something obvious? It might very well be the latter.

Yeah, I think you're talking about styling content in the topic, and this post is about how to style content in the skin.

The skin (the Default.htm file in the output) is the container for the topic, with the navigation bar, header and toolbar. The skin displays the topic file inside an iframe, which means that the styles used by both files are completely separate - topic stylesheets don't affect the skin, and vice versa.

So if you just want to style something in the topic, use the topic stylesheet.

But this post is about how to style the skin container around the topic ; i.e. the navigation bar, header and toolbar. You can only normally style this using the skin editor, so this post is about how to attach your own stylesheet to the skin, so that you can adjust styles that are not available in the skin editor.

[Nita Beck]

@Dave,

Finally am getting around to using your skin customization technique. I actually could not get it to work as you've documented on your blog. For example, no matter what I did, the Search box (although it did move out of the nav pane in tablet and mobile output) kept ending up behind the toolbar, and the logo persisted in staying centered. However, if I add your skin css code directly to my master stylesheet instead of in a separate skin.css and then point your skin script to look for the styles in the master stylesheet instead of in "skin.css", it all works.

Thanks again for leading the way with this technique.

[Dave Lee]

@Dave,

Finally am getting around to using your skin customization technique. I actually could not get it to work as you've documented on your blog. For example, no matter what I did, the Search box (although it did move out of the nav pane in tablet and mobile output) kept ending up behind the toolbar, and the logo persisted in staying centered. However, if I add your skin css code directly to my master stylesheet instead of in a separate skin.css and then point your skin script to look for the styles in the master stylesheet instead of in "skin.css", it all works.

Thanks again for leading the way with this technique.

If you download and build the example project, that should work fine.

The master stylesheet is linked to the topic, not the skin (Default.htm), so don't add that link to the master stylesheet - there's no point, as it won't apply to the skin.

I think I know what is happening in your project though; if you have set the target to 'Exclude content not linked...', then Flare will exclude the skin.css file from the output as it isn't linked anywhere in the project (the link is dynamically added at runtime). So when you linked the skin.css from your master stylesheet, Flare could now 'see' the skin.css file as a linked file, and didn't exclude it. Anyway, if you disable 'Exclude content...' and remove the link from your master stylesheet, it should work as intended. If you want to use the 'Exclude content...' option, then perhaps just have one topic in the project that links to skin.css.

[Nita Beck]

Thanks, Dave. I will definitely try your suggestion.

After I posted, I ended up backing out my solution because it had unintended effects on the mobile and tablet outputs that I just couldn't figure out. As soon as I reimplemented your solution, those problems were solved but then I couldn't get the search bar to behave.

I definitely want to use "Exclude content...", so I'll try your technique of adding the link to at least one topic. I'll post back how it goes, although that'll be a few days as I'm off that client's project until later this week.

Thanks again!

[MattyQ]

@Dave, thanks so much for these workarounds. They've proved super useful in developing our unique skin for our Flare product. Linking in the new stylesheet is such a simple, yet elegant, solution. It gave me the foundation I needed to add a little extra jquery to help exert more control over the responsive stuff, too.

@Nita, I ran into some similar issues with the search box not initially behaving nicely. I was able to work around it by manipulating the CSS a bit. Not sure if it's helpful, but one of the key factors was the .web class, which turned out to be very important for controlling changes between the two versions of the responsive skin. I control #search-field and .search-bar in different ways depending on the responsive skin, which limited issues. Unfortunately, I'm not able to share the current version, but I'd be happy to work up a demo if it'd be helpful.

[Nita Beck]

@MattyQ Thanks for the offer but I actually haven't returned to that project for a while and other needs are pressing right now. But I'll definitely keep your offer in mind when I get back to it!

[Maria]

Hello to everybody,
I implemented this wonderfull solution to my flare's tripane skin, for change the search box into the header in responsive.
I have 2 questions:
1- It's possible to change de icon input search for a button o link to perform the search when you press?

HomeResponsive.png

2. It's possible to change de filters search in responsive to search box in header (how in top navigation skin with this icon)[img]

filtersearch.png

[/img] ?

[img]

searchfilterresponsive.png

[/img]

Thank you very much. And sorry for my English!!

[jimgilliam]

Hi Dave,
When I try to put HTML code in between the <div> tags in the jQuery script for the toolbar, the word HELLO does not show beside the logo:
$("#header>a").after('<div id="header-title"><b>HELLO</b></div>');
$("#header-title").text(document.title);

[jimgilliam]

Hi Dave,
I've been experimenting with your Flare project file. When I put content between the <div> tags in the jQuery toolbar script:
$("#header>a").after('<div id="header-title"><b>HELLO</b></div>');
$("#header-title").text(document.title);

Nothing shows beside the logo after I build/view the project. When I put text within the Caption field, the word shows beside the logo.

How do I put HTML (it's a simple unordered list) in the script so that it shows beside the logo in the output? Do I change the ".text(document.title)" to ".html(document.title)"?

Thanks,

Jim

[jimgilliam]

How do I put HTML (it's a simple unordered list) in the script so that it shows beside the logo in the output? Do I change the ".text(document.title)" to ".html(document.title)"?

Here is the solution I've come up with, and it seems to work!

Code: Select all

$(document).ready(function(){
   /* (1) This adds a title (div#header-title) to the header area after the logo (#header>a) for the normal desktop layout */
      
   $("#header>a").after('<div id="abcnavdiv1"></div>');
   $( "#abcnavdiv1" ).html( '<div class="abcnavdiv"><ul class="abcnav"><li><a href="index.html">Home</a></li><li><a href="crm_help.html">CRM</a></li><li><a href="crs_help.html">CRS</a></li><li class=""><a href="#" class="">DataTrak</a><ul class=""><li><a href="dt_help.html">Help</a></li><li><a href="dt_releases.html">Release Notes</a></li></ul></li><li><a href="ep_help.html">Employee Portal</a></li><li><a href="mfee_releases.html">MFEE</a></li><li class=""><a href="#">MYiCLUBonline</a><ul class=""><li><a href="mico_help.html">Help</a></li><li><a href="mico_releases.html">Release Notes</a></li></ul></li><li><a href="obc_help.php">OBC</a></li><li><a href="web_services.html">Web Services</a></li></ul></div>' );

[Dave Lee]

Hi Jim,
In that script, the first line is adding a tag to the header, the second line is setting the content of that tag to match the document title - i.e. the title you set in the skin.
So you don't need the second line.

Code: Select all

$("#header>a").after('<div id="header-title"><b>HELLO</b></div>');
$("#header-title").text(document.title);

How the script works is already described in the example, see the 'what does this code do?' parts:
http://ukauthor.esy.es/SkinMods/Default.htm#Add-Header.htm%3FTocPath%3DCustomising%2520the%2520HTML5%2520skin|Examples|_____1

[rogersm]

Hi Dave,

Thanks very much for this post, really good. I just have a minor question. I wanted to add an external link to the logo and I found another post of yours on how to do this with some jQuery script. So I opened the skin Toolbar tab, and clicked Edit and added the following additional code:

$(document).ready(function(){
$("div#header>a").attr("href", "http://www.google.com/");
});


So now when I click on the logo, the external page opens (google in this case). However, when I resize the page to a smaller size, the google link no longer works and the logo link points to Default. Is there a way to fix this so that the external link always displays irrespective of screen size?

thanks again,
mark

[Dave Lee]

That's because in tripane there is a separate header and logo for responsive mode.

So in addition to div#header there is also div#responsiveHeader; so you also need to add:

Code: Select all

$("div#responsiveHeader>a").attr("href", "http://www.google.com/");