?

Log in

No account? Create an account

Previous Entry | Next Entry

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 border box model headaches. This makes everything generally cross-browser compatible and everyone is happy. (More on margins and padding vs. the border 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
  • I have used the "two column, sidebar on left" with no theme for this.
  • Custom reply pages are not available on basic accounts
  • This breakdown is not yet complete, I will add pages as I go!
  • Comments and general questions welcome, but I'm not available to help you with your layout here, sorry.
(1) General Page Layout | (2) Alpha classes | (3) Beta classes

Comments

( 7 comments — Leave a comment )
av8rmike
Jul. 12th, 2007 12:19 pm (UTC)
Thanks for doing this! It might be best suited to those building themes from scratch, since the existing layers don't all follow the exact same convention when it comes to syntax.
carriep63
Jul. 12th, 2007 01:58 pm (UTC)
The CSS should be the same regardless of the theme.
av8rmike
Jul. 12th, 2007 02:32 pm (UTC)
The class and ID names don't change, true, but theme designers don't all use them in the same combinations. The biggest example I can think of is header image, which sometimes is in #header, sometimes in #header-inner, sometimes in both, sometimes in three places. Entry titles images ("post ornaments") are in two different, but nested, DIVs. There are plenty of other examples here of things that someone tried to override that worked fine on one base theme, but didn't work on another because the CSS selectors didn't match across themes.
ephi
Jul. 14th, 2007 12:00 pm (UTC)
which sometimes is in #header, sometimes in #header-inner, sometimes in both, sometimes in three places

This heavily depends to the designers, IMHO. Which they prefer to use is beyond our imagination. Expressive is one of the layout that way too much divs (other that I can think right now is Flexible Squares), thus it is always make some people happy. But some will cringe at the number of useless divs it has. But it is proved to be the most popular base for future LJ/Vox layouts from 6A (sponsored themes are using it, mixit was created for basic users so they can use it, etc)
chasethestars
Jul. 13th, 2007 11:29 pm (UTC)
Thanks for doing this!


In response to

".archive-widget
"description:Page Summary widget (archive? doesn't make sense to me...)"

In Vox, .archive-widget contains links to the monthly blog entries, which LJ doesn't have. Since Page Summary is also a list of links, it seemed like a good corresponding place for it. Ok, that made more sense at the time. Now that I type it out, it seems kind of silly, but that's why =p
carriep63
Jul. 14th, 2007 02:05 am (UTC)
Thanks for that tidbit!
stickykeys633
Oct. 18th, 2008 08:23 pm (UTC)
I don't know if this has been said enough, but I love you carriep!
( 7 comments — Leave a comment )

Latest Month

March 2016
S M T W T F S
  12345
6789101112
13141516171819
20212223242526
2728293031  

S2 Help Communities

Tags

Powered by LiveJournal.com
Designed by chasethestars