It is an interesting thing that if we see some changes on a website, both content wise and layout or colour wise. So I decided to add a colour scheme to my blog.So the visitors can select a colour scheme from these buttons. Have you notice the 6 buttons in this page on the header portion?

First of all I have placed 6 buttons on the header portion of this blog for the visitors to select their choice. viz
1. SeaGreen, 2. Brown, 3.Blue, 4. Orange, 5. Green, 6. Pink.

So the html will look like this.

1
2
3
4
5
6
7
8

<div id="skin-select">
<a href="#" title="SeaGreen" class="seagreen">SeaGreen</a>
<a href="#" title="Brown" class="brown">Brown</a>
<a href="#" class="blue" title="Blue">Blue</a>
<a href="#" title="Orange" class="orange">Orange</a>
<a href="#" title="Green" class="green">Green</a>
<a href="#" title="Pink" class="pink">Pink</a>
</div>

2nd Step
We need to make the changes on CSS file. I have added skin.css to my main css via import statement like @import url(“skin.css”);

In the skin.css I have added the colors where ever I need to change the background color, font color or border.

3rd step
Now come the javascript part. I am using the JQuery frame work. I like Jquery very much. So we need to include the jquery framework to our page and we need to write custom javascript code for its working. For that I added script.js to my page.

In the script.js I added the following code in the document.ready function.
$("#skin-select a").click(function(){
if($("body").attr("class")){
$("body").removeClass($("body").attr("class"));
}$("body").addClass($(this).attr("class"));
});

What this code will do?

When clicking each button it will add a class to body. If the body already has a class, it will remove the existing class and add a new class with new color name.

If your css is right it will work fine on each click.

What is next?

If you close the browser and open the it again with the same url, you can see the default colour scheme only. But I would like to see the colour scheme which I have recently opted.

For that we need to save this information in your computer. I have added a Jquery plugin for saving this colour scheme to the computer. A cookie is information that a Web site puts on your hard disk so that it can remember something about you at a later time. So I have added a jquery plugin for saving cookie.

Now we can save the latest color scheme to our visitor’s machine. So next time when he opens the site he can see the latest colour which he has selected in the last.

So the final code will look like this.
$(document).ready(function() {
if($.cookie('theme_color')!= null)
{
var coockiecolor = $.cookie('theme_color');
$("body").addClass(coockiecolor);
}
$("#skin-select a").click(function(){
if($("body").attr("class")){
$("body").removeClass($("body").attr("class"));
}
$("body").addClass($(this).attr("class"));
var colorname = $(this).attr("class");
$.cookie('theme_color', colorname, { path: '/', expires: 10 });return false;});
});

Inside the document.ready function first it will check whether any cookie saved for theme or not. If it is available it will take the theme information from the cookie. You can check the documentation about jQuery cookie in detail can be find here.

What do you think now? Is it easy? Waiting for your valuable feedback.