Example: Customising the HTML5 tripane skin

This forum is for all Flare related Tips and Tricks.
Have a tip or trick you use while working in Flare? Share it here.

Example: Customising the HTML5 tripane skin

Postby Dave Lee on Fri Aug 08, 2014 9:00 am

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.
You do not have the required permissions to view the files attached to this post.
Dave Lee
Master Propellus Maximus
 
Posts: 5650
Joined: Mon Mar 05, 2007 8:33 am
Location: UK

Re: Example: Customising the HTML5 skin

Postby Nita Beck on Fri Aug 08, 2014 11:27 am

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

This is a wonderful contribution to the Flare community. Thank you so much, Dave. (Maybe make this thread sticky?)
Nita
Image
Content Strategist / Information Architect / Flare Consultant: http://beck-communications.com
Manager, Rochester Flare User Group: http://www.facebook.com/RochesterFlareUserGroup
Nita Beck
Senior Propellus Maximus
 
Posts: 3288
Joined: Thu Feb 02, 2006 9:57 am
Location: Pittsford, NY

Re: Example: Customising the HTML5 skin

Postby Dave Lee on Fri Aug 08, 2014 3:37 pm

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.)
Dave Lee
Master Propellus Maximus
 
Posts: 5650
Joined: Mon Mar 05, 2007 8:33 am
Location: UK

Re: Example: Customising the HTML5 skin

Postby Msquared on Sat Aug 09, 2014 3:03 am

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.
Marjorie

My goal in life is to be as good a person as my dogs already think I am.
Msquared
Propellus Maximus
 
Posts: 848
Joined: Mon Aug 06, 2012 10:19 am
Location: Southampton, UK

Re: Example: Customising the HTML5 skin

Postby straygoat on Wed Aug 13, 2014 11:50 am

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.
Craig Wright
Freelance Technical Author and SEO Copywriter
Midlands, UK
http://www.straygoat-technicalauthor.co.uk
straygoat
Sr. Propeller Head
 
Posts: 153
Joined: Wed Apr 04, 2012 3:39 am
Location: The Midlands, UK.

Re: Example: Customising the HTML5 skin

Postby straygoat on Wed Aug 13, 2014 12:24 pm

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.
Craig Wright
Freelance Technical Author and SEO Copywriter
Midlands, UK
http://www.straygoat-technicalauthor.co.uk
straygoat
Sr. Propeller Head
 
Posts: 153
Joined: Wed Apr 04, 2012 3:39 am
Location: The Midlands, UK.

Re: Example: Customising the HTML5 skin

Postby Dave Lee on Wed Aug 13, 2014 11:33 pm

straygoat wrote: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.
Dave Lee
Master Propellus Maximus
 
Posts: 5650
Joined: Mon Mar 05, 2007 8:33 am
Location: UK

Re: Example: Customising the HTML5 skin

Postby straygoat on Thu Aug 14, 2014 2:40 am

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.
Craig Wright
Freelance Technical Author and SEO Copywriter
Midlands, UK
http://www.straygoat-technicalauthor.co.uk
straygoat
Sr. Propeller Head
 
Posts: 153
Joined: Wed Apr 04, 2012 3:39 am
Location: The Midlands, UK.

Re: Example: Customising the HTML5 skin

Postby straygoat on Thu Aug 14, 2014 6:34 am

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?
Craig Wright
Freelance Technical Author and SEO Copywriter
Midlands, UK
http://www.straygoat-technicalauthor.co.uk
straygoat
Sr. Propeller Head
 
Posts: 153
Joined: Wed Apr 04, 2012 3:39 am
Location: The Midlands, UK.

Re: Example: Customising the HTML5 skin

Postby Dave Lee on Sat Aug 16, 2014 12:00 am

straygoat wrote: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.
Dave Lee
Master Propellus Maximus
 
Posts: 5650
Joined: Mon Mar 05, 2007 8:33 am
Location: UK

Re: Example: Customising the HTML5 skin

Postby straygoat on Fri Aug 29, 2014 1:56 am

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!
Craig Wright
Freelance Technical Author and SEO Copywriter
Midlands, UK
http://www.straygoat-technicalauthor.co.uk
straygoat
Sr. Propeller Head
 
Posts: 153
Joined: Wed Apr 04, 2012 3:39 am
Location: The Midlands, UK.

Re: Example: Customising the HTML5 skin

Postby dorcutt on Fri Nov 14, 2014 3:18 pm

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.
-Dan, Propellerhead-in-training
dorcutt
Sr. Propeller Head
 
