This article is all about Style Sheet (CSS) Switcher Client Side and Server Side.

Many likes to see their favorite colors to be on the web sites which they visit regularly or many wants to see the users to spend more time on their own web site, do you agree with it?

Then why not give them a chance to pick their own look and feel? Sounds cool right

Take a little extra effort and prepare couple of style sheets (CSS) for different colors schemes which you would like to provide to your site users/visitors.

There might be something in your mind that, what is the advantage of doing all this?

Hmm… that’s a right question, I think the designers and developers know the answer for it?
Here it is, here comes the word Usability as a main factor and you all know Usability plays a key role in high traffic sites - the place where user can spend more time. If they have their favorite color on the site, the usage of the site might be more. Take an example of myself, being a web and graphic designer - I like/want/explore to see many colors on my favorite web sites, but when I come to my own favorite color I stop by and spend some more time on that particular web site which has my favorite color look and feel on it, hope you all agree with me!

Was just working on one of my new project “News Paper INDIA” - BETA which is a very sleek model for daily news items specially targeted to INDIA. The layout is with only text, layers - played with CSS and is made without using any images. There I have brown as a default color scheme, but some people really didn’t like the color and received feedback that even though they like the site and the way the content is presented in it, they expressed that they were unable to spend much time on the site because of the colors which I used. So thought why not give them a choice to pick few color schemes for the site, so that they can hang over on site for long time. Since it is a daily news paper, I have to make sure that people should stay for long time to read the news items provided. Check the image above and once you visit “News Paper INDIA” try to click on the color pallet options provide in the site.

Keeping all these in mind, started exploring ways to change/switch the style sheets or CSS. In this effort I found few but cool ways to switch style sheets or CSS and thought to share with my fellow designers and developers. Here is the list of the sites where you can find the code, tutorials and the respective files to download. List is randomly arranged and at the end of this list I have mentioned which script I was using for my “News Paper INDIA” project :). Explore the list now…..

1

If I build a style sheet switcher into my site then I can keep this design and serve up as many other ones as I like, improving accessibility and keeping the bright blueness of my headings.

http://www.unintentionallyblank.co.uk/2006/08/17/the-dom-again-a-style-sheet-switcher/

I began to create a style sheet switcher using javascript and the HTML DOM.

http://www.unintentionallyblank.co.uk/2006/08/18/stylesheet-switcher-part-2/

I was just running through my examples yesterday evening, checking they work in IE7 when to my horror my style sheet switcher failed miserably. I ran to IE6 to see if I had overlooked the problem for IE in general and it turned out that I had. I guess that since the majority of visitors to this site use Firefox (in which the function works perfectly) no-one else had noticed either. The strange thing was that it was only the final version that didn’t work, the first version, using just links rather than the drop down box, did work. This means that the style sheet switching function was working fine and there was a problem with the drop down box.

http://www.unintentionallyblank.co.uk/2006/08/30/stylesheet-switcher-part-3-revenge-of-ie/

Example: http://test.unintentionallyblank.co.uk/switcher.html

2

The script is held in a JavaScript header file, and is able to use a cookie to remember the user’s choice of style sheets. In this case, I have chosen to remember that choice only until the browser is closed. Note that I only set this cookie when the page is unloaded. In some browsers, that event only fires when you click a link, not when you reload or go back.

http://www.howtocreate.co.uk/tutorials/jsexamples/CSStest/

Example: http://www.howtocreate.co.uk/tutorials/jsexamples/CSStest/frame.html

3

This code is partly based on the style switcher used in a free content management system called Smart Publish. That script, however, used a combination of ASP and JavaScript, while this version uses simply ASP.

http://www.helical-library.net/coded/stylesheet_switcher.asp

4

Prototypish Style Sheet Switcher, this is a Prototypish rewrite of Paul Sowdens Style Sheet Switcher. The original version has a lot of global functions so I put everything into a class instead and made the code a bit more elegant. It should work as the normal one except for some methods have been renamed. A cookie library is included as well since the switcher needs to read and create cookies to save the users preferred style sheet.

http://burnfield.com/martin/2006/07/12/prototypish-style-sheet-switcher/

5

This code snippet will allow your users to choose between different styles to apply to your website. Yes, it’s a PHP skin selector for websites!

http://www.geek-notes.com/css/23/cascading-style-sheet-switcher/

6

Right, what we have here is a very handy way of allowing a user to switch between multiple style sheets on your site. This should be a bit superfluous to users of recent Gecko browsers, but as most of the world is using Internet Explorer at this point in time, it’s very handy for these users to be able to change font sizes etc. without having to dig deep into IE’s settings. Also, it’s all done server-side, so you don’t have to worry about your user having JavaScript turned on etc.

http://www.dotphp.co.uk/articles/stylesheet_switcher_php.php

7

Alternative Style: Working With Alternate Style Sheets: So you’ve got a web page. You’ve marked it up with structural XHTML. You’ve also been a good little web developer and used style sheets to control what your document looks like. You’ve even gone the extra mile and created several alternative style sheets to show how hardcore you are.

