By Lee Sykes
April 2006
This tutorial is a step by step guide for how to create the free ‘Simple Red Leaf’ pure CSS layout skin.
You can view the skin live here:
http://skins.dnncreative.com
The layout is created using just CSS (no tables) and makes use of CSS for styling the fonts, menu etc.
The tutorial consists of 9 videos detailing how to create a CSS skin for DotNetNuke using
Visual Web Developer 2005 Express Edition.
The videos cover:
Video 1 - Introduction, Preparations, Explanations
- Introduction to the skin
- Initial preparations: Installation of HouseMenu, FCKEditor
- Creation of folder structure
- Adding files, red leaf image and skin.xml file
- Opening folder as a website in VWD
- Viewing skin.xml file, explaining the code for HouseMenu and DotNetNuke Tokens
- Explanation of Simple Red Leaf Skin sketch
Time Length: 8min 34secs
Video 2 - Setting up the layout skeleton of the CSS skin
- Create an index.htm file
- Adding first div tags for layout of:
- Admin control panel
- Tagline
- Login links
- Logo
Benefits of CSS skins: Smaller page sizes, reduced bandwidth costs, search engine friendly, accessible, special formatted print pages and more…
- Content
- Content pane
- Side bar
- Left pane
- Explanation of the ids and classes
- Further layout div tags for:
- Zip skin files and install to portal
Time Length: 11min 9secs
Video 3 - Viewing the initial layout and setting the DOC Type
- Viewing the skin as a basic layout with no positioning
- Changing the DOC type of the skin, replacing the default.aspx file
- Testing, checking in Firefox for Standards Compliance Mode
Time Length: 5min 32secs
Video 4 - Setting first properties in the skin.css file
- Visual Web Developer – creating skin.css file
- Body class, setting the initial properties:
- The base font for resizable text in DotNetNuke
- The background red leaf image
- Viewing skin
Time Length: 7min 15secs
Video 5 - Setting up the layout of the skin using CSS
- Explanation of using opposing floats and the clear method
- Setting up the layout of the skin elements through CSS
- Creating classes: tagline, loginlinks, logo for the layout
- Viewing the skin layout
- Wrap div and class creation to add space to the edges of the skin
- Setting up the layout of the content pane and menu using CSS and div ids
- Viewing the skin layout
Time Length: 11min 1sec
Video 6 - Finishing touches to the CSS skin layout
- Setting up the layout of the Date, Copyright, Terms and Privacy links
- CSS for ids date and footer
- Viewing the completed skin layout
Time Length: 3min 28secs
Video 7 - Styling the HouseMenu
- Styling the Menu
- HouseMenuNav class – adding borders and viewing skin
- Menu classes:
- HouseMenuNav ul (view formatting in skin)
- HouseMenuNav li a:link, HouseMenuNav li a:visited
- Viewing the menu
- Display: block in a menu
- HouseMenuNav li a:hover
- Indenting sub menus
- Removing bullets from sub menus
- Adding borders to submenus and removing underlines
- Viewing the skin
- Adding bottom border to main menu items
- Changing the background colour for the sub menu items
- Changing the background colour when hovering over sub menu items
Time Length: 12min 56secs
Video 8 - Testing in browsers and fixing with hacks
- Testing in Browsers: Firefox, Opera, Mozilla, Netscape, IE7, 6, 5.5, 5.01
- Demo of problems in Opera and IE5.5, IE5.01
- CSS code hacks for browsers
- Fixing Opera bullet problem
- Introducing hacks
- Fixing text sizing in IE5.5, IE5.01
- Fixing large white gaps in the menu in IE5.01
Time Length: 9min 51secs
Video 9 - Viewing, finishing touches, completion of CSS skin
- Viewing the skin with the new hacks
- Setting the formatting for the module text and tokens
- Viewing the complete skin
Time Length: 8min 58secs
Total Time Length: 78min 44secs
Tutorial Information
This tutorial builds on the information provided in the previous skinning tutorials, so if you are new to skinning, view the
How to create a skin for DotNetNuke video tutorials first.
Initial preparations required in video 1:
Install the HouseMenu
Install the FCKEditor
Links and references mentioned throughout the videos: (recommended to fully understand the tutorial)
Simple Red Leaf CSS Skin
How to install and configure the HouseMenu
How to install the FCKEditor
Browser Quirks and Standard Compliance modes in DotNetNuke (Changing the DOC TYPE, default.aspx file)
How to create re-sizable text in DotNetNuke