By Lee Sykes
May 2010
In this tutorial we demonstrate how to use Super Stylesheets in DotNetNuke for quickly and easily designing the layout of your DotNetNuke skin.
Super Stylesheets are a powerful new feature in DotNetNuke 5 which provide base layout features using CSS. The advantage these stylesheets have is that a
beginner to skinning and CSS can easily create a layout which works in all browsers without the need to learn complex CSS techniques.
Super Stylesheets cover several areas, the first is from Yahoo!'s YUI Library, this provides layout templates and a global reset for all browser styles so that your design displays consistently across all browsers. Second is the dnnlayouts.css stylesheet which also provides template layouts and third is the dnnroundedcorners.css stylesheet which allows you to create skins using rounded corners.
The focus of this tutorial is DNN Layouts. DNN Layouts work in a very similar way to the Yahoo Library templates, but for a 3 column layout they allow you to create variable or equal width 3 column layouts. The DNN Layout templates are also easier to understand and configure.
In this tutorial we demonstrate how to build a skin from the very beginning, demonstrating the five fluid layout templates that are available which are:
- Three column portal template
- Three column blog template
- Two column content left template
- Two column content right template
- One column template
We also show you how you can use several templates together in a single skin to create a multi layout skin, and to finish, we show you how you can enhance these layout templates even further to produce SEO skin designs. For example, if you view the source code of the skin, you will see that the main content is placed in the source code before any of the code for the logo, menu, breadcrumbs etc, whereas when viewing the page in a browser, the logo, menu etc. display above the main content. This provides a highly search engine optimized skin by making it much easier for a search engine to index the main content of your website pages.
Throughout this tutorial we assume that you have a basic knowledge of skinning in DotNetNuke. If you are a beginner we suggest you view the tutorials in
Issue 5 & 6 to provide an introduction to the concepts of skinning in DotNetNuke. Throughout this tutorial we use the ascx method of skinning as it is much quicker to skin using this method. If you are new to the ascx method of skinning we have covered ascx skinning in this tutorial here:
DotNetNuke ASCX Skinning for Professional Skinners
References:
Issue 5 and 6 - Working with skins
DotNetNuke ASCX Skinning for Professional Skinners
DotNetNuke Nav Menu
Nav Menu v2 for DotNetNuke v5
How to create CSS containers
How to create a DotNetNuke CSS skin from an XHTML template – part 1
How to create a DotNetNuke CSS skin from an XHTML template – part 2
Pure CSS SEO Layouts for DotNetNuke skins
The videos contain:
Video 1 - Introduction to the Super Stylesheets DNN Layouts and Initial Setup
- Introduction
- DNN Layouts.css template examples
- 3 Col Portal, 3 Col Blog, 2 Col ContentL, 2 Col ContentR, OneCol, MultiLayout
- Demonstration of SEO skin layouts
- How to create the folders and files for the new skin
- How to create a 3 Col Portal layout skin
- How to open the DotNetNuke installation files as a website in Visual Web Developer Express
- How to setup the initial configuration of the 3Col-Portal.ascx skin file and skin.css file
Time Length: 11min 19secs
Video 2 - Setting Up the Skin Layout Template Code
- 3Col-Portal Skin
- Adding the admin control panel
- How to import the dnn-layouts.css stylesheet into a skin using the skin.css file
- Viewing the dnn-layouts.css file
- Setting up the skin layout code
- How to set the sidebar widths using a class
- How to specify which skin layout template to use: threecol-portal
- How to place the ContentPane before the Left and Right panes in the source code (for SEO)
- dnn-mid class
Time Length: 6min 44secs
Video 3 - Using the ThreeCol-Portal Layout Template for a Skin
- Using classes to set the layout of the skin
- dnn-side (for the left and right panes)
- dnn-main (for the main content pane)
- How to setup the structure for the skin layout template
- How to quickly and easily change the layout of the skin by just changing a single class
- How to add the Register and Login tokens to the skin
- How to create a new page for testing the new skin
Time Length: 8min 4secs
Video 4 - How to Add Tokens to the Skin
- How to add the logo token
- How to add the nav menu token
- How to add the breadcrumb token
- How to style the Nav Menu
- How to fix the submenu displaying behind the Content Panes
Time Length: 7min 25secs
Video 5 - Setting Background Colors for Content Panes and Creating CSS Containers
- How to set background colors for the content panes
- Viewing the background classes in the dnn-layouts.css file
- How to set the background color classes in the skin.css file for the content panes
- How to create and use a pure CSS container with a dropdownlist menu
Time Length: 9min 44secs
Video 6 - How to Create a Footer Area and Reset the Default Styles
- How to create a footer area in the skin
- How to add the Links, Date, Copyright, Terms and Privacy tokens to the footer
- How to style the footer area using the skin.css file
- How to ensure the footer displays underneath the content panes
- How to add spacing around the breadcrumb token
- How to reset the default DotNetNuke styles
Time Length: 9min 31secs
Video 7 - How to Style the Text in the Content, Left and Right Panes
- How to style the text and header tags in the main Content pane
- How to style the header tags in the Left and Right panes
- How to change the color and font size of the text in the Right pane
- How to add spacing to the top of the Left and Right panes
Time Length: 6min 11secs
Video 8 - SEO Skin Layouts for DotNetNuke Tokens
- How to add the Login Links and Search token to the bottom of the skin code
- How to position the Login Links and Search token at the top of the skin using absolute positioning (SEO design)
- How to position the admin control panel at the bottom of the skin
Time Length: 7min 42secs
Video 9 - Creating Several Skin Layouts Using the Layout Templates
- ThreeCol-Blog layout template
- How to copy the 3Col-Portal skin to create the 3Col-Blog skin
- How to change the class to quickly and easily change the layout to use the 3Col-Blog layout template
- How to create a new page and copy content from another page for a quick skin testing area
- How to copy the 3Col-Portal skin to create the 2Col-ContentR skin
- How to apply the twocol-contentR layout template
- Testing the 2Col-ContentR skin
Time Length: 7min 19secs
Video 10 - Further Layout Templates and MultiLayout Templates
- How to copy the 3Col-Portal skin to create the 2Col-ContentL skin
- How to apply the twocol-contentL layout template
- Testing the 2Col-ContentL skin
- How to copy the 3Col-Portal skin to create the OneCol skin
- How to apply the onecol layout template
- Testing the OneCol skin
- How to create a MultiLayout skin
- How to use both the threecol-portal and threecol-blog layout templates in a skin
- Testing the MultiLayout skin
Time Length: 11min 43secs
Video 11 - SEO Layout Template Skins
- How to search engine optimize the Layout Template skins
- How to place the Logo, Menu and Breadcrumbs at the end of the skin source code
- How to position the Logo, Menu and Breadcrumbs at the top of the skin using absolute positioning
- How to position the content panes underneath the menu and breadcrumbs
Time Length: 7min 43secs
Video 12 - Final SEO Positioning of the Skin Code
- Fixing positioning problems
- How to fix white space on the right hand side of the skin
- How to fix a large white space in the sub-menu
- Demonstration of the SEO skin source code
Time Length: 4min 28secs
Total Time Length: 97min 53secs
Comments