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:

• Using DotNetNuke Skin Tokens
• Adding the logo, login and user skin tokens
• Skin token tagname, ID and runat=server
• How to implement the DDR menu
• Introduction to DDR menu templates
• How to specify a template for the DDR menu
• How to add panes to a DotNetNuke skin
• Adding the header pane
• Adding the content pane
• Creating a test page for the new skin
• Applying the new skin
• Testing the skin