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
Multiple stylesheets
-
LouisWilkinson1980
- Propeller Head
- Posts: 16
- Joined: Wed Mar 30, 2016 8:01 am
Re: Multiple stylesheets
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:
(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.
(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.
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=1It then redirects and open the help using the #cshid value; e.g.
Code: Select all
http://www.yoursite.com/Help/Default.htm#cshid=yourid(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
That's really helpful Dave, thank you, I will have a chat with the dev team and see what they can do...