0
comments
2010-04-09
CSS and Javascript have revolutionized web development scene and now websites are better looking, more interactive and highly dynamic... all thanks to these two. Out of their many awesome uses, one of the feature which is used in quite a few websites these days is to give user the ability to change look and feel of website. Many user like to use this facility to change font size, colors and page layouts as per their comfort so this post will show how to attract more such users.
To do this we have to create additional CSS, mark it as alternate stylesheet and write javascript code to switch to this stylesheet when corresponding link is clicked by user on this page. Sound too much to do? Then look at the Demo and read on for step wise procedure for more details.
First step is to create two CSS files, one default and another alternate. In alternate CSS file put those styles which you want to apply when user clicks on the link.
Second step is to include these files on your page and specify which one is preferred and which one is alternate stylesheet. here is how it would look like:
<link href="default_black.css" media="all" rel="stylesheet" title="black" type="text/css"></link> <link href="white.css" media="all" rel="alternate stylesheet" title="white" type="text/css"></link>
Note the "rel" attribute of link tag, this specifies which one is alternate CSS. In this case "default_black.css" is default(which means first time page will be loaded with this CSS) and "white.css" is alternate. The title attribute is used to identify which CSS needs to be enabled and which one should be disabled.
Third step is to get styleSwitcher.js and styleswitcher-load.js and include it in your page.
<script type="text/javascript" src="styleswitcher.js"></script> <script type="text/javascript" src="styleswitcher-load.js"></script>
Fourth step is to create links on your page which will call "setActiveStyleSheet" method with title as argument. Javascript code with then fetch the CSS file with title given by you and enable that CSS after disabling all other preferred CSS. Here is how link should look like:
<a href="#" onclick="setActiveStyleSheet('black'); return false;">Black</a>
<a href="#" onclick="setActiveStyleSheet('white'); return false;">White</a>
Please note 'black' & 'white' are values of title attributes in link tags of CSS files.Thats it, you are ready to go!
I am using this on my personal website to try it out, so you can have another illustration if you want.
More about styleSwitcher.js and styleswitcher-load.js
styleSwitcher.js has functions to get and set required CSS file and while doing that, it also puts a cookie having title of current stylesheet.
styleswitcher-load.js has function which is executed at onload to check which stylesheet should be loaded ont he basis of cookie which was set by styleSwitcher.js. Another function set a cookie whenever page is unloaded so that next time when page is loaded it gets correct CSS title.
