9lessons programming blog
Loading Search
9lessons Bring Friends
Wall Script
Follow Me:
Monday, June 15, 2009

Changing design colors with jquery

This post about "how to change website theme design(colors) without refreshing page with jQuery". Have you tried twitter settings Change design colors, you can customize the design colors. It's very useful just some lines of code, use it and add more features to your web projects.

Changing design colors with jquery

Download Script     Live Demo

Javascript Code

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" >
$(document).ready(function(){

$(".theme").keyup(function()
{
var sidebar = $("#sidebar").val();
var text = $("#text").val();
var border = $("#border").val();
var links = $("#links").val();
var background = $("#background").val();

$("#sidebar_main").css("background-color", sidebar);
$("#container").css("color", text);
$("#container a").css("color", links);
$("#sidebar_main").css("border-color", border);
$("#main").css("border-color", border);
$("#full").css("background-color", background);
});

});
</script>



HTML Code
Contains HTML Code..
<form method="post" action="">
Sidebar: <input type="text" class="theme" id="sidebar"/>
Border: <input type="text" class="theme" id="border"/>
Background:<input type="text" class="theme" id="background"/>
Links: <input type="text" class="theme" id="links"/>
Text: <input type="text" class="theme" id="text"/>
<input type="submit" value=" Submit " class="submit"/>
</form>

If you want to submit these values into database. Take a look at this link
Submit a Form without Refreshing page with jQuery and Ajax
Comments
{ 7 comments }
Anonymous said...

Great, this will come in very useful for me, thankyou for the script and tutorial. Regards from Josh

Subash said...

thanks a lot bro,
am new to j query, need to study alot. let me try ur tutorial.

shc said...

nice work. what's left is adding cookie so that the changes can be permanent or loaded from previous selected.

Mangesh said...

it would be great if you place a colorpicker there next to each field.....

Anonymous said...

nice

Anonymous said...

niceeeeeeeeeeeeeeeeeeeeeeee

Anonymous said...

How about background images? That would be nice.

Post a Comment