I don't want to take too much of your time. So, I'll just explain the basics about the working of the script. The script will add or remove classes to the body element based on what list item the user clicks on. That's it. So, take a look at the demo of this simple effect by visting the link below and we'll get started...
CHANGING BG COLOR DYNAMICALLY - LIVE DEMO
1. Navigate to "Design>>Edit HTML" and make a backup of your template by clicking on the "Download full template" link at the top of the page. Once the back up is over, search for the following piece of code.
]]></b:skin>
2. Paste the following piece of code just above the line mentioned step 1.
.bg1 { background: url(BG IMAGE URL) repeat-x; background-color: #6c0000; }
.bg2 { background: url(BG IMAGE URL) repeat-x; background-color: #5A2A00; }
.bg3 { background: url(BG IMAGE URL) repeat-x; background-color: #00345B; }
.bg2 { background: url(BG IMAGE URL) repeat-x; background-color: #5A2A00; }
.bg3 { background: url(BG IMAGE URL) repeat-x; background-color: #00345B; }
3. Next, search for the following piece of code.
</head>
4. Paste the following piece of code just above the line mentioned in step 3. Save your template.
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function(){
$("li.one").click( function(){ $
("body").removeClass('bg2 , bg3').addClass("bg1");
});
$("li.two").click( function(){ $
("body").removeClass("bg1 , bg3").addClass("bg2");
});
$("li.three").click( function(){ $
("body").removeClass("bg1 , bg2").addClass("bg3");
});
});
</script>
<script type='text/javascript'>
$(document).ready(function(){
$("li.one").click( function(){ $
("body").removeClass('bg2 , bg3').addClass("bg1");
});
$("li.two").click( function(){ $
("body").removeClass("bg1 , bg3").addClass("bg2");
});
$("li.three").click( function(){ $
("body").removeClass("bg1 , bg2").addClass("bg3");
});
});
</script>
Note: You need not paste the first line (highlighted in orange) in the above coding if you already have the jquery file running on your blog.
5. Now, insert the following tags anywhere in your template - may be within the post editor or on the sidebar or below the content wrapper.
<ul>
<li class="one"><a href="#">Red</a></li>
<li class="two"><a href="#">Brown</a></li>
<li class="three"><a href="#">Blue</a></li>
</ul>
6. That's it! Save your template or publish the post. <li class="one"><a href="#">Red</a></li>
<li class="two"><a href="#">Brown</a></li>
<li class="three"><a href="#">Blue</a></li>
</ul>
Just hit the text of your choice - Red or Brown or Blue and enjoy the changing environment on your blog. You may change from the default colors (Red, Brown, Blue) to the ones you like, by just altering the color codes (highlighted in blue) mentioned in step 2. In fact, you can alter between your background images. To do so, just replace "BG IMAGE URL" with the URL of your background image.
I hope, I kept the logic as well as the post simple. The above code was tested to work fine on all major browsers including, but not limited to, IE, FF, Opera, Chrome and Safari. If you find any difficulties in installing the above effect, then leave a comment or ping me on gtalk. I'll help you out! Do share your opinions about the article via comments:)
