Breakdown of the Smooth Sailing stylesheet

[carriep63]

This tutorial is going to break down some of the CSS that is used in the Smooth Sailing style.  This will help those of you that customize your layout using stylesheets and custom CSS to know what does what.

• This is for all account types.
• Basic (free) account users will not be able to customize the comments page.
• You must have a basic working knowledge of CSS

Download CSS file
(right click and save target as)


If you are new to Smooth Sailing and CSS, you may want to read the Intro to CSS tutorial. It also tells you the best way to apply CSS overrides to your Smooth Sailing style.

The Smooth Sailing style is made of four basic parts:

1. The page is the container that holds the whole thing (header, body, footer).


2. The header is at the top. It contains the title, subtitle and the navigation links.


3. The body is below the header. There is the body title, entries, sidebar and [entry] footer.


4. The [page] footer is at the very bottom of the page.

I am breaking this tutorial into seven main parts:

Page |
Header |
Body |
Entries |
Sidebar |
Comment Page |
Archive/Tags Page