12. Creating the Horizontal Line and Adding Breadcrumbs and Search

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:

• Allowing the footer pane to stretch
• Creating the horizontal gradient line for the container
• Advanced background image placement
• How to implement the breadcrumbs skin token
• How to implement the search box
• Styling the breadcrumb and search links