10. Styling the DDR Superfish Menu

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:

• Positioning the login and user links
• Opening the DDR menu template CSS file
• Slicing and exporting the menu background images
• How to apply styling and background images to the superfish DDR menu
• Changing the menu text link color
• Adding the main menu border and rounded corners