This article is all about Style Sheet (CSS) Switcher Client Side and Server Side.
Many like to see their favorite colors to be on the websites which they visit regularly or many want to see the users spend more time on their own website, 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 a 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 the main factor and you all know Usability plays a key role in high traffic sites – the place where users 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 websites, 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 a long time. Since it is a daily newspaper, I have to make sure that people should stay for a 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 on the site.
Keeping all these in mind, started exploring ways to change/switch the style sheets or CSS. In this effort, I found a 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. The 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…..
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.
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.
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 user’s preferred style sheet.
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!
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.
Style Sheet Switcher: Style sheet based on the 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.
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 Client Side and Server-side (ASP & PHP) scripts and demos. Must give it a try.
AJAX-Style Switching: This is really cool script/snippet which is very easy to implement and works client-side and server-side too :)
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.
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.
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.
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.
This extension for TYPO3, lets you insert several customs-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 Layout (Design).
Preparing for a style sheet switcher: Good for small sites.
The above URL doesn’t work for me, if not check their example URL and save the example page to grab the script.
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”.
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) :)