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" >

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);


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"/>

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


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

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

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

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

  5. niceeeeeeeeeeeeeeeeeeeeeeee

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