Changing the colors


The MDesign theme is set up in such a way that it is easy to change. This includes changing the colors of sections in the theme

To accomplish this you have to edit the skin files which are the following files found in the root of the skins install folder:

  • adjust Home skin : Home.ascx
  • adjust Inner skin : skin.ascx
  • adjust 404 skin : 404Skin.ascx

To show you to change a color of a section I'll be changing the nav bar from a grey color to a dark brown color. This will be done in the 'skin.ascx'

The first thing you will need to do is to open up the skin.ascx' file and look for the following html section, it should be found at the top of the code:

<!-- Start : Header Section -->
    <!-- Navigation -->        
    <nav class="navbar navbar-fixed-top controlbarfix z-depth-1 grey darken-3">

        <!-- Start : Top bar -->
        <div class="topbar rgba-black-light">
            <div class="container">
                <!--#include file = "includes/topbar.ascx" -->
        </div><!--// End Top bar -->
        <div class="clearfix" />

        <!-- Start : nav bar -->
        <div class="container">
            <!--#include file = "includes/navbar.ascx" -->
        </div><!--// End : nav bar -->
        <div class="clearfix" />
    </nav><!-- ./ Navigation -->
</header><!-- End : Header Section -->

To change the color we need to change to following line from:

<nav class="navbar navbar-fixed-top controlbarfix z-depth-1 grey darken-3">


<nav class="navbar navbar-fixed-top controlbarfix z-depth-1 brown darken-4">

If you want more depth to the nav bar you would change the 'z-depth' value like this:

<nav class="navbar navbar-fixed-top controlbarfix z-depth-3 brown darken-4">

All colors that are avialable to use can be found by clicking here. for more information about depth click here.

To change the color of text or a Header (h1, h2 etc.) uses to same principle. for example in a header tag to change the color from dark grey (standard) to purple, you would add a class to the tag as follow:

 <h1 class="deep-purple-text">Header 1</h1>