Multiple stylesheets

This forum is for all Flare issues related to styles, stylesheets and XML.
Post Reply
LouisWilkinson1980
Propeller Head
Posts: 16
Joined: Wed Mar 30, 2016 8:01 am

Multiple stylesheets

Post by LouisWilkinson1980 »

Hi Everyone,

I am currently creating context sensitive help files for an application which has two themes, one for working in office conditions and then another for working in lowlight environments.

I would like to know if it is possible to have different CSSs in a flare project which could change depending on application's selected theme?

Any help with this would be gratefully received...

Many thanks,
Louis
NorthEast
Master Propellus Maximus
Posts: 6426
Joined: Mon Mar 05, 2007 8:33 am

Re: Multiple stylesheets

Post by NorthEast »

Flare itself doesn't really have anything built-in that would help you here.

I'm working on a project where we adapt the help (CSS) depending on options in the application. To do this, the application stores the user's options in localstorage (browser storage), and the help checks localstorage to see what options are being used.

I've described how our solution works below - if you show this to a web developer, they should be able to produce this quite quickly.

(1) When the application opens the help, instead of going to the normal help page (e.g. Default.htm), it links to a 'handler' page. The link from the app includes the #cshid for your topic, plus a parameter for the option in your app - e.g. whether you're using lowlight. So in your case, this link would have the #cshid for the topic, plus a 'lowlight' parameter set to 1:

Code: Select all

http://www.yoursite.com/Help/Help_handler.htm#cshid=yourid?lowlight=1
(2) The handler page (Help_handler.htm) looks for the 'lowlight' parameter, and stores the value in localstorage.
It then redirects and open the help using the #cshid value; e.g.

Code: Select all

http://www.yoursite.com/Help/Default.htm#cshid=yourid
(3) In your help, a script reads the 'lowlight' value in localstorage. If the lowlight value is set to 1, then it appends a 'lowlight' class to the hml tag.

(4) In your CSS, you set up alternative styles based on whether there is a html.lowlight class; e.g.

Code: Select all

html.lowlight body { color: white; background-color: black; }
LouisWilkinson1980
Propeller Head
Posts: 16
Joined: Wed Mar 30, 2016 8:01 am

Re: Multiple stylesheets

Post by LouisWilkinson1980 »

That's really helpful Dave, thank you, I will have a chat with the dev team and see what they can do...
Post Reply