How to Add Live HTML Customizer to Demo Template?

Have you ever seen any HTML template demo? You most probably see that they a a live customizer that will let you change the color skin or any other layouts. If you want to know how it’s made, This HTML live customizer tutorial will guide you through the process of creating live customizer. We will create an option that float to left side of the page and when the user hover on it, it must show a live color changer options that change the page color the way you want.

Basic HTML Live Customizer

Let’s start with the basic idea of having a page that have multiple color skins. For this example, let’s have four colors. Later on you can add more colors depending on your project. We will use jQuery to add link tag dynamically.

Through there are different approach for make html live customizer, we will assume that you have separate style sheets for each color.

Let’s say we have 4 files, red.css, blue.css, green.css and pink.css. When user select red, it will add a link tag and reference it to red.css file.

Starting by creating html markup.

    <div class="skins">
      <ul class="skin-colors">
        <li data-skin="red" style="background-color: red" class="active"></li>
        <li data-skin="green" style="background-color: green"></li>
        <li data-skin="blue" style="background-color: blue"></li>
        <li data-skin="pink" style="background-color: pink"></li>
      </ul>
      <span class="skin-toggler"><i class="fa fa-cog"></i></span>
    </div>

To make if flow on the right side of the page use this css. Of course you can customize it they way you are comfortable with. Note: we are using font awesome for icons.

      .skins {
        position: fixed;
        top: 190px;
        left: -222px;
        transition: .3s ease-in-out;
      }

      .skins:hover {
        left: 0;
      }

      .skin-colors {
        list-style: none;
        padding: 20px;
        margin: 0;
        background-color: #fff;
        width: 222px;
        border: 1px solid #e7e7e7;
      }

      .skin-colors li {
        position: relative;
        display: inline-block;
        width: 34px;
        height: 34px;
        cursor: pointer;
        margin: 4px;
        transition: .3s ease-in-out;
      }

      .skin-colors li:hover {
        opacity: .7;
      }

      .skin-colors li.active::before {
        content: "\f00c";
        font-family: FontAwesome;
        font-size: 20px;
        width: 34px;
        line-height: 34px;
        text-align: center;
        position: absolute;
        color: #fff;
      }

      .skin-toggler {
        position: absolute;
        display: inline-block;
        width: 50px;
        height: 50px;
        right: -49px;
        top: 0;
        background-color: #fff;
        font-size: 30px;
        text-align: center;
        line-height: 50px;
        color: #888;
        border: 1px solid #e7e7e7;
        border-left: 0;
      }

And now, the jQuery part. As mentioned, we assume you have separate styles.

      $(function() {

        $("head").append('<link id="skin-css" rel="stylesheet">');
        $('.skin-colors li').on('click', function() {
          $('.skins li').removeClass('active');
          $(this).addClass('active');
          $('#skin-css').attr('href', 'css/skins/'+ $(this).data('skin') +'.css');
        });
      });

I hope you have a basic knowledge of JavaScript and jQuery.

Here is the live example of our html live customizer.

[codepen_embed height=”420″ theme_id=”dark” slug_hash=”MeWEEV” default_tab=”result” user=”Hujjat”]See the Pen <a href=’http://codepen.io/Hujjat/pen/MeWEEV/’>Live customizer practice</a> by Hujjat Nazari (<a href=’http://codepen.io/Hujjat’>@Hujjat</a>) on <a href=’http://codepen.io’>CodePen</a>.[/codepen_embed]

It will work as we expected, but for our demo we will change it a bit. Let’s change the background color with jQuery instead of referencing to external css file.

Here is how we can do that.

$(function() {
      $('.skin-colors li').on('click', function() {
          $('.skins li').removeClass('active');
          $(this).addClass('active');
          $('body').css('background-color', $(this).data('skin'));
        });
 });

Here is our final html live customizer demo.

[codepen_embed height=”456″ theme_id=”dark” slug_hash=”JKjrMV” default_tab=”js,result” user=”Hujjat”]See the Pen <a href=’http://codepen.io/Hujjat/pen/JKjrMV/’>Live customizer practice 2</a> by Hujjat Nazari (<a href=’http://codepen.io/Hujjat’>@Hujjat</a>) on <a href=’http://codepen.io’>CodePen</a>.[/codepen_embed]

Conclusion

HTML live customizer is something that every customer want to see on your projects, so it was how we can apply it html template. It’s not only HTML live customizer, but you can use for WordPress themes in the same ways. We hope it has been informative for you, if you have any questions related to this article, feel free to comment it bellow. 🙂