By Lee Sykes
December 2007
In this tutorial we demonstrate how to convert a free open source XHTML pure CSS template into a DotNetNuke skin.
We demonstrate how to convert the andreas01 template created by Andreas Viklund. Here you can
download the complete andreas01 DotNetNuke skin for free.
There are 1000s of template designs available for free download, some of the sites where you can download the templates from are:
After viewing this tutorial you will be able to convert any of these 1000s of free templates into a DotNetNuke skin.
This tutorial is in two parts, part 1 covers how to transfer the structure of an XHTML template into a DotNetNuke skin and how to adapt it to create the content panes, the menu and various DotNetNuke tokens and
part 2 (released in the next issue) covers how to create the containers, semantically coding the content, styling and formatting the content, overriding the DotNetNuke default classes, how to easily add the additional skin layout variations, and how to setup and create a print.css file so that you can style your own print layout of the skin.
Part 1 of the tutorial comes complete with 6 videos.
Video 1 - Introduction and preparations
- Introduction
- Open source XHTML template websites
- Warnings and checks
- Considerations
- Viewing the original XHTML template files
- Copying and preparing the files for DotNetNuke
- Opening the dnn_andreas folder as a website in Visual Web Developer Express
Time Length: 9min 1sec
Video 2 - Creation of content panes
- Overview of: index.doctype.xml and skin.xml
- Editing the index.html file
- Removing head section html code
- Viewing the original template in a browser
- How to replace the site title with the DotNetNuke logo
- Removing the included layouts text
- Removing the unordered list menu replacing with the HouseMenu
- The announce class
- Removing the text content and converting to a left content pane
- The extras id
- Removing the text content and converting to a right content pane
- The content id
- Removing the text content and converting to the main content pane
- The footer id
- Removing the copyright text and replacing it with the DotNetNuke tokens: copyright, terms, privacy
- How to add the DotNetNuke control panel
Time Length: 11min 29secs
Video 3 - Login links and packaging skin
- How to add and position the login / register links
- Creating the skin.css file
- Editing the skin.xml file to configure the HouseMenu
- How to zip up the files to create the DotNetNuke skin installation package
- How to install the skin package to DotNetNuke
- Creating a new page and assigning the new skin to the page
- Viewing the skin
Time Length: 9min 24secs
Video 4 - How to fix layout display problems
- Web Developers Toolbar for troubleshooting
- How to fix the display of the image overlapping the logo and login links
- How to fix the positioning and spacing of the logo and login links
- Transferring the settings from the web developers toolbar to VWD
- Uploading the skin.css file directly to the DotNetNuke installation
- Viewing the skin
Time Length: 7min 20secs
Video 5 - How to create the menu
- Styling the menu
- Viewing the original menu source code
- Comparing with the HouseMenu source code
- Viewing the menu CSS code using the web developer toolbar
- Editing the CSS code to style the HouseMenu
- How to style menu items to show the current page
Time Length: 8min 8secs
Video 6 - Adding the search box and validating the skin
- Transferring the settings from the web developers toolbar to VWD
- Uploading the skin and viewing the changes in DotNetNuke
- How to add the search box and position it in the skin
- How to validate the skin using the W3C
- Enabling XHTML compliance in DotNetNuke
- Validating for XHTML compliance
Time Length: 6min 10secs
Part 1 Total Time Length: 51min 32secs