Skins and customization


Step 1 - Color palette

As taught in the previous tutorials, you can easily change the color of any MDB component just by adding a proper color class.

Take a look at our Colors Documentation to learn more about the full palette of more than 300 available colors.

If you want to learn how to combine colors together - read our Color combination Docs.

For example, remove .primary-color from the navbar and replace it with .red class.



<!--Navbar-->
<nav class="navbar navbar-expand-lg navbar-dark red double-nav">

    

Of course, it looks awful, but I just want to show you how easily you can customize any element in your project.

Alright, now remove .red class and save the file.

Step 2 - Skins

Instead of using custom colors on each element, we'll use MDB skins.

Skins are special color compositions designed by our best designers, to perfectly fit each other.

But before we use a skin, we have to remove the .primary-color class from the navbar and the .blue class from the footer.

Then add the .light-blue-skin class to the body.



<body class="fixed-sn light-blue-skin">

    

Save the file and refresh the browser. You will notice that the entire Navigation is now composed of nice and consistent blue colors.

Take a look at our Skins documentation. You can choose the skin you like the most and add it to the project.

Apart from the Navigation,the skin affects also the primary, secondary and default buttons.

Add these 3 buttons to the main to see the outcome:



<!--Main layout-->
<main>

    <button type="button" class="btn btn-primary">Primary</button>
    <button type="button" class="btn btn-secondary">Secondary</button>
    <button type="button" class="btn btn-default">Default</button>

</main>
<!--Main layout-->

    

After you finish playing with skins remove the buttons.

Step 3 - SideNav background

We can make our SideNav look even more impressive. To achieve this, we'll use MDB backgrounds.

Add the .sn-bg-4 class to the side-nav element.



<!-- Sidebar navigation -->
<div id="slide-out" class="side-nav fixed sn-bg-4">

    

Save the file and refresh the browser. Don't you think our SideNav looks much better now?

You can use one of 4 dedicated backgrounds:

  1. .sn-bg-1

  2. .sn-bg-2

  3. .sn-bg-3

  4. .sn-bg-4

Step 4 - customization of SideNav elements

Some of the elements of our current SideNav aren't appropriate for the Dashboard.

For example, we don't need social icons. Let's remove them:



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

    

The next thing we'll change is the Logo. It's too big right now. We'll create a custom construction and use CSS to achieve the desired result.

Replace the current logo element with the following code:



<!-- Logo -->
<li class="logo-sn waves-effect">
    <div class=" text-center">
        <a href="#" class="pl-0">
            <img src="https://mdbootstrap.com/img/logo/mdb-transparent.png" class="">
        </a>
    </div>
</li>
<!--/. Logo -->

    

Now we have to make logo image fits the wrapper.

Open the css/style.css file and set a proper padding and height to the logo:



.side-nav .logo-sn {
  padding-bottom: 1rem;
  padding-top: 1rem;
  }

  .side-nav .logo-sn img {
  height: 38px;
  }

    

Alright, the logo now looks fine.

There is one more thing we need to improve - the search box.

Add the following code to thee style.css file. It will make our search box fit the space between the logo and links. It will also add a nice rgba (partially transparent) border:



.side-nav .search-form input[type=text] {
  margin-top: 0;
  padding-top: 12px;
  padding-bottom: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.3);
  border-bottom: 1px solid rgba(255, 255, 255, 0.3);
}

    

That's it about the SideNav.

Step 5 - last improvements for our Navigation

We can enhance our Navbar by adding a smooth animation upon scrolling.

Add the fixed-top and scrolling-navbar classes to the navbar. It will make the Navbar stick to the top of the page, even when you scroll.



<!--Navbar-->
<nav class="navbar navbar-expand-lg navbar-dark fixed-top scrolling-navbar double-nav">

    

Right now our project is empty, so there is nothing to scroll. Therefore to see the outcome of our modification, we'll temporarily add this code to the style.css file:



main {
height: 5000px;
}

    

Now you can scroll the page and see the effect.

You can remove that code now, because we don't need it.

Most of the elements of our dashboard will be placed on white cards.

To provide a proper contrast and at the same time a nice design we can set a background of the body to a very subtle grey color.

Add the following code to the style.css file:



body {
  background-color: #eee;
}

    

Rate this lesson

Previous lesson Live preview Next lesson

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

About the author

User avatar
Michal Szymanski
Co-Founder at MDBootstrap & BrandFlow. Entrepreneur, UI/UX designer, marketing analyst. Dancer & nerd.
Sign up to follow your progress and get additional benefits