Live Design Changing with Jquery

In this post I want to explain how to change design colors like Twitter UI setting.  We added user control system to manage own template design. It’s useful feature for your web projects to providing option to the end-user can customize his page template. This script divided into four parts Jquery, PHP, CSS and HTML.

Sample database design for User system change design colors.

Color_Users
color_users table contains user management details username, password, email, backgourd, header, sidebar, foooter, texts and links.

CREATE TABLE IF NOT EXISTS `color_users` (
  `user_id` int(11) NOT NULL AUTO_INCREMENT,
  `username` varchar(45) DEFAULT NULL,
  `password` varchar(45) DEFAULT NULL,
  `email` varchar(45) DEFAULT NULL,
  `background` varchar(6) DEFAULT NULL,
  `header` varchar(6) DEFAULT NULL,
  `sidebar` varchar(6) DEFAULT NULL,
  `footer` varchar(6) DEFAULT NULL,
  `texts` varchar(6) DEFAULT NULL,
  `links` varchar(6) DEFAULT NULL,
  PRIMARY KEY (`user_id`),
  UNIQUE KEY `username` (`username`)
)

Dumping data for table `color_users`

INSERT INTO `color_users` (`user_id`, `username`, `password`, `email`, `background`, `header`, `sidebar`, `footer`, `texts`, `links`) VALUES
(1, 'quickmysupport', 'abc', 'info@quickmysupport.com', '615161', '7de316', '629fe0', '14dbb6', '050405', '070fad');

Download script index.php spited into four parts.

JavaScript
$(“.colorpicker_submit”).click(function(){})– colorpicker_submit is the class name of Done button in colorpicker. Using $(“Input #ID”).val() – calling the input tag values.

 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/
1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="js/colorpicker.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
$('.color').ColorPicker({
onSubmit: function(hsb, hex, rgb, el) {
$(el).val(hex);
$(el).ColorPickerHide();
},
onBeforeShow: function () {
$(this).ColorPickerSetColor(this.value);
}
})
.bind('keyup', function(){
$(this).ColorPickerSetColor(this.value);
});

$(".colorpicker_submit").click(function()
{
var B = $("#background").val();
var sidebar = $("#sidebarinput").val();
var header = $("#headerinput").val();
var footer = $("#footerinput").val();
var T = $("#textinput").val();
var L = $("#linkinput").val();
$("#header").css("background-color", "#"+header);
$("#main_right").css("background-color", "#"+sidebar);
$("#footer").css("background-color", "#"+footer);
$('body').css("background-color", "#"+B);
$('#container').css("color", "#"+T);
$('#container a').css("color", "#"+L);
});
});
</script>

PHP
Contains PHP code. Inserting form post values into Users tables where user login session_id and getting records form Users table.

<?php
include('db.php');
if($_SERVER["REQUEST_METHOD"] == "POST")
{
$background=$_POST['background'];
$header=$_POST['header'];
$sidebar=$_POST['sidebar'];
$footer=$_POST['footer'];
$links=$_POST['links'];
$text=$_POST['text'];
mysql_query("UPDATE color_users SET background='$background',header='$header',sidebar='$sidebar',footer='$footer',texts='$text',links='$links' WHERE user_id='$session_id'");
}
$sql=mysql_query("SELECT background,header,sidebar,footer,texts,links FROM color_users WHERE uid='$session_id'");
$row=mysql_fetch_array($sql);
$background=$row['background'];
$header=$row['header'];
$sidebar=$row['sidebar'];
$footer=$row['footer'];
$text=$row['texts'];
$links=$row['links'];
?>

CSS
Dynamic CSS.

<style>
*{ margin:0px; padding:0px}
body
{
background-color:#<?php echo $background; ?>;
font-family:Arial, Helvetica, sans-serif;
}
#container
{
margin:0 auto;
width:800px;
color:#<?php echo $text; ?>;
}
#container a
{
color:#<?php echo $links; ?>;
}
#header
{
background-color:#<?php echo $header; ?>;
height:100px;
margin-top:15px;
}
#main
{
min-height:600px;
overflow:auto;
margin-top:10px;
}
#main_left
{
background-color:#ffffff;
min-height:600px;
width:590px;
margin-right:10px;
overflow:auto;
float:left;
}
#main_right
{
background-color:#<?php echo $sidebar; ?>;
min-height:600px;
width:200px;
overflow:auto;
float:left;
}
#footer
{
background-color:#<?php echo $footer; ?>;
height:70px;
margin-top:10px;
}
</style>

HTML
Contains HTML and PHP code.

<body>
<div id="container">
<div id="header"></div>
<div id="main">
<div id="main_left">
<form method="post" action="" />
Background:
<input type="text" name="background" id="background" class="color" value="<?php echo $background; ?>" readonly="readonly"/>
Header:
<input type="text" name="header" class="color" id="headerinput" value="<?php echo $header; ?>" readonly="readonly" />
Sidebar:
<input type="text" name="sidebar" class="color" id="sidebarinput" value="<?php echo $sidebar; ?>" readonly="readonly"/>
Footer:
<input type="text" name="footer" class="color" id="footerinput" value="<?php echo $footer; ?>" readonly="readonly"/>
Text:
<input type="text" name="text" class="color" id="textinput" value="<?php echo $text; ?>" readonly="readonly"/>
Links:
<input type="text" name="links" class="color" id="linkinput" value="<?php echo $links; ?>" readonly="readonly"/>
<input type="submit" value=" Save Changes " class='savebutton'/>
</form>
</div>
<div id="main_right">
</div>
</div>
<div id="footer">
</div>
</div>
</body>

If you enjoyed this tutorial and learned something from it, please consider sharing it with our friends and followers! Also like to my facebook page to get more awesome tutorial each week!