Kombine Style Switcher
We recently considered redesigning our website here at Kombine. It’s a hazard of the web design profession—the urge to constantly tinker with whatever is currently online. The problem is that we still like the current (classic) design and have gotten a lot of positive feedback on it. We didn’t want to abandon it, but we’re also interested in trying something new.
A solution to our dilemma arrived in the form of CSS themes. After a bit of fiddling with JavaScript and alternate stylesheets, visitors to our site can now select a theme of their choice and completely refashion the look of the site with a single click. Give it a try—you can choose a theme by selecting it in the drop-down menu in the upper-right corner of this page.
We’ve set up two main themes (”classic” and “cool breeze”) with large print alternatives for each. Plus there’s a high contrast version (larger print with light text on a dark background) as well as a completely unstyled version in case you’re into that sort of thing.
Offering alternate site themes that radically reshape page layout and design (such as switching from “classic” to “cool breeze”) makes sense on a site offering web design services, but would probably not benefit many other businesses. The ability to offer large print versions of a site however, has a universal application and should be more pervasive on the web.
Setting up a website for theming requires a strict separation between structure and style. We eliminated inline styles and image tags as much as possible and of course, laying out the pages with CSS rather than tables is imperative. The graphic look of our themes is created with CSS and background images and the style switching is handled with a slightly modified version of the script described in this article on A List Apart.