Customizing Expressive

[chasethestars]

When I first introduced Expressive, I mentioned that the CSS was duplicated from Vox. There are a lot of stylesheets, and a lot of ID and class names, which can be intimidating at first, and very frustrating when you're trying to change something but the change isn't showing up because it's in the wrong place.

Customizing Expressive shouldn't be hard if you understand CSS, but understanding Expressive first might help. So I made you this guide! *g*

There's also a layout help community for Expressive - s2expressive. Check it out if you need help with Expressive, or if you want to help others.

Expressive Explained

Here are some things that may be helpful to know if you want to customize Expressive.

Column Variations:

Expressive has 4 different layout types to choose from:

• 3 columns with entries on the left and 2 sidebars to the right
• 3 columns with entries in the middle and a sidebar on either side
• 2 columns with entries on the left and a sidebar on the right
• 2 columns with entries on the right and a sidebar on the left

The entries column is named Alpha. Beta and Gamma are the sidebars. You will find a variation of layout-wtt in the HTML based on the layout type you have selected from the Customize wizard. This is a class that can be styled. W stands for a wide column, and T is for a thin column. This is the order the columns appear based on the selected layout type.

• layout-wtt - Alpha Gamma Beta
• layout-twt - Beta Alpha Gamma
• layout-wt - Alpha Beta
• layout-tw - Beta Alpha

Stylesheet Structure:

These are stylesheets we pulled from Vox. They are the same as they are on Vox so that if something gets updated, we can replace the whole stylesheet rather than find and make each individual change on the LJ copy.

• base.css - resets styled elements to its default
• default/screen.css - default styles across all themes
• theme/screen.css - styles for theme
• theme-variation/screen.css - images and color changes per theme variation

These are the stylesheets we added to override any styles set in the Vox stylesheets, and also to add in new classes that are specific to LJ:

• ljextras.css - things specific to LJ that aren't in Vox
• theme.css - if a theme has something that needs to override any of the preceding stylesheets, this stylesheet may also show up

If you add custom CSS, it comes after all the other stylesheets.

• custom stylesheet url
• custom CSS (from the custom CSS box)

Customizing Stylesheet(s):

If you're making simple changes such as replacing a header with one of your own, or if you're just changing the background color, overriding the CSS in the theme-variation's stylesheet is the way to go.

However, if you're creating a completely new layout, "starting from scratch" is recommended. Instead of starting off with a premade theme, select "(none)" from the themes drop-down menu and create your own stylesheet for your design.

This is recommended since your layout won't have 4 variations (unless you want to make variations, which is cool too) and it would be unnecessary extra work to create a theme stylesheet and a variation stylesheet which overrides the main theme stylesheet's colors. There is also a lot of extra CSS in the theme stylesheets that you wouldn't need since you're creating a layout for LJ, not Vox.

Here is an example of a theme stylesheet that you can use. It combines the theme stylesheet and the theme-variation stylesheets into one, and all the extra Vox stuff has been stripped out.

But there are so many names! What's what and what's where?

Here are the main IDs and classes in Expressive, in the order they're nested within each other.


Click to view full-size. (It's 1242x1289 and 88.88kb)