This project is read-only.

Customizing the Panes of the content area and footer area of the DnnC DnnFoundation Skin

We don’t believe in placing all the variations of every possible pane layout there is for a skin. What we have done is to separate the content areas into a separate file so that you can decide:

  • What Dnn Panes you would like to use
  • What order the Dnn Panes appear
  • What happens when the skin moves through the responsive sizes
  • What names you want to use for the Dnn Panes

The only pane that is not in the configuration pane file is the ‘ContentPane’.

To edit the Dnn Pane layout you need to open the ‘contentAreas.inc’ file found in the ‘includes’ folder in the DnnFoundation skin.

To edit the Dnn Pane layout of the footer you need to open the ‘footerContent.inc’ file found in the ‘includes’ folder in the DnnFoundation skin. 

The grid system uses the ZURB Foundation Grid, information on how to the grid system can be found here.  There are also Utility class which help you align, hide and move Panes for responsive, this information can be found here.

With the ZURB Foundation grid system you can create powerful multi-device layouts quickly and easily with the default 12-column, nest-able Foundation grid. If you're familiar with grid systems.

If you look at the code in the ‘contentAreas.inc’ file you will see html like below:

<div class="row">

    <div class="medium-6 columns"><div id="Left50Pane" runat="server"></div></div>

    <div class="medium-6 columns"><div id="Right50Pane" runat="server"></div></div>

</div>

Refer to the documentation on the ZURB Foundation site to create you content layout.

Add Dnn content Panes by adding a div with a unique ID and a ‘runat=”server”’ tag. Name the Dnn Panes lke this:

*paneName*Pane : replace *paneName* with you unique pane name.

IMPORTANT: It is Important to use unique names for you content also make sure you don’t use the name “ContentPane”, this is used within the skin and used by all the admin and host functionality.

Within the ‘contentAreas.inc’ you can also change the order of the columns by moving the <div class=”row”>contents within</div> to the desired position.

The same principle applies to the ‘footerContent.inc’ file.

« Back to Index

Last edited Jul 26, 2014 at 1:24 PM by gmBarlow, version 1