It know that this is just sooo 3 years ago, but when I redesigned Jasongraphix, style switching was one of my highest priorities. I’ve been in love with the idea since I was first offered presentation options by “techno-facist” Eric Meyer on his personal site, meyerweb.com.
Those days were the start of revolutionary new techniques, and although CSS Zen Garden level style switching is less common these days, influential folks like Douglas Bowman, and Mike Davidson are definitely keeping the idea alive. Don’t get me wrong, a lot of people effectively use style switching to accomplish simple usability tasks like changing font size and font family, but full design swapping is pretty uncommon.
If you’ve been to this site before, you’ll notice a new little drop-down widget in the sidebar on the homepage. I plan to add more style options as time goes by, but if you have cookies enabled, you might want to try going bucknaked: it’s the stripped down, fluid flavor of this layout. I’ve also added an option for stlyeless as well, which basically does the same thing as the zap stylesheets bookmarklet – but sets a cookie to maintain the sylessness. All this happiness is brought to you by php. Knowing that I wanted to implement style switching, I created an include that contains all of the “linkrel” data for the site. When you select a style from the menu, it sends you to a php page that sets a cookie called stylename. Once you have this cookie, there is a switch statement on the “linkrel” file that changes which stylesheet links that get posted based on your stylename cookie. It ends up looking like this:
<?php
switch ($stylename) {
case "1900":
case "":?>
<link rel="stylesheet" type="text/css" href="http://www.jasongraphix.com/css/1900/1900.css" media="all" title="1900" />
<link rel="alternate stylesheet" type="text/css" href="http://www.jasongraphix.com/css/bucknaked/bucknaked.css" media="all" title="bucknaked"/>
<link rel="stylesheet" type="text/css" href="http://www.jasongraphix.com/css/sIFR.css" media="screen" />
<link rel="stylesheet" type="text/css" href="http://www.jasongraphix.com/css/sIFRprint.css" media="print" />
<script src="http://www.jasongraphix.com/includes/sIFR/sifr.js" type="text/javascript"></script>
<?php break;
case "bucknaked":?>
<link rel="stylesheet" type="text/css" href="http://www.jasongraphix.com/css/bucknaked/bucknaked.css" media="all" title="bucknaked"/>
<link rel="alternate stylesheet" type="text/css" href="http://www.jasongraphix.com/css/1900/1900.css" media="all" title="1900" />
<?php break;
case "styleless":
break; }?>
See, that wasn’t so bad. I do have a headache right now, but really, it wasn’t that difficult.