Runtime Skins bootstrapping Content Styling?

This forum is for all Flare issues related to the HTML5, WebHelp, WebHelp Plus, and Adobe Air Targets
Post Reply
Paul Griffiths
Sr. Propeller Head
Posts: 261
Joined: Wed Apr 18, 2007 2:25 am
Location: Nottingham, UK

Runtime Skins bootstrapping Content Styling?

Post by Paul Griffiths »

Runtime Skins is an established feature that allows the reader to switch skins on-the-fly in a deployed Help system. For example, from one colour scheme to another.

I'm wondering if there's any way I can exploit (hack) this feature to change the colour scheme of the content too (e.g. H1 color, table cell background color, etc).

I'm floating this idea in case someone can immediately shoot it down and thereby save me a fruitless attempt at a proof of concept.

Cheers
NorthEast
Master Propellus Maximus
Posts: 6359
Joined: Mon Mar 05, 2007 8:33 am

Re: Runtime Skins bootstrapping Content Styling?

Post by NorthEast »

Yep, it should be fairly easy to do.

The skin's name is included as a class on the html tag, such as "_Skins_YourSkinName" (at least when using a HTML5 top nav skin).
You can see this if you press F12 in your browser (to open developer tools), and look at the html tag.

So that means you could set up your CSS based on the skin's class name.

For example, to make the h1 red with a particular skin, you could use something like:

Code: Select all

html._Skins_YourSkinName h1 
{ 
   color: red; 
}
Paul Griffiths
Sr. Propeller Head
Posts: 261
Joined: Wed Apr 18, 2007 2:25 am
Location: Nottingham, UK

Re: Runtime Skins bootstrapping Content Styling?

Post by Paul Griffiths »

Thanks Dave.

Must admit I had assumed this would not be possible! Now for the PoC.

Cheers
Paul Griffiths
Sr. Propeller Head
Posts: 261
Joined: Wed Apr 18, 2007 2:25 am
Location: Nottingham, UK

Re: Runtime Skins bootstrapping Content Styling?

Post by Paul Griffiths »

Since my post and Dave's reply is getting some mentions I thought I'd quickly say how I got on.

I got switching between skins/themed colours working fine on HTML5 Side Nav skins.

I had trouble with HTML5 Tri-Pane skins as I found it harder to "get at" the right elements. I hope you know what I mean by that - when you're leveraging a skin change to get at and re-style content, you have to remember that you're targeting the *built* HTML and styles, not the *source* content and styles in your Flare project.

For example, one thing I never figured out was whether (and if so how) I could change the colour of the graphic used in togglers (the ">" or whatever).

I haven't tried HTML5 Top Nav yet but I suspect it will be similar to Side Nav.

I should finish by saying that all this is Proof of Concept for me at the moment. It has not - and may never - be released.
Post Reply