dive into mark

Inspired by a recent article on A List Apart, I spent most of last night implementing a CSS-based theme switcher and several new themes for this site. On my main page, use the dropdown menu in the upper left to change themes. No server-side code: it’s all done with CSS, Javascript (to select the given CSS file), and cookies (to save and restore your preference). For those of you not putting 2 and 2 together here, this means it would work in Radio (or Blogger, or Greymatter, or anything).

The actual switching is a few lines of Javascript; to call it, put this in your head tag:

<script type="text/javascript" src="/css/styleswitcher.js"></script>

The actual dropdown looks like this:

<div id=”styleswitcher”>
<form action=”">
<p>
<select onchange=”var v=this.options[this.selectedIndex].value; if (v != ”) chooseStyle(v);”>
<option value=”">Choose style</option>
<option value=”1″>Traditional</option>
<option value=”2″>Traditional, right</option>
<option value=”3″>Traditional, plain</option>
<option value=”4″>Minimal</option>
<option value=”5″>Designer</option>
<option value=”6″>Valentine (Mozilla only)</option>
<option value=”7″>Bubbles</option>
</select>
</p>
</form>
</div>

I’ve tested both the code and my current crop of themes on all modern browsers (Opera 5, IE5.5, Mozilla 0.98, and Mac/IE5). Let me know if you have any problems. And don’t try this with any archaic table-based layouts… ;-)

§

Respond privately

I am no longer accepting public comments on this post, but you can use this form to contact me privately. (Your message will not be published.)

§