This plain text file is linked from the PHP Style Switcher article about the style switcher used at 4-Ever.
This is based on the excellent article at http://www.digital-web.com/articles/strategies_for_css_switching called Stuff and Nonsense: Strategies for CSS Switching by Christopher Schmitt, Mark Trammell, Ethan Marcotte, Todd Dominey & Dunstan Orchard. You really need to read that for a good understanding.
----------
In my document root there is switch.php:
When the user clicks a style, this passes it as cookies S1 and S2 to the head of the page.
----------
In the head of my page I have:
The first line has @import to use my basic stylesheet whilst making it unavailable to IE4 and old browsers.
The second line retrieves cookie S2 to determine my second stylesheet.
The third line retrieves cookie S1 to determine my third stylesheet.
(Look at the page source to see the result, and note how it changes depending on the style that is clicked)
(If using stylesheets within Textpattern, you can of course alter this accordingly)
-------------
On the web page there is this:
There are two styles on each line/link called CSS and STYLE.
------------
And that's it! I originally used 8 links and the user had to click a theme and then click a size. It was less coding but I thought the one click would be better. If you would like to try it with 8 links, replace the above 16 lines with the following 8:
OceanCloudDayNightTinySmallMediumLarge
As before there are two styles on each line/link called CSS and STYLE.
For THEME these two are the same. For SIZE, the CSS style equals the last style selected.
When the user clicks a link, switch.php retrieves the two styles storing them as S1 and S2.
------------
To determine the last style selected, I have this just above the links:
I have hidden it so it isn't visible on the page. ( .hide {display: none;} )
--------------
That's all folks!
There are two styles on each line/link called CSS and STYLE.
------------
And that's it! I originally used 8 links and the user had to click a theme and then click a size. It was less coding but I thought the one click would be better. If you would like to try it with 8 links, replace the above 16 lines with the following 8:
Ocean
Cloud
Day
Night
Tiny
Small
Medium
Large
As before there are two styles on each line/link called CSS and STYLE.
For THEME these two are the same. For SIZE, the CSS style equals the last style selected.
When the user clicks a link, switch.php retrieves the two styles storing them as S1 and S2.
------------
To determine the last style selected, I have this just above the links:
I have hidden it so it isn't visible on the page. ( .hide {display: none;} )
--------------
That's all folks!