By Lee Sykes
October 2007
In this tutorial we demonstrate how to create pure CSS skin layouts that are Search Engine Optimized. We achieve this by taking advantage of using absolute positioning and floats.
This technique was developed for the new DNN Creative skin. Following the release of the DNN Creative skin we received several enquiries regarding how we placed the main text content at the top of the source code and the less important content towards the end.
Ordering the source code helps search engines to easily find and index the important content of your website and therefore will help to improve your search engine results.
In this tutorial we demonstrate the techniques using a stripped down version of the DNN Creative skin.
The skin uses a fluid layout, so the content expands and contracts to the window size, plus it is flexible enough to allow for font re-sizing. If we increase the font size, the skin layout expands to incorporate the new text size.
As you can see this is a powerful and flexible technique for improving your pure CSS skins.
This tutorial comes complete with 7 videos and the skin code.
Note: This tutorial uses advanced techniques, make sure you view the tutorials listed at the bottom of this page before continuing with this tutorial.
Video 1 - Introduction, file preparations and initial styling
- Introduction to SEO skin layouts
- The DNN Creative skin
- Viewing the source code and order of the content
- File preparations
- Opening the tutorial skin folder as a website in Visual Web Developer Express
- Explanation of the skin.xml file
- How to create the 3pane_main.htm skin file
- How to create the skin.css file
- Creating the doctype.xml file
- Viewing the doctype.xml file
- Beginning the layout of the 3pane_main.htm skin
- wrap id
- styling the body
Time Length: 7min 40secs
Video 2 - Creating the content panes
- How to add the details for the left, right and main content panes
- contentholder id
- mainbody id
- content id
- sidebar id
- How to add a DotNetNuke content pane
- How to add a DotNetNuke left content pane
- sidebar2 id
- How to add a DotNetNuke right content pane
- Adding the ids to the skin.css file
- How to package up the skin and install it
- Viewing the bare layout of the skin
Time Length: 10min 7secs
Video 3 - Layout of the content panes
- Using the web developers toolbar to style the layout of the skin live
- Editing the skin.css file
- Positioning the mainbody and sidebar2 using floats in CSS
- Setting the widths for the content areas
- Using temporary borders to view the layout structure
- Positioning the content and sidebar using floats
- Setting the widths for the content areas
- Copying the CSS code to visual web developer
- Setting the background colour and spacing for the skin content area
- Removing the temporary borders
- Removing the demo text to locate the content panes
- Viewing the skin with the content panes in the correct layout
- Adding the footer content pane to the skin
- Positioning the footer using CSS
- Clearing the floats
- Viewing the skin with all content panes and correct background
- Adding a text / html module to the content pane
Time Length: 9min 58secs
Video 4 - Styling the content panes and footer
- Using the web developer toolbar to continue styling the CSS layout of the skin
- Using the web developer toolbar to view the IDs that DotNetNuke produces
- How to target the content, right and left pane ids produced by DNN
- How to set a background colour, border and padding for the content panes
- Viewing the skin, logged in and out
- Demonstration of the content pane background colours
- How to create a footer section for terms, privacy, links etc.
Time Length: 7min 23secs
Video 5 - Positioning the content panes and menu
- How to position the content area on the page and make the position flexible for font resizing
- How to add a menu to the skin (at the end of the source code)
- Viewing the skin
- How to position the menu using absolute positioning
- Experimenting with the CSS code using the web developers toolbar
- Styling the menu id
- Positioning and styling the menu h3 tags (relative positioning)
- Copying the code to VWD
Time Length: 9min 14secs
Video 6 - Positioning additional skin tokens
- How to add the breadcrumbs, search, login links, and logo to the end of the source code in the skin
- Viewing the skin
- Using the web developers toolbar:
- How to position the logo using absolute positioning
- How to position the login links using absolute positioning
- How to position the breadcrumbs using absolute positioning
- How to position the search box using absolute positioning
- Copying the code to VWD
- Viewing the skin
- Demonstration of re-sizing the browser window
- Demonstration of increasing the font size
- How to position the content section to display underneath the menu
Time Length: 7min 26secs
Video 7 - Positioning horizontal banner pane and IE hacks
- How to position the horizontal banner content pane using absolute positioning
- How to add the horizontal banner content pane at the end of the skin source code
- How to remove padding from any images placed in the horizontal banner content pane
- How to place the DotNetNuke admin control panel at the bottom of the skin
- Viewing the skin
- IE hacks
- Explanataion of the Javascript code
- iehacks.css for all Internet Explorer browsers
- body – setting the correct font sizes for IE5.5 and below
- Setting the correct layout widths for the content panes
- IE6 – The Peekaboo bug – the background colour disappears
- How to fix the Peekaboo bug
Time Length: 11min 42secs
Total Time Length: 63min 30secs