Admin dashboard – lesson 3


Step 1 - Color palette

As I've 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 Colors Documentation to learn more about the full palette of more than 300 available colors.

For example, add .red class to the side-nav element.


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

Of course, it looks awful, but I just want to present you how easy you can customize any elements in your project.

Alright, 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 composition designed by our best designers, to perfectly fit each other.

But before we use skin, we have to remove .indigo class from navbar and .blue class from footer. We've already removed .red class from side-nav.

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


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

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

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

Apart from Navigation, skin affects also 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 looks even more impressive. To achieve it we'll use MDB backgrounds.

Within the side-nav element, below unordered list ( ul ) with the list, place a div with the mask.

Then add .sn-bg-4 class to the side-nav element.


<!-- Sidebar navigation -->
<div id="slide-out" class="side-nav fixed sn-bg-4">
    <ul class="custom-scrollbar list-unstyled">
        [...]
    </ul>

    <!-- Mask -->
    <div class="sidenav-bg mask-strong"></div>

</div>
<!--/. Sidebar navigation -->

Save the file and refresh the browser. Don't you think our SideNav looks much bette 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. Remove it:


<!--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 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 looks fine.

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

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


.side-nav .search-form input[type=text] {
margin-top: 0;
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 of the Navigation

We can enhance our Navbar by adding a smooth animation on scroll.

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


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

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


main {
height: 5000px;
}
    

Now you can scroll the page and see the effect.

You can remove that code, 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 very subtle grey color.

Add the following code to style.css file:


body {
background-color: #eee;
}
    

Previous lesson Download Live preview Next lesson

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

About 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