How to create custom skin – tutorial

custom-skin

Author: Marta Szymanska

-

Introduction

In this short lesson you will learn how to add a skin and personalize its settings so that you can get completely original skin template for your website.

What exactly you will learn:

  • How to set new values in the custom skin map
  • Which keys and values in the map are responsible for which elements of the website
  • How does the skin in the MDB package work
  • How to add and use custom variables in your skin
  • How you can easily compile your changes with MDB Gulp

Environment

To use create custom skin very easy and fast, I recommend you to use the Gulp version of MDB package and then install necessary plugins as it is said in our Bootstrap Gulp tutorial.

Gulp tool

If you don't know how to install and use Gulp in your package, please go to the Bootstrap Gulp tutorial.

1. Arrangements

In the console, open your MDB Gulp package and start gulp mdb-go command to prepare the environment to compiling SCSS to CSS files.

Next, go to the index.html file in your package, copy and paste code below:



      <!--Double navigation-->
      <header>

        <!-- Sidebar navigation -->
        <div id="slide-out" class="side-nav sn-bg-4 fixed">
          <ul class="custom-scrollbar">
            <!-- Logo -->
            <li>
              <div class="logo-wrapper waves-light">
                <a href="#"><img src="https://mdbootstrap.com/img/logo/mdb-transparent.png" class="img-fluid flex-center"></a>
              </div>
            </li>
            <!--/. Logo -->
            <!--Social-->
            <li>
              <ul class="social">
                <li><a href="#" class="icons-sm fb-ic"><i class="fa fa-facebook"> </i></a></li>
                <li><a href="#" class="icons-sm pin-ic"><i class="fa fa-pinterest"> </i></a></li>
                <li><a href="#" class="icons-sm gplus-ic"><i class="fa fa-google-plus"> </i></a></li>
                <li><a href="#" class="icons-sm tw-ic"><i class="fa fa-twitter"> </i></a></li>
              </ul>
            </li>
            <!--/Social-->
            <!--Search Form-->
            <li>
              <form class="search-form" role="search">
                <div class="form-group md-form mt-0 pt-1 waves-light">
                  <input type="text" class="form-control" placeholder="Search">
                </div>
              </form>
            </li>
            <!--/.Search Form-->
            <!-- Side navigation links -->
            <li>
              <ul class="collapsible collapsible-accordion">
                <li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-chevron-right"></i> Submit blog<i class="fa fa-angle-down rotate-icon"></i></a>
                  <div class="collapsible-body">
                    <ul class="list-unstyled">
                      <li><a href="#" class="waves-effect">Submit listing</a>
                      </li>
                      <li><a href="#" class="waves-effect">Registration form</a>
                      </li>
                    </ul>
                  </div>
                </li>
                <li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-hand-pointer-o"></i> Instruction<i class="fa fa-angle-down rotate-icon"></i></a>
                  <div class="collapsible-body">
                    <ul class="list-unstyled">
                      <li><a href="#" class="waves-effect">For bloggers</a>
                      </li>
                      <li><a href="#" class="waves-effect">For authors</a>
                      </li>
                    </ul>
                  </div>
                </li>
                <li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-eye"></i> About<i class="fa fa-angle-down rotate-icon"></i></a>
                  <div class="collapsible-body">
                    <ul class="list-unstyled">
                      <li><a href="#" class="waves-effect">Introduction</a>
                      </li>
                      <li><a href="#" class="waves-effect">Monthly meetings</a>
                      </li>
                    </ul>
                  </div>
                </li>
                <li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-envelope-o"></i> Contact me<i class="fa fa-angle-down rotate-icon"></i></a>
                  <div class="collapsible-body">
                    <ul class="list-unstyled">
                      <li><a href="#" class="waves-effect">FAQ</a>
                      </li>
                      <li><a href="#" class="waves-effect">Write a message</a>
                      </li>
                      <li><a href="#" class="waves-effect">FAQ</a>
                      </li>
                      <li><a href="#" class="waves-effect">Write a message</a>
                      </li>
                      <li><a href="#" class="waves-effect">FAQ</a>
                      </li>
                      <li><a href="#" class="waves-effect">Write a message</a>
                      </li>
                      <li><a href="#" class="waves-effect">FAQ</a>
                      </li>
                      <li><a href="#" class="waves-effect">Write a message</a>
                      </li>
                    </ul>
                  </div>
                </li>
              </ul>
            </li>
            <!--/. Side navigation links -->
          </ul>
          <div class="sidenav-bg mask-strong"></div>
        </div>
        <!--/. Sidebar navigation -->
      
        <!-- Navbar -->
        <nav class="navbar fixed-top navbar-toggleable-md navbar-expand-lg scrolling-navbar double-nav">
          <!-- SideNav slide-out button -->
          <div class="float-left">
            <a href="#" data-activates="slide-out" class="button-collapse"><i class="fa fa-bars"></i></a>
          </div>
          <!-- Breadcrumb-->
          <div class="breadcrumb-dn mr-auto">
            <p>Material Design for Bootstrap</p>
          </div>
          <ul class="nav navbar-nav nav-flex-icons ml-auto">
            <li class="nav-item">
              <a class="nav-link"><i class="fa fa-envelope"></i> <span class="clearfix d-none d-sm-inline-block">Contact</span></a>
            </li>
            <li class="nav-item">
              <a class="nav-link"><i class="fa fa-comments-o"></i> <span class="clearfix d-none d-sm-inline-block">Support</span></a>
            </li>
            <li class="nav-item">
              <a class="nav-link"><i class="fa fa-user"></i> <span class="clearfix d-none d-sm-inline-block">Account</span></a>
            </li>
            <li class="nav-item dropdown">
              <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                Dropdown
              </a>
              <div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdownMenuLink">
                <a class="dropdown-item" href="#">Action</a>
                <a class="dropdown-item" href="#">Another action</a>
                <a class="dropdown-item" href="#">Something else here</a>
              </div>
            </li>
          </ul>
        </nav>
        <!-- /.Navbar -->
      
      </header>
      <!--/.Double navigation-->
      
      <!--Main layout-->
      <main>
      
        <div class="container-fluid text-center">
      
          <!--Card-->
          <div class="card card-cascade wider reverse my-4 pb-5">
            <!--Card image-->
            <div class="view view-cascade overlay wow fadeIn">
              <img src="https://mdbootstrap.com/img/Photos/Slides/img%20(1).jpg" class="img-fluid">
              <a href="#!">
                <div class="mask rgba-white-slight"></div>
              </a>
            </div>
            <!--/Card image-->
            <!--Card content-->
            <div class="card-body card-body-cascade text-center wow fadeIn" data-wow-delay="0.2s">
              <!--Title-->
              <h4 class="card-title"><strong>My adventure</strong></h4>
              <h5 class="blue-text"><strong>Photography</strong></h5>
              <p class="card-text">Sed ut perspiciatis unde omnis iste natus sit voluptatem accusantium doloremque laudantium, totam rem aperiam.
              </p>
              <a class="btn btn-primary btn-lg">Primary button</a>
              <a class="btn btn-secondary btn-lg">Secondary button</a>
              <a class="btn btn-default btn-lg">Default button</a>
            </div>
            <!--/.Card content-->
          </div>
          <!--/.Card-->
      
        </div>
      
      </main>
      <!--/Main layout-->
      
      <!--Footer-->
      <footer class="page-footer text-center text-md-left pt-4">
      
        <!--Footer Links-->
        <div class="container-fluid">
          <div class="row">
            <!--First column-->
            <div class="col-md-3">
              <h5 class="text-uppercase font-weight-bold mb-4">Footer Content</h5>
              <p>Here you can use rows and columns here to organize your footer content.</p>
            </div>
            <!--/.First column-->
            <hr class="w-100 clearfix d-md-none">
            <!--Second column-->
            <div class="col-md-2 mx-auto">
              <h5 class="text-uppercase font-weight-bold mb-4">Links</h5>
              <ul class="list-unstyled">
                <li><a href="#!">Link 1</a></li>
                <li><a href="#!">Link 2</a></li>
                <li><a href="#!">Link 3</a></li>
                <li><a href="#!">Link 4</a></li>
              </ul>
            </div>
            <!--/.Second column-->
            <hr class="w-100 clearfix d-md-none">
            <!--Third column-->
            <div class="col-md-2 mx-auto">
              <h5 class="text-uppercase font-weight-bold mb-4">Links</h5>
              <ul class="list-unstyled">
                <li><a href="#!">Link 1</a></li>
                <li><a href="#!">Link 2</a></li>
                <li><a href="#!">Link 3</a></li>
                <li><a href="#!">Link 4</a></li>
              </ul>
            </div>
            <!--/.Third column-->
            <hr class="w-100 clearfix d-md-none">
            <!--Fourth column-->
            <div class="col-md-2 mx-auto">
              <h5 class="text-uppercase font-weight-bold mb-4">Links</h5>
              <ul class="list-unstyled">
                <li><a href="#!">Link 1</a></li>
                <li><a href="#!">Link 2</a></li>
                <li><a href="#!">Link 3</a></li>
                <li><a href="#!">Link 4</a></li>
              </ul>
            </div>
            <!--/.Fourth column-->
          </div> -->
        <!-- </div>
        <!--/.Footer Links-->
      
        <hr>
      
        <!--Call to action-->
        <div class="call-to-action text-center my-4">
          <ul class="list-unstyled list-inline">
            <li class="list-inline-item">
              <h5>Register for free</h5>
            </li>
            <li class="list-inline-item"><a href="" class="btn btn-primary">Sign up!</a></li>
          </ul>
        </div>
        <!--/.Call to action-->
      
        <hr>
      
        <!--Social buttons-->
        <div class="social-section text-center">
          <ul class="list-unstyled list-inline">
            <li class="list-inline-item"><a class="btn-floating btn-fb"><i class="fa fa-facebook"> </i></a></li>
            <li class="list-inline-item"><a class="btn-floating btn-tw"><i class="fa fa-twitter"> </i></a></li>
            <li class="list-inline-item"><a class="btn-floating btn-gplus"><i class="fa fa-google-plus"> </i></a></li>
            <li class="list-inline-item"><a class="btn-floating btn-li"><i class="fa fa-linkedin"> </i></a></li>
            <li class="list-inline-item"><a class="btn-floating btn-git"><i class="fa fa-github"> </i></a></li>
          </ul>
        </div>
        <!--/.Social buttons-->
      
        <!--Copyright-->
        <div class="footer-copyright py-3 text-center">
          <div class="container-fluid">
            © 2018 Copyright: <a href="http://www.MDBootstrap.com"> MDBootstrap.com </a>
          </div>
        </div>
        <!--/.Copyright-->
      
      </footer>
      <!--/.Footer-->

    


        // SideNav Button Initialization
        $(".button-collapse").sideNav();
        // SideNav Scrollbar Initialization
        var sideNavScrollbar = document.querySelector('.custom-scrollbar');
        Ps.initialize(sideNavScrollbar);

    

