closed livingstoneonline/livingstoneonline#205

HTML/CSS issue

awisnicki

I have a small query that I've been unable to resolve on my own despite quite a bit of researching. When I display an html file in the multitext of manuscript viewer, I'd like a short bit of text to toggle an additional stylesheet on and off.

So, for instance, liv_002513_TEI.xml uses transcription.xsl for its transformation to HTML. Thanks to transcription.xsl, the HTML file points to the following stylesheets:

<link rel="stylesheet" type="text/css" href="http://livingstoneonline.github.io/LEAP-XSLT/normalize.css"/>
<link rel="stylesheet" type="text/css" href="http://livingstoneonline.github.io/LEAP-XSLT/common.css"/>
<link rel="stylesheet" type="text/css" href="http://livingstoneonline.github.io/LEAP-XSLT/style.css"/>

I'd like to add an additional stylesheet, let's say style2.css. This stylesheet would not be applied like the others (by default), but rather in the HTML there would be bit of text enclosed in <a> that said "Click me" (for instance) and when that text was clicked, the additional stylesheet would be applied. If the text was clicked yet again, the stylesheet would be unapplied.

From what I've seen the additional stylesheet should be given thus in the HTML file:

<link rel="stylesheet alternate" type="text/css" href="http://livingstoneonline.github.io/LEAP-XSLT/style2.css"/>

And the click and adding the additional stylesheet might be sorted out with some jquery or javascript in a <script> in the <head> of the <html>, but beyond that I've not been able to find the right formula or make the pieces work together since this is a bit out of my depth.

nigelgbanks

The easiest way to do this does not require adding another css file, just the setting of a class on a top level element, and using that class to "namespace" elements below and change their display. This example might answer your question (Example doesn't require jQuery).

https://codepen.io/nbanks/pen/oGPOoX/

awisnicki

OK, thank you very much! I'll take it from here.