Design Changes on LIVE By using Jquery

Sample database design for User system change design colors.

Users

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

CREATE TABLE `users` (

`uid` int(11) AUTO_INCREMENT PRIMARY KEY,

`username` varchar(255) UNIQUE KEY,

`password` varchar(100),

`email` varchar(255) UNIQUE KEY,

`background` varchar(6),

`header` varchar(6),

`sidebar` varchar(6),

`footer` varchar(6),

`texts` varchar(6),

`links` varchar(6),

)

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>

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