Visual Overview

For anyone wanting to modify the Options theme, it can be a pretty tough task figuring out all the classes and IDs associated with each element.

I’ll layout some of the major classes here, so you can get an uncluttered look at how the theme is structured.

An even more useful tool than this page would be getting the Firebug add-on for Firefox. You can quickly figure out any element’s class or ID with that nifty tool.

Also note that I’m not going to go into the specifics of CSS here. If you plan to customize your site, you simply need to know how to work with CSS. There are no magic tricks or hacks. Learning CSS is nothing more than putting in a little time and effort.

Overview of the major IDs and classes

Their are several major <div> elements placed within the theme files to hold your site together. Click on the image below for an enlarged view of these major sections.

One point to note is that the #content will change depending on the page you’re on. On the home page, this is referenced as #home, but I’m hoping to change this in a future update. It is also given an extra class depending on which page the visitor is on. Here are those possible classes:

home
attachment
single
page
error-404
category
tag
author
search
archive

Other classes and IDs

I’ll add other areas in a later update. Use the Firebug tool linked above, and you can’t go wrong. Anything within the theme can be referenced through CSS.