Dynamically Change Website Background Color using Bootstrap Color Picker Plugin

Hey mates ,

Its always interesting to change the layouts and styles of a website dynamically,most of the websites nowadays provides a feature of changing background color of a website dynamically.So today we will learn to dynamically change background color of a website using bootstarp color picker in this tutorial.

In this tutorial, we have used Bootstrap Color Picker plugin to create color picker. The tutorial explained in very easy steps with link to download source code.

So let’s start the coding step by step
We will have following file structure to change background color of website dynamically using Bootstrap Color Picker.

  • ┬áindex.php
  • save_change.php
  • scripts.js

Firstly include the Booststrap color plugin
As we will use Bootstrap Color Picker plugin to create color picker, so we need to include plugin files in index.php to create Color Picker. We will also include scripts.js to create color picker on page load.

1
2
<script src="bootstrap-colorpicker/dist/js/bootstrap-colorpicker.js"></script>
<script src="scripts/scripts.js"></script>

Now we will create HTML for color picker
In index.php, we will create HTML to create color picker to change background color and reset background color.

1
2
3
4
5
6
7
8
9
10
11
<div class="container">
    <h2 align="center"> Dynamically Changing Background Color using Bootstrap Color Picker</h2>
    <div class="row">
        <div class="col-md-4 col-md-offset-2 well">
            <a class="btn btn-default" id="change-color">Change background color</a>
            <a class="btn btn-default" id="reset-color">Reset Default</a>      
        </div>
    </div> 
   
   
</div>

After this we will write code to change color dynamically
Now in scripts.js, we will handle functionality to change background color dynamically when choose color from Color Picker. The Ajax request also sends to server side save_change.php with changed color value to save changed color into MySQL database.

1
2
3
4
5
6
7
8
9
10
11
12
13
$('#change-color').colorpicker().on('changeColor', function(e) {
console.log( e.color.toString('rgba'));
var background_color = e.color.toString('rgba');
$('body')[0].style.backgroundColor = background_color;
$.ajax({
method: "POST",
url: "save_change.php",
data: { change_color:1, background: background_color}
})
.done(function(response) {
// display change color message
});
});

We will also handle functionality to reset background color when Reset Default button clicked. The Ajax request also send to server side save_change.php to save default background color into MySQL database.

1
2
3
4
5
6
7
8
9
10
$( "#reset-color" ).click(function() {
$('body')[0].style.backgroundColor = "";
$.ajax({
method: "POST",
url: "save_change.php",
data: {change_color:1, background: "#fff"}
})
.done(function(response) {
});
});

Finally in save_change.php, we can write your MySQL update query to update changed background color according to your requirement.

1
2
3
4
5
6
<?php
include_once("../db_connect.php");
if(isset($_POST['change_color'])) {
// Write update MySQL query to update background color in MySQL database table
}
?>

This is how we can easily change background color of a website and can store it in database according to the requirement.
This is a very easy and popular way of changing dynamically backround color
Hope this tutorial is beneficial for you guys and will help our new developers.
You can download the source code here
For more tutorials keep reading our tutorials
Because Hurdles aren’t really hurdles.

Attachments

Be First to Comment

Leave a Reply

Your email address will not be published. Required fields are marked *