Hey guys! I have a new Web Design site: http://www.ideatreestudio.com.

Expressive CSS Breakdown

In this tutorial, I am going to break down much of the CSS used in the Expressive style. I have not included every single class in the following breakdown, but instead focused on the "common" and most easily explained classes. (If you want a quick visual, it's in this tutorial at a glance.)

The Expressive style has a lot of markup! You will find that almost every div has an "outer" and an "inner". By adding margins, padding, and borders to the "inner" divs, you can usually avoid the box model headaches. This makes everything generally cross-browser compatible and everyone is happy. (More on margins and padding vs. the box model here.)

I am hosting this tutorial on my website rather than on Livejournal this time. I hope to have all of my tutorials in one place eventually...

• This tutorial is for all account types
• Custom reply pages are not available on basic accounts
• This breakdown is not yet complete, I will add pages as I go!
• You can download the default stylesheet here.

(1) General Page Layout | (2) Alpha classes | (3) Beta classes

Here is the default CSS for the s2 Clean and Simple style. ( Read more... )

Set style to s2 and choose "Smooth Sailing" as the layout.
On tab three (custom options) choose "Custom cSS".
Paste codes into custom cSS box.
Hit Save.

/* Cleaned CSS: */ body{ background: url(http://pics.livejournal.com/carriep63/pic/000a32tp) repeat-y top center; margin:0; padding:0; } div{ background:none !important; border:0 !important; } .header-title, .header-subtitle, .bodyheaderblock{ display:none; } .header-menu{ padding-top:380px; padding-bottom:20px; background: url(http://pics.livejournal.com/carriep63/pic/000a4srz) no-repeat top center !important; text-align:center; } .header-menu a{ font-variant:small-caps; color:#1B4484; letter-spacing:1px; } .bodyblock{ padding:0; width:750px; margin:0 auto; border-top:1px solid black !important; padding-top:10px; } .sidebar{ visibility:hidden; } table{ background: url(http://pics.livejournal.com/carriep63/pic/000a9x1g) repeat-y top left; } table table{ background:none; } body, font, table, div{ font-family:georgia; font-size:12px !important; line-height:20px; } a{ color:#20497D; } a:hover{ color:#2F6ABF; } .entryHeader{ font-variant:small-caps; color:#1B4484; letter-spacing:2px; } .entryLinkbar ul{ margin:10px 0 30px 0; background: url(http://pics.livejournal.com/carriep63/pic/000a8q87) no-repeat bottom center; padding-bottom:20px; text-align:center; } .entryLinkbar a{ text-decoration:none; font-variant:small-caps; } .pagefooterblock{ padding:10px; text-align:center; font-variant:small-caps; color:#20497D; letter-spacing:2px; }

Have you seen the following classes and wondered what they were used for in an S2 Bloggish layout?

.layout-one-column
.layout-two-column-left
.layout-two-column-right
.layout-three-column

The good news is you probably don't even need to know what these are for unless you are designing layouts for other people to use. The only reason you would need them is if you were designing a theme that is compatible with all four of the Bloggish layout types. If you are making a style for yourself and you have chosen your favorite layout type for Bloggish, then you can skip this tutorial altogether.

For the sake of this tutorial, let's pretend we are making a theme for all four layout types of Bloggish. I am assuming you already know what #alpha, #beta, and #gamma are used for. If not, you must catch up with us now by reading about those.

All I want to do with this theme is take this shiny image and put it above our entries:



I prefer to have my sidebar on the right and the entries on the left. Since the entries are the first column on the left, they will then be the #alpha column. Therefore, I added my image as a background to the #alpha-inner column by using the following code:

#alpha-inner{
padding-top:80px;
background: url(http://pics.livejournal.com/carriep63/pic/0009ady7) no-repeat center 20px !important;
}

I would have used it with #alpha instead of #alpha-inner, but I chose to keep the original background of the diagonal lines.

Here is what we have. Perfect.
The only problem is, if someone else wants to use our stylesheet they have to use the "Two column, sidebar on the right" layout type, too. If they want their sidebar on the left, then the sidebar will become #alpha and this is what we get. So, if we have the "Two column, sidebar on the left" layout type, then the background image would be added to the #beta-inner column, not the #alpha-inner column. This is where our classes come in. You can specify where to add the image depending on which layout type the user has decided on. So, if we are using 2 column right or one column layout types, then we will add it to the #alpha column. If we are using 2column left or three column layout types, we will add it to the #beta column.

.layout-two-column-right #alpha-inner,
.layout-two-column-left #beta-inner,
.layout-three-column #beta-inner,
.layout-one-column #alpha-inner
{
padding-top:80px;
background: url(http://pics.livejournal.com/carriep63/pic/0009ady7) no-repeat center 20px !important;
}


That code will add the image to the correct column depending on which layout type is being used. You can technically make a different layout for each layout type all in the same stylesheet if you wanted to!