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
Multiple skins (HTML5 Tripane): change CSS?
-
- Propeller Head
- Posts: 47
- Joined: Mon Jun 28, 2021 8:02 am
Re: Multiple skins (HTML5 Tripane): change CSS?
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.
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
Got a bug? https://www.madcapsoftware.com/feedback/bugs/
Got a suggestion? https://www.madcapsoftware.com/feedback ... quest.aspx
Re: Multiple skins (HTML5 Tripane): change CSS?
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.
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.
Re: Multiple skins (HTML5 Tripane): change CSS?
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:
Thanks very much. Fiona
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
Thanks very much. Fiona
-
- Senior Propellus Maximus
- Posts: 2630
- Joined: Wed Apr 14, 2010 8:01 am
- Location: Surrey, UK
Re: Multiple skins (HTML5 Tripane): change CSS?
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
Report bugs at http://www.madcapsoftware.com/bugs/submit.aspx.
Request features at https://www.madcapsoftware.com/feedback ... quest.aspx
Re: Multiple skins (HTML5 Tripane): change CSS?
(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:
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
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; }
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
Re: Multiple skins (HTML5 Tripane): change CSS?
Thanks ChoccieMuffin and Dave, I'll give it a go. Fingers crossed...