Multiple skin layouts using skinname.css

By Lee Sykes

October 2007
(Updated 18th October 2007)

This tutorial is part 2 of the Pure CSS Search Engine Optimized Skin Layouts tutorial. We previously demonstrated how to create a 3 pane skin using floats and absolute positioning. We are now going to demonstrate how to create multiple skin layouts using a skinname.css file.

Using the skinname.css file technique allows you to easily create variations of skins while also reducing the amount of code placed in the skin.css file.

In this tutorial we create a 2 pane version of the CSS skin using minimal code changes.

Video

Introduction
How to create a 2 pane version of the SEO CSS skin
Visual Web Developer Express
Creating a copy of the 3pane_main.htm skin file and renaming to 2pane.htm skin file
Creating the doctype file for the 2 pane skin
How to remove the right pane
Creating a 2pane.css file (skinname.css file)
How to reduce CSS code by specifying CSS stylings just for the current skin
How to set the width of the mainbody id to 99%
(How to fill the space after removing the right pane)
Viewing the skin
Viewing the CSS using the web developers toolbar
Viewing the new 2pane.css file
How to reduce the width of the footer pane for the 2 pane skin
Viewing the skin
IE hacks

Time Length: 13min 5secs