Multiple skins (HTML5 Tripane): change CSS?

This forum is for all Flare issues related to the HTML5, WebHelp, WebHelp Plus, and Adobe Air Targets
Post Reply
Fiona
Sr. Propeller Head
Posts: 117
Joined: Tue Jan 27, 2015 7:44 am
Location: U.K.

Multiple skins (HTML5 Tripane): change CSS?

Post by Fiona »

We would like to have some different skins on our HTML5 tripane documentation; for each skin we would also like to change the appearance of the contents. For example, a scheme suitable for dyslexic readers needs not just a different "framework" but also different fonts/line spacing/colours in the body.

By adding various skins and the "Select Skin" button I can change the appearance of the "framework" of the online documentation, but the content of each page continues to use the standard style sheet. I need to be able to override all the non-print medium options in my CSS.

Is this achieveable through the main CSS (e.g. can I somehow define a subset of "@media non-print" specific to each skin that takes effect when that skin is selected by the user?) or do I need to create a new CSS for each skin and apply this after the default has been generated to overwrite the settings from the main CSS?

Any suggestions appreciated, as are any pointers re pitfalls that someone who's tried to do this before encountered!

Thanks. Fiona
sarrantsvt
Propeller Head
Posts: 47
Joined: Mon Jun 28, 2021 8:02 am

Re: Multiple skins (HTML5 Tripane): change CSS?

Post by sarrantsvt »

I don't think @media would work here. Media queries are better for setting display criteria. When that criterion is met (screen width, resolution, etc.), a specific media query takes over. That's how I've been using it.
What I might do is create another style sheet for dyslexic readers and associate it with an output target for dyslexic readers.

As for Skins, yes, you can have a different skin for each target, and you define the Skin styles in the Skin editor. It's been a long time since I've worked with skins -- I do mostly PDF targets now -- so it may have changed or I may be misremembering.
Doing Online Help since 1990. I remember "dots" .........
Got a bug? https://www.madcapsoftware.com/feedback/bugs/
Got a suggestion? https://www.madcapsoftware.com/feedback ... quest.aspx
NorthEast
Master Propellus Maximus
Posts: 6359
Joined: Mon Mar 05, 2007 8:33 am

Re: Multiple skins (HTML5 Tripane): change CSS?

Post by NorthEast »

It's fairly straightforward to do this using Side Nav skin - see here: viewtopic.php?f=9&t=31713#p137258
When you switch the skin, you can use the skin class name applied to the output html tag to change the styles in the topic too.

However, that approach wouldn't work for Tripane as it uses frames, so the skin and the topic are separate pages. Whilst the skin class is still applied to the html tag in the "skin" page, there's nothing similar in the topic page that you can use to work out what skin is being used, and control the CSS.

Tripane is pretty old now, so unless you're committed to using it, or need to use it (e.g. for project merging), then I'd suggest using the Side Nav skin.
Fiona
Sr. Propeller Head
Posts: 117
Joined: Tue Jan 27, 2015 7:44 am
Location: U.K.

Re: Multiple skins (HTML5 Tripane): change CSS?

Post by Fiona »

Thanks both.

I'm not committed to using Tripane, and would be able to change to SideNav except that Tripane offers a couple of bits of functionality that we find useful; if there's a way to replicate this behaviour in SideNav then please let me know and I'll make the switch! Specifically, the two reasons we're still using Tripane are:
  • The side navigation panel is user-variable in width. It's very useful if a user can temporarily make the navigation panel wider without it being configured to be permanently very wide, and I can't see that this is feasible with SideNav
  • The "buttons" that are present on the Tripane panel to remove highlighting, change skins, print the page, etc. are very useful and I can't see how to add them in the SideNav option
I'd appreciate any advice as to whether replicating these in SideNav is possible – it might well be there but I can't find it, or it could need some custom Java, but as long as I know it's possible I can make the switch.

Thanks very much. Fiona
ChoccieMuffin
Senior Propellus Maximus
Posts: 2630
Joined: Wed Apr 14, 2010 8:01 am
Location: Surrey, UK

Re: Multiple skins (HTML5 Tripane): change CSS?

Post by ChoccieMuffin »

Don't know about the first one, but you can definitely add a toolbar with assorted buttons, such as Remove highlight, Next topic, etc, in SideNav. I think you do it in the target by using a Topic toolbar, but I'm not looking at Flare right now so the location of it could be wrong. Wait until someone else tells you about adjusting the width of the menu...
Started as a newbie with Flare 6.1, now using Flare 2023.
Report bugs at http://www.madcapsoftware.com/bugs/submit.aspx.
Request features at https://www.madcapsoftware.com/feedback ... quest.aspx
NorthEast
Master Propellus Maximus
Posts: 6359
Joined: Mon Mar 05, 2007 8:33 am

Re: Multiple skins (HTML5 Tripane): change CSS?

Post by NorthEast »

(1) There's nothing built in to Flare that will resize the Side Nav menu, like there is for Tripane.
If you're comfortable writing javascript, it'd certainly be possible and I'm sure you could find examples on Stackoverflow or other sites.
At the simplest level, you can use CSS to make the element resizeable like this:

Code: Select all

nav.sidenav-wrapper { resize: horizontal; }
But the problem is that the size will be reset to the default CSS size when you navigate to another page. (Maybe this is why MadCap didn't implement the feature.)
So you'd need some code that detects when the element is manually resized and saves that value to the browser's local storage (to remember between sessions) or session storage (to remember for this session only).
Then each time you load a page, you need to retrieve the value from the local/session storage and apply it to the element.

(2) Yep, you can get the toolbar buttons by inserting a toolbar proxy (and styling it with a toolbar skin). The main difference is that the toolbar is positioned in your topic area, rather than being positioned in the main skin/header.
See the toolbar in Flare's help: https://help.madcapsoftware.com/flare20 ... oolbar.htm
Fiona
Sr. Propeller Head
Posts: 117
Joined: Tue Jan 27, 2015 7:44 am
Location: U.K.

Re: Multiple skins (HTML5 Tripane): change CSS?

Post by Fiona »

Thanks ChoccieMuffin and Dave, I'll give it a go. Fingers crossed...
Post Reply