Changing boxed to full width

The DnnContra 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:

  • Home skin : Home.ascx
  • Inner skin : skin.ascx
  • 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-fluid">

or

    
<div class="container">

To set the section to a boxed format you would change the section to container and for a full with section you would use the container-fuid class.

If you want the whole look to be boxed including menu's and footer you can wrap the whole html of the theme in a container div class. To do this you would add the following line just above the 'header section' and make sure that you add a closing div at the bottom of the skin.

    
<div class="container">
<!-- Start Header Section -->
<div class="hidden-header">
the rest of the skin code.... 
 
    <!--#include file="layouts/default/_includes-bottom.ascx" -->
<div>