Getautomatix.com Site Update
One of my earlier clients, Arnav Ghosh of Automatix fame had mentioned that he'd like a lighter theme for his website. Knowing that he did like the dark one as well, but was more concerned for those that did not, I set about providing a means to use both.
My first task was creating a new, lighter theme. At that, I believe I have succeeded. Arnav was very pleased with it.
With a single click to the style selector in the top right corner, you can switch back to the old dark theme.
This is accomplished with a javascript file that grabs the theme you want to use (from the invocation of the style chooser), and then sends it to your browser and saves it in a cookie so that you will see that theme until you choose another. If you'd like to use it, feel free to. Here (right-click and save as to save the file) is the javascript file, and below is a sample of the code for the switcher.
This goes in between your <head> tags:
<link href="css/light/style.css" rel="stylesheet" type="text/css" title="Light" />
<link href="css/dark/style.css" rel="alternate stylesheet" type="text/css" title="Dark" />
<script src="css/styleswitcher.js" type="text/javascript"></script>And this goes wherever you want your style switcher to be:
Style: <a href="#" onkeypress="return false;"
onclick="setActiveStyleSheet('Light'); return false;"
title="Light">Light</a> | <a href="#" onkeypress="return false;"
onclick="setActiveStyleSheet('Dark'); return false;"
title="Dark">Dark</a>Should be easy enough to convert that to your own needs. You can use dropdown lists as well if you have many themes.
For a full (and much for informative) tutorial, go see A List Apart.
Trackback URL for this post:
