Runtime Skins bootstrapping Content Styling?

This forum is for all Flare issues related to the HTML5, WebHelp, WebHelp Plus, and Adobe Air Targets

Runtime Skins bootstrapping Content Styling?

Postby Paul Griffiths on Tue Jun 18, 2019 5:31 am

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
Paul Griffiths
Sr. Propeller Head
 
Posts: 249
Joined: Wed Apr 18, 2007 2:25 am
Location: Nottingham, UK

Re: Runtime Skins bootstrapping Content Styling?

Postby Dave Lee on Tue Jun 18, 2019 8:01 am

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

Re: Runtime Skins bootstrapping Content Styling?

Postby Paul Griffiths on Thu Jun 20, 2019 12:35 am

Thanks Dave.

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

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

Re: Runtime Skins bootstrapping Content Styling?

Postby Paul Griffiths on Wed Feb 05, 2020 11:33 am

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.
Paul Griffiths
Sr. Propeller Head
 
Posts: 249
Joined: Wed Apr 18, 2007 2:25 am
Location: Nottingham, UK


Return to Web-based Outputs

Who is online

Users browsing this forum: No registered users and 6 guests

cron