Changing design colors with jquery
Wall Script
Wall Script
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
web notification

7 comments:

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

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

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

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

    ReplyDelete
  5. niceeeeeeeeeeeeeeeeeeeeeeee

    ReplyDelete
  6. How about background images? That would be nice.

    ReplyDelete

mailxengine Youtueb channel
Make in India
X