Style Switchers Showcase and Resources
Published September 7th, 2009 in Web DevelopmentStyle switchers can be used to give visitors more options according to their preferences, or they can be used simply to add something dynamic and interesting to the site. The potential uses are nearly limitless but some common approaches include using style switchers to give choices in terms of background images, color schemes, font sizes, and layout.
In this post we’ll look at a number of sites that are using style switchers and you’ll see screenshots to demonstrate how the site will appear with various options selected. At the end of the post there is also a resources section with tutorials and scripts that can help if you are interested in using a style switcher on your site.
Carreras con Futuro uses a hand-drawn background image with splatter effects. The style switcher changes the color of the splatters, and also changes the color of a few elements in the site’s content area, such as the background of “login.”
Joshua Piersanti’s portfolio site includes a style switcher that flips between a day and a night theme. Obviously the background image changes, as does the color of the text to contrast the changing background. At the right edge of the screen is a light switch that is used to change the style – up for day and down for night.
The Absolute Bica portfolio site uses a large, nature-inspired background image. The style switcher allows visitors to chose a time of day: sunrise, afternoon, sunset, or night.
The style switcher on ANidea allows visitors to choose from ten different background images (four are shown below). The various background images are large and most use vibrant colors.
The Webstaze portfolio site offers visitors the option of choosing a season-based theme. All four seasons are represented by a background image (all are shown below).
Jason Bradbury’s blog allows visitors to choose the color scheme of the blog through the “choose a color” option at the top of the sidebar. Below you will see screenshots of the red and blue schemes. The background image is not changed based on this selection but it does change randomly (when you are on the site refresh the page). There are several different backgrounds that will appear randomly (a green textured background is also shown below) and each one offers visitors the opportunity to choose a color.
Impulse Design uses a style switcher to give visitors the option of changing background images. There are to choices, both are shown below.
The eAnka portfolio site uses a nature-inspire illustration as a header and background of the site. The style switcher gives visitors the choice to view the daytime or nighttime version, both shown below.
Marius Roosendaal’s site offers three different themes to choose from: day, night and sunrise. Each has a textured background and the text colors change appropriately as well (all three are shown below).
POPURLS offers visitors a lot of different customization options. For starters you can choose a light background or a dark background (both shown below). There are also options for how you would like the content to be displayed. The third image below is from the “river” option.
Nick La’s popular gallery site Best Web Gallery offers three different options for displaying the layout. You can choose thumbnails, full, or details (all are shown below).
The Hutch House portfolio site gives visitors the option to select one of four different themes: jungle, space, night, and depth (all shown below). Hutch House uses a different approach than most of the sites on this list, part of the content also changes based on the theme.
Style Switcher Resources for Developers:
Here are some resources that may be helpful for you in your own design and development:
Easy Display Switch with CSS and jQuery
A tutorial by Soh Tanaka on DesignM.ag that shows how you can achieve a similar effect as Best Web Gallery to give visitors layout options.
Stylesheet Switcher Using jQuery
Get the code for a jQuery style switcher from Kelvin Luck.
CSS Style Switcher – Design Shack
This is a quick tutorial from Design Shack that provides code for a style switcher.
Build Your Own PHP Style Sheet Switcher
456 Berea Street has a nice tutorial that you can use to create a style switcher.
Style Sheet Switcher from Dynamic Drive
Here is a script provided by Dynamic Drive.
CSS Style Theme Switcher
e-ss.be provides this script that you can download in use in your own work.
For more web development articles please see:
34 Responses to “Style Switchers Showcase and Resources”
that’s really cool stuff and best inspiring data. thanks
This is awesome. Never knew how this worked.
Do you think that the JS can create a cookie so that every time the person visits the site the style selected will be default?
Nice. For me most interesting is the script resource list at the end.
I have experimented with that some time, but i abandoned it. I still have some alternate styles with my site, but no Javascript styleswitcher. It has a big problem. If Javascript is disabled you get a not working styleswitcher menue on the page. Not good. If you use Javascript to dynamically create this menu this works. Except in IE, where the page elements are added via Javascript, but the Javascript associated with it does not work. Since most other browsers do allow switching style using onboard browser menue, i cancelled the Javascript styleswitcher. So IE and Chrome do not get advantage of the alternate styles, others do.
If i ever find a god way to add a styleswitcher for IE and Chrome, maybe i’ll do it. The styleswitcher must not interfere with the browsers own style switching. For IE this is no problem, IE knows conditional comments. But what with Chrome? I don’t know.
BTW: Creating reaaly different styles as alternate styles is the best way to learn semantic markup
Awesome! Thanks for sharing this list… It realy rocks, just what i was looking for! Lovely!
Good post! My favorite is definitely Absolute Bica. I’ve always wanted to try a style switcher but never knew how to begin. I appreciate all the examples you’ve laid out! Thanks.
And http://kulturbanause.de/ ?
@Nardiello : Yes, a js cookie can memorize your favorite switch, but i don’t know how browsers consider it. http://www.stilbuero.de/2006/09/17/cookie-plugin-for-jquery/ is a pist.
Damn it. I’m not on the list…
I would never do something like this if I saw that someone else had already done it, but that’s just me. -dp
Great article. Very useful information with great examples. Thanks!
Great post, some examples are fantastic..I prefer like graphics: Jason Bradbury, Webstaze.
Thanx for the great recourses and examples. Another great example is the BBC home page. The BBC lets you customize Your Homepage by selecting the “Add more to this page” button. They make it possible to customize your background, text link colors and more. Very impressive!
This is awesome. Never knew how this worked.
Do you think that the JS can create a cookie so that every time the person visits the site the style selected will be default?
Nice list – we added a style switch to our site too which someone might find useful
http://www.engageinteractive.co.uk/
Keep up the good work anyway!
A
I think my favorite (or most unique, at least) style-switcher would be: http://www.mica.edu/ (click the 4 icon photos)
Trent,
Nice example. Thanks.
Sweet list,truly appreciate that you featured our site too.
THANK YOU!
Hey, thanks for including me in this gallery! Nice!
I spent a lot of time on my themes and I am very proud how smooth I got the switcher to work which changes quite a few elements on my pages.
I will be posting about this blog tomorrow. Thanks again!
Thanks for this post, nice example.
I have always been unsure on style switchers, some website have absolutely murdered, but I absolutely love the examples in this post.
Trackbacks