color layout chart

This is the color chart I made for orchestrating and managing the background images/colors when using both a style switcher and a browser sniffer to determine which background, exactly, to display for each area of the page. You might even find it useful for your own layouts. The key is below.

Note that the header isn’t really used, and that the content and sidebars (sometimes), and the drop-downs, post meta-data, and my-own-comments boxes (always) use the same background CSS (once for each subtheme).

In all there are 6 × 3 = 18 different CSS inserts for what ended up being one of 4 types of user agents (1. browsers that cannot handle PNG transparency, 2. browsers that can and receive special message A, 3. browsers that can and receive special message B, and 4) all other user agents).

So, yeah, you can tell that this is becoming a bit of a logistical nightmare for me! Nevertheless, I’m pretty confident that once I’ve got the thing done, it’ll be easy to extend.

I’m trying to make the learning curve for anyone else as shallow as I can. Here’s how it breaks down for anyone wishing to add their own subtheme:

1. Create CSS for layout and color
2. Add style to styles.inc
3. Add any needed sniffer-generated CSS to sniffer.inc
   1. This is really for generating either translucent PNG or GIF, depending on browser
   2. Obviously, this also entails creating both a PNG and GIF version for each translucent background
4. Edit header.php so that cookies don’t retain old style names (there must be an easier way to do this; maybe someone will come along and improve this step so it’s automated; nevertheless, it currently only requires inserting the style names into two lines of existing code, towards the top of the page)
5. Upload and enjoy!

Not too terribly bad, I think, all things considered.

Key: