Sent by Lars Holst on 29 November 2003 11:11
I lost the original message, sorry.
I agree that there is no good CSS way to do what you want, but there is
kind of an ugly workaround, which doesn't require JavaScript.
What you need to do is first create your "main" style sheets, then make
the "override" files separately for each main style. You can then use
display:none to have the alternate styles only show up with their
associated main style.
I suppose this calls for an example:
Say you have a blue and a green main style, and you want to apply a
larger font to each of these styles. You could then link the style
sheets as follows in the header section of your file (this will make
the blue style the default one):
<link rel="stylesheet" type="text/css" media="all"
href="/css/blue.css" />
<link rel="alternate stylesheet" type="text/css" media="all"
title="bluelargefont" href="/css/bluelargefont.css" />
<link rel="alternate stylesheet" type="text/css" media="all"
title="green" href="/css/green.css" />
<link rel="alternate stylesheet" type="text/css" media="all"
title="greenlargefont" href="/css/greenlargefont.css" />
Anchors would then look something like this (depending on your style
switcher - the example uses Paul Sowden's switcher):
<h2>Switch colors:</h2>
<ul>
<li><a href="#" onclick="setActiveStyleSheet('blue'); return
false;">Blue</a></li>
<li><a href="#" onclick="setActiveStyleSheet('green'); return
false;">Green</a></li>
</ul>
<h2>Adjust font size:</h2>
<ul class="bluehide">
<li><a href="#" onclick="setActiveStyleSheet('blue'); return
false;">Normal</a></li>
<li><a href="#" onclick="setActiveStyleSheet('bluelargefont');
return false;">Large</a></li>
</ul>
<ul class="greenhide">
<li><a href="#" onclick="setActiveStyleSheet('green'); return
false;">Normal</a></li>
<li><a href="#" onclick="setActiveStyleSheet('greenlargefont');
return false;">Large</a></li>
</ul>
And the crucial CSS:
in blue.css:
..greenhide {display: none;}
in green.css and greenlargefont.css:
..bluehide {display: none;}
I use a similar, but slightly simpler setup on my weblog (see below) -
if you look carefully you'll see that the "Engines" styles are only
visible when the main style "Day" is active.
The drawback is that this soon gets difficult to maintain. Mixing in
some server side scripting would be a more elegant solution, if that is
an option.
/lars http://larsholst.info/blog/
__________________________________
Do you Yahoo!?
Free Pop-Up Blocker - Get it now
http://companion.yahoo.com/
______________________________________________________________________
css-discuss [EMAIL-REMOVED]]
http://www.css-discuss.org/mailman/listinfo/css-d
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/