2. Creating the Div Structure and Creating the Div Tag CSS Code

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:

• Installing the skin templates
• Introduction to required skin code including the admin control panel
• Creating the div structure
• Adding div dimensions using CSS
• Adding div background colours
• How to center a div tag within the page
• Adding bottom margins to create gaps between div tags