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.
Here are some things that may be helpful to know if you want to customize Expressive.
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
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)
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.