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.
Download Script 
Live DemoJavascript 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>
<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
Great, this will come in very useful for me, thankyou for the script and tutorial. Regards from Josh
ReplyDeletethanks a lot bro,
ReplyDeleteam new to j query, need to study alot. let me try ur tutorial.
nice work. what's left is adding cookie so that the changes can be permanent or loaded from previous selected.
ReplyDeleteit would be great if you place a colorpicker there next to each field.....
ReplyDeletenice
ReplyDeleteniceeeeeeeeeeeeeeeeeeeeeeee
ReplyDeleteHow about background images? That would be nice.
ReplyDelete