Style Switchers Showcase and Resources
Style 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:
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:
- 25 jQuery Image Gallery/Slider Tutorials and Plugins
- 37 Shopping Cart Options for Web Developers
- How to Set Up Your First Site with LightCMS
Published September 7th, 2009 by Steven Snell