By Lee Sykes
January 2008
This tutorial is part 2 of the How to create a DotNetNuke skin from an XHTML template tutorial. In part 1 we demonstrated how to convert the free open source andreas01 XHTML template into a DotNetNuke skin.
In Part 2 of the tutorial we will cover 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.
If you have not viewed
part 1 of the tutorial, please view that tutorial first which was released in the previous issue before continuing with this tutorial.
Part 2 of the tutorial comes complete with 7 videos.
Video 1 - Creating the containers
- How to create containers for an XHTML template
- h1, h2, h3, no title containers
- Comparing code with the original template
- Semantically coding the content
Time Length: 6min 56secs
Video 2 - Text styling and overriding the default DotNetNuke styles
- Adding content to the main content pane
- Assigning the h2 container as default to the page
- How to style the text in the skin and override the default DotNetNuke styles
- Viewing the default CSS using the web developer toolbar
- Explanation of overriding the Normal, Head classes and h1-h6 tags
- How to override the Normal class for text in the Text / HTML module
- Grouping together the normal classes
Time Length: 8min 53secs
Video 3 - Styling the header tags
- Grouping together the h1-h6 tags and head class to override the default text stylings
- Overriding the default font weight for the header tags
- Copying the code changes to VWD and uploading to DotNetNuke
- How to set the correct line-height for the text
- Viewing the changes in DotNetNuke
- How to match the styling of the h1 and h2 tags
Time Length: 8min 25secs
Video 4 - Styling content based on the content pane location
- How to override the colour of links in the default.css file
- Adding content to the right pane using the h2 container
- Explanation of how the extras id styles the h2 and p text content
- Adding content to the left pane using the h2 container
- Viewing the styling of the left content pane
- Explanation of how the announce class styles the left border on the left content pane
Time Length: 9min 7secs
Video 5 - Creating layout variations
- How to convert the extra layout variations of the andreas01 template
- Viewing the source code of the index2.html template and comparing with the andreas01 index skin file
- How to create the 2 column layout skin
- Creating a new index_col2 skin and doc type file
- How to remove the right pane
- How to create a wider content pane
- Explanation of the contentwide layout styling in the skin.css file
- Viewing the new skin layout in DotNetNuke
- Validating the skin for XHTML compliance
- Viewing the source code of the index3.html template and comparing with the andreas01 index skin file
- How to create the 2 column right side layout skin
- Creating a new index_2col_right skin and doc type file
Time Length: 9min 24secs
Video 6 - Creating an additional styled menu
- How to move the menu from the left pane to the right pane
- How to remove the left pane
- How to create a wider content pane
- Explanation of the contentwide2 layout styling in the skin.css file
- Viewing the new skin layout in DotNetNuke
- Viewing and comparing the menu styling
- Explanation of the menu styling for unordered lists in the extras id
- How to create a second HouseMenu with a different class
- Viewing the new menu layout
Time Length: 7min 15secs
Video 7 - How to create a print layout (print.css)
- How to setup the print.css file (How to specify the layout and content when printing out a page)
- How to enable DotNetNuke to read the print.css file
- An explanation of the print.css file
- body, wrap, header
- How to remove elements that you do not wish to be printed, such as the menu, left and right panes
- Viewing the print preview
- How to set the font styling for the print version
- How to remove the login links and search box from display in the print version
- How to ensure the text content displays below the logo
- How to set the width and styling of the main text content
- How to style the links in the print version
- How to set the font-size for the print version
- Viewing the print preview
Time Length: 10min 20secs
Part 2 Total Time Length: 60min 20secs