Posts: 234
Joined: Thu May 15, 2014 12:16 pm

Re: Example: Customising the HTML5 skin

Postby Dave Lee on Mon Nov 17, 2014 4:04 am

dorcutt wrote: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.
Dave Lee
Master Propellus Maximus
 
Posts: 5650
Joined: Mon Mar 05, 2007 8:33 am
Location: UK

Re: Example: Customising the HTML5 skin

Postby Nita Beck on Mon Nov 17, 2014 9:53 am

@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.
Nita
Image
Content Strategist / Information Architect / Flare Consultant: http://beck-communications.com
Manager, Rochester Flare User Group: http://www.facebook.com/RochesterFlareUserGroup
Nita Beck
Senior Propellus Maximus
 
Posts: 3288
Joined: Thu Feb 02, 2006 9:57 am
Location: Pittsford, NY

Re: Example: Customising the HTML5 skin

Postby Dave Lee on Tue Nov 18, 2014 2:45 am

Nita Beck wrote:@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.
Dave Lee
Master Propellus Maximus
 
Posts: 5650
Joined: Mon Mar 05, 2007 8:33 am
Location: UK

Re: Example: Customising the HTML5 skin

Postby Nita Beck on Tue Nov 18, 2014 4:55 am

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!
Nita
Image
Content Strategist / Information Architect / Flare Consultant: http://beck-communications.com
Manager, Rochester Flare User Group: http://www.facebook.com/RochesterFlareUserGroup
Nita Beck
Senior Propellus Maximus
 
Posts: 3288
Joined: Thu Feb 02, 2006 9:57 am
Location: Pittsford, NY

Re: Example: Customising the HTML5 skin

Postby MattyQ on Wed Feb 11, 2015 10:19 am

@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.
MattyQ
Sr. Propeller Head
 
Posts: 136
Joined: Tue Sep 30, 2014 7:10 am
Location: Roanoke, VA

Re: Example: Customising the HTML5 skin

Postby Nita Beck on Wed Feb 11, 2015 10:50 am

@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!
Nita
Image
Content Strategist / Information Architect / Flare Consultant: http://beck-communications.com
Manager, Rochester Flare User Group: http://www.facebook.com/RochesterFlareUserGroup
Nita Beck
Senior Propellus Maximus
 
Posts: 3288
Joined: Thu Feb 02, 2006 9:57 am
Location: Pittsford, NY

Re: Example: Customising the HTML5 tripane skin

Postby Maria on Thu Sep 03, 2015 1:34 am

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!!
You do not have the required permissions to view the files attached to this post.
Maria
Jr. Propeller Head
 
Posts: 1
Joined: Mon Aug 31, 2015 2:43 am

Re: Example: Customising the HTML5 tripane skin

Postby jimgilliam on Tue Nov 17, 2015 9:11 am

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);
:flare:
jimgilliam
Propeller Head
 
Posts: 30
Joined: Tue Jun 04, 2013 9:49 am
Location: Arkansas, U.S.A.

Re: Example: Customising the HTML5 tripane skin

Postby jimgilliam on Tue Nov 17, 2015 9:31 am

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
:flare:
jimgilliam
Propeller Head
 
Posts: 30
Joined: Tue Jun 04, 2013 9:49 am
Location: Arkansas, U.S.A.

Re: Example: Customising the HTML5 tripane skin

Postby jimgilliam on Tue Nov 17, 2015 12:34 pm

jimgilliam wrote: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>' );
:flare:
jimgilliam
Propeller Head
 
Posts: 30
Joined: Tue Jun 04, 2013 9:49 am
Location: Arkansas, U.S.A.

Re: Example: Customising the HTML5 tripane skin

Postby Dave Lee on Wed Nov 18, 2015 1:41 am

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
Dave Lee
Master Propellus Maximus
 
Posts: 5650
Joined: Mon Mar 05, 2007 8:33 am
Location: UK

Re: Example: Customising the HTML5 tripane skin

Postby rogersm on Tue Feb 09, 2016 6:39 am

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
rogersm
Propeller Head
 
Posts: 73
Joined: Fri Nov 07, 2014 4:29 am

Re: Example: Customising the HTML5 tripane skin

Postby Dave Lee on Tue Feb 09, 2016 6:46 am

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/");
Dave Lee
Master Propellus Maximus
 
Posts: 5650
Joined: Mon Mar 05, 2007 8:33 am
Location: UK

Next

Return to Tips and Tricks

Who is online

Users browsing this forum: No registered users and 0 guests