Changing from box to full width

 

The MDesign theme is set up in such a way that it is easy to change. This includes changing the layout from box to full width.

It is possible to make the whole them boxed or full width, or you could only change certian section like the page title header or footer.

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

If you open the 'Home.ascx' file and browse the code you will notice that there are many html tags like below:


<div class="container">

Say you want to change the 'Page title header' to full width, first find in the html of the Home.ascx file where the header is displayed, it should look like below:


<!-- Start : Page header -->
<section class="page-title-header deep-orange">
    <div class="container">
        <!--#include file = "includes/page-title-header.ascx" -->
    </div>
</section>
<!--// End : Page header -->

To change this section to full width you would change the 'container' class to container-fluid' like below:


<!-- Start : Page header -->
<section class="page-title-header deep-orange">
    <div class="container-fluid">
        <!--#include file = "includes/page-title-header.ascx" -->
    </div>
</section>
<!--// End : Page header -->

To change the whole layout to full width you would change every html tag with the 'container' to 'container-fluid' like below:


<div class="container-fluid">

If you want continuity through your site you would also pass the changes on to all skin files.