http://www.alistapart.com/stories/alternate/

Build a PHP Switcher: For your style-sheet-switching pleasure, A List Apart offers the Switcher, a piece of JavaScript that dynamically changes page styles. Functional as it is, it quite unfortunately relies on the user to have both JavaScript and cookies enabled. There’s not much we can do about the cookies, but we can sidestep client-side processing with a little help from PHP.

http://www.alistapart.com/articles/phpswitch/

8

Style Sheet Switcher: Style sheet based on browser. When the page loads, this script will detect whether you are using Microsoft Internet Explorer or another browser. It will then load the appropriate style sheet.

http://javascript.internet.com/css/style-sheet-switcher.html

9

Style Switching: Multiple style sheets allow a single document to be viewed with different styles. Unfortunately, not all web browsers support them natively. This has got a Client Side and Server side (ASP & PHP) scripts and demos. Must give it a try.

http://css-discuss.incutio.com/?page=StyleSwitching

10

AJAX Style Switching: This is really cool script/snippet which is very easy to implement and works in client side and server side too

http://www.dustindiaz.com/udasss/

http://24ways.org/2005/introducing-udasss

Example: http://www.dustindiaz.com/basement/udasss/

11

Switch style sheets with jQuery: As an example of how succinct and easy code written with jQuery can be I put together a little example that allows you to add a style sheet switcher to your site.

http://kelvinluck.com/article/switch-stylesheets-with-jquery

Example: http://kelvinluck.com/assets/jquery/styleswitch/

12

Server-Side Dynamic Style Sheet Switcher: Jim came up with the idea of providing a more flexible interface that allows visitors to select relative sizes for fonts, and a choice of foreground and background color combinations using a server side script. Jim’s ideas adequately deal with our initial reservations. Discussing the idea further, we investigated ways that this technique could be incorporated into style sheet switchers.

http://juicystudio.com/article/stylesheet-switcher.php

13

Build your own PHP style sheet switcher: Want to have a style switcher that lets your site’s visitors choose a different style sheet? Want it to work even if there is no JavaScript support? The trick is to use a server-side language like PHP, which is what I use for my style switcher. Using PHP to let the user switch to a different CSS file is nothing new. But it is one of the things that I am often asked about, so I thought it would be good to have a write-up to refer people to in the future.

http://www.456bereastreet.com/archive/200608/build_your_own_php_style_sheet_switcher/

14

CSS Style sheet Switcher using PHP (Javascript free): Essentially what you have is an array of predefined style sheets that are called and set to and from a cookie (this cookie stores a numerical value representing the style sheet number that is selected).

http://gr0w.com/articles/code/css_stylesheet_switcher_using_php_javascript_free/

15

Dynamic Drive, Style Sheet Switcher (v1.1): You’ve seen such a feature on other CSS based sites, now you can have it too. This is a “plug & play” style sheet switcher that lets your visitors switch between a list of alternative style sheets to apply to your site. With a change of style sheet the entire look of your site can be transformed. Persistent cookies are used to store the user’s selection and automatically recall that style sheet upon his return.

http://www.dynamicdrive.com/dynamicindex9/stylesheetswitcher.htm

16

A Backward Compatible Style Switcher: In ALA Issue 126, Paul Sowden famously introduced the joys of alternate Style Sheets per W3C specs. Not content to elucidate theory, Sowden devised a compliant Style Sheet Switcher built with a few lines of JavaScript, and presented it to ALA’s readers and the entire design / development community as an Open Source gift.

http://alistapart.com/articles/n4switch/

17

This extension for TYPO3, lets you insert several custom styled CSS-Files as “Page-Styles”. Features: Per-Page-Styles, Cookies, Alternative-Styles, Default-Styles, Basic-Styles, Template-driven. Style sheet-Switching is often used for alternative Font-Sizing (Accessibility) or alternative Layouts (Design).

http://typo3.org/documentation/document-library/extension-manuals/is_styleswitcher/current/

18

Preparing for a style sheet switcher: Good for small sites.

http://brucelawson.co.uk/index.php/2005/preparing-for-a-stylesheet-switcher/

19

CSS Style Sheet switchers using alternate style sheets and Javascript, using @Import and of method 1 and 2 to switch layout and presentation independently.

http://www.notestips.com/80256B3A007F2692/1/NAMO5GK2NM

The above url doesn’t worked to me, if not check their example url and save the example page to grab the script.

Example: http://www.mikezilla.com/exp0020/exp0020.html

—————–

Hmmm… I think there are many other ways for the same, right?

Here it ends my list of “Ways to build style sheet switcher for your own website”.

The one which I am using and experimenting with my new project is the 10th one from this list “AJAX Style Switching - Udasss“, which is a very handy script uses Prototype - http://www.prototypejs.org (a JavaScript Framework that aims to ease development of dynamic web applications)

If you think I have missed some useful script - kindly share the same by dropping it in my comments box.

Found this article useful? Then why not show some love - Digg It and Spot It (SpotPlex.com)