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!

Bloggish is (in my opinion) the most versatile and customizable S2 layout there is. One of the reasons it's so customizable is because there are four different types of layout.

1. One Column


2. Two column, sidebar on the left


3. Two column, sidebar on the right


4. Three column

This is where the #alpha, #beta, and #gamma id's come into play. The first column starting at the left will always be #alpha, the second column will always be #beta, and the third column (if you have one) will be #gamma. It doesn't matter what is inside the first column, whether it's a sidebar or your entries. It will always be #alpha. Here are all four layout types with #alpha set to have a blue background:



So... When using CSS to customize your S2 Bloggish layout, #alpha, #beta, and #gamma will mean different things depending on the layout type you've chosen.

Customizing for different layout types

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)

( Read more... )

There seems to be a great demand for the "separated" or "open" look in Opal. I certainly don't have any problems sharing a theme layer with the community and would be happy to offer this one for anyone to use and modify as they see fit. (See this for example.)

Obviously, this layout is personalized the way I like it and you will want to make it your own. I have noted the most commonly changed items in green.

The layer was created using the Opal source code with a few of my own "extras" thrown in for good measure. It has not yet been "debugged" because I haven't used it very long, so feel free to point out anything you find (... boy I bet I am going to regret saying that!) Tested in IE, Opera, and Firefox. I have left the link to the background image intact. Feel free to use it, but be forewarned that my server is not the most reliable so you may want to host it yourself. Background image from Squidfingers.com.




( Opal Unfolded )