Comments | s2expressive: As promised... CSS visual guide to Expressive.

carriep63 in s2expressive

As promised... CSS visual guide to Expressive.

Jul 11, 2007 17:01

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 ( Read more... )

css:guide, contribution, !beginners guide

Comments 7

av8rmike July 12 2007, 12:19:31 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 July 12 2007, 13:58:17 UTC

The CSS should be the same regardless of the theme.

av8rmike July 12 2007, 14:32:32 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 July 14 2007, 12:00:42 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 July 13 2007, 23:29:26 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 July 14 2007, 02:05:32 UTC

Thanks for that tidbit!

stickykeys633 October 18 2008, 20:23:25 UTC

I don't know if this has been said enough, but I love you carriep!