How to build Skins for DNN 6.x

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 or questionsIf 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