To the <body> add this classes: fixed-sn test-skin.



        <body class="fixed-sn test-skin">

    

You should see a double navigation with sidenav and navbar and also the reverse cascading card and the footer with buttons. For now, every component has no colour but we will fix it in a moment.

Now, got to /scss/pro/_variables.scss, /scss/pro/_skins.scss, /scss/_custom-skin.scss and open those files.

In the _variables.scss please find "skins" word. You can see there is an object with a lot of keys and values. In the same way, you will create your own object which you use for the loop, which you can find in _skins.scss file.

Ok, please, close _variables.scss and _skins.scss files and go to _custom-skin.scss file.

In the _custom-skin.scss file you can see an object. Please, change default #fff color to your own colors and save changes. See an example below:

As you can see, you can use hex, rgba colors and variables as values in the skin object.

After saving your changes, you've seen a beautiful, fully customized template that probably reflects your style.

Is it so easy, right?

A few tips for the end:

  • When you change the name of class for your skin in the body tag, please, remember change it also in the object in _custom-skin.scss file.
  • If you want to see which components and elements change under the influence of skin, please, go to /scss/pro/_skins.scss and analyze whole each loop where you can find every single class.
  • If you want to read more about skins, please go to their documentation page.
  • If you want to know how to use MDB Gulp tool, please visit its tutorial page.
  • You can use your own variables in your skin.

To do that, go to /scss/_custom-variables.scss, create color variables and save the file.

Then, use those variables in the skin object.

Congratulations! You've just created your pretty custom skin.


Rate this lesson

Spread the word:
Do you need help? Use our support forum

About the author

Sign up to follow your progress and get additional benefits