How to build Skins for DNN 6.x

Subscribe to the magazine

By Andy Stephenson

August 2011

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.

This series will be released gradually over the next few months.

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

You need to Subscribe as a member of DNNCreative and Login to download this video tutorial.

Video 1 – Planning the Skin and Measuring for Div Tag Dimensions

Introduction
Software requirements
Overview of included skin templates
The PSD document skin plan
Background and foreground
The layers pane
Hiding and showing layers
Introduction to div tags
Photoshop slices and measuring div dimensions

Time Length: 9min 10secs

Video 2 – Creating the Div Structure and Creating the Div Tag CSS Code

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

Time Length: 8min 57secs

Video 3 – How to Add Skin Tokens, the DDR Menu and Content Panes to a DotNetNuke Skin

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

Time Length: 6min 50secs

Video 4 – Slicing Up and Exporting Images From Photoshop

Using the Photoshop slice tool
Creating the logobar slice
Naming a slice for the image filename
Exporting the slice
The Save for Web and Devices dialog
Setting the image filetype and changing the jpeg compression setting
Setting up the image export options
Exporting directly into the skin images folder
Adding a background image to a div tag using CSS
Setting the background image repeat options and placement

Time Length: 5min 21secs

Video 5 - Slicing and Exporting the Remaining Background Images

Slicing and exporting the remaining background images
How to determine the div border color

Time Length: 6min 34secs

Video 6 – Styling and Adding Backgrounds to Div Tags

Adding the remaining background images in the CSS document
Adding borders to div tags in CSS
Implementing CSS3 rounded corners

Time Length: 5min 01secs

Video 7 – Creating a Custom DotNetNuke Container

Introduction to DotNetNuke Containers
Adding the included container template files to the DNN file system
Creating a thin slice of the container background to repeat horizontally
How to determine the container background color
Saving directly to the container image folder

Time Length: 5min 53secs

Video 8 – Adding a Module Title and Styling the Container

Creating the container div structure
How to add the module title skin token to the container
Creating H2 tags for the module title
Adding the content pane to a container
Creating H2 tags for the module title
Adding the content pane to a container
Applying and testing the new container
Adding the container background image in CSS
How to repeat the background image horizontally
Adding the container border

Time Length: 6min 09secs

Video 9 – Adding and Laying Out the Three Lower Panes

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

Time Length: 10min 33secs

Video 10 – Styling the DDR Superfish Menu

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

Time Length: 8min 45secs

Video 11 – Creating Two ‘Invisible’ Containers

Creating an ‘invisible’ container for use in the header pane
Duplicating and renaming the default container
Styling the invisible container
Creating an invisible container with no module title
Applying the new container and testing

Time Length: 8min 05secs

Video 12 – Creating the Horizontal Line and Adding Breadcrumbs and Search

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

Time Length: 5min 51secs

Video 13 – Simple Cross Browser Testing and Compatibility

How to implement a box shadow on a container
Simple cross browser testing
How to make older Mozilla browsers and Safari display the box shadow and rounded corners.
How to make older IE browsers display the box shadow and rounded corners.
How to implement PIE 'Progressive Internet Explorer' in a DotNetNuke skin

Comments

If you have any comments or questions for this tutorial, please ask them in this Skinning for DotNetNuke 6.x forum thread.

Video 14 – Preparing for Packaging, Extension Icon and Skin Thumbnails

Creating the extension icon
Saving to the skin and containers folder
Registering the skin as an extension
How to add an extension icon for a skin
How to create skin and container thumbnails

Video 15 - Packaging a Skin for DotNetNuke 6

Introduction
Reviewing the Skin Manifest
Testing the Skin Package
How to Package Containers
Merging the Skin and Container Packages
Merging Two DotNetNuke Manifests
Testing the Skin and Container Package