By Lee Sykes
May 2006
This tutorial is a step by step guide covering how to create the free ‘Simple Red Leaf’ pure CSS layout containers.
You can view the skin live here:
http://skins.dnncreative.com
The containers are created using just CSS (no tables) and make use of CSS for the layout and styling the titles.
CSS containers can be used in both table based skins and pure CSS skins. The advantages of using CSS containers rather than table based containers are:
- Reduced code required
- Reduces page size and page load times
- Reduces bandwidth required and therefore saves on hosting costs
- More accessible content
- Easier and quicker to create than table based containers
The tutorial consists of 4 videos detailing how to create CSS containers for DotNetNuke using
Visual Web Developer 2005 Express Edition.
We create:
- A transparent container
- A transparent container with a title and action button
- A boxed container with a coloured header, transparent content area and formatted title
- A boxed container with a coloured header, coloured content area and formatted title
The videos cover:
Video 1 - Introduction, demonstration of containers
- Tutorial introduction
- Going to create 3 different CSS containers
- Advantages of CSS containers and how they can be used with table based skins as well as pure CSS skins.
- Show that container titles are formatted different and we will demonstrate how to change the formatting
Time Length: 2min 47secs
Video 2 - Preparations, first CSS container, the transparent containers
- Setting up the folder structure for the containers
- Opening up the container structure in Visual Web Developer
- Creating a transparent no title container
- Packaging the container and viewing in DotNetNuke
- Creating a transparent container with a title and action button (edit text link)
- How to format the transparent container title
- Viewing the transparent container
Time Length: 9min 35secs
Video 3 - Boxed containers, ids and classes with containers
- Beginning the transparent box container
- Explanation of ids and classes when working with CSS containers
- Adding the class for the outside border
- Adding the module settings menu and title and formatting with background colour and border
- Adding content area for container with padding
- Adding action button footer
- Packaging skin for installation
Time Length: 10min 2secs
Video 4 - Finishing touches, spacing, testing, fixing with hacks and completion of containers
- Viewing the boxed container
- Adding spacing between each boxed container
- Adding padding underneath the text
- Adding spacing between the transparent containers
- Container spacing and overlapping problem in IE5.01
- Adding hacks for IE5.01
- Viewing the fixed containers
- Creating separate styling for the titles of the boxed containers
- Viewing the styled titles
- Creating a boxed container with a coloured background
- Final viewing of the containers in IE6, IE5.01, IE7
Time Length: 12min 17secs
Total Time Length: 34min 41secs
Tutorial Information
This tutorial builds on the information provided in the previous tutorial:
How to create a DotNetNuke CSS skin. Make sure you follow the CSS skinning tutorial first before watching this tutorial.
If you are completely new to skinning, view the
How to create a skin for DotNetNuke video tutorials first.