9. Adding and Laying Out the Three Lower Panes

How to build Skins for DNN 6.x

In this DotNetNuke training series we show you how to convert a Photoshop document (or a PSD) into a skin for DotNetNuke 6.x

We will be covering the entire process from start to finish, including how to slice up the PSD, how to export the individual images, creating the skin div structure and using CSS to layout each individual skin element.

We walk you through how to convert the html layout into a working DotNetNuke skin by adding content panes and skin tokens, we’ll create a few custom containers and we’ll also implement and style the new DDR menu system. We will be implementing several modern CSS3 techniques to achieve the look quickly and efficiently.

The tutorial begins by setting up the skin file and creating div tags and CSS to layout the main sections of the skin, We then show you how to slice up the PSD into individual background images.

Following this we show you how to add some standard DotNetNuke Skin Tokens and we create three custom containers. The finishing touches include CSS3 rounded corners and some custom styling of the DDR menu system using the Superfish template.

You will require the following software to complete this tutorial:

• An installation of DotNetNuke 6.x installed locally or on a remote server
• Adobe Photoshop
• Microsoft Visual Web Developer is recommended (free) or another suitable text/HTML editor

This video contains:

• Creating the div structure for the three lower panes
• Adding the three lower content panes
• Adding modules to the lower panes
• Creating the CSS layout for the lower panes
• Using floats to position divs
• Sizing the div elements to fit beside each other
• Adding a break tag to clear the floats