Pouring through code and help documents in order to theme your favorite blog, forum, or web site software can be a huge chore. Things are particularly tough when you have multiple packages used to create one, cohesive web site. Fortunately, theming doesn't always need to be this difficult. There is a faster, simpler way through the use of CSS.

CSS Overrides

The method for theming arbitrary web software packages discussed here can be called CSS overrides. This method involves selectively changing certain display properties of various parts of a web page. The difference between CSS overrides and pure CSS theming is that the former overrides style information which will still be present in the end result and the latter styles from scratch. We will accomplish our overrides by linking or importing our override style sheet after all linked and document-level style sheets.

CSS overrides have varying levels of success depending on what you want to theme and how you want everything to look in the end. Software that already uses CSS heavily benefits the most from CSS Overrides, but its possible to do this with other software as well. Additionally, if a style is set in an HTML tag's in-line style property, it won't be changed by the overrides.

Selector Discovery

The first thing we need to do in order to style a page is determine the structure of the document. This may be done by looking through the document source code, but there is a better way. The Web Developer extension for the Firefox web browser can provide you with all of the necessary information quickly and easily.

• Download and install the Web Developer extension from http://chrispederick.com/work/webdeveloper/.
• Open the dialog menu by selecting Tools/Web Developer/Options/Options... from the menu.
• Under the General section, check "Show element names when outlining elements".
• Select Tools/Web Developer/CSS/Edit CSS.
• Select Tools/Web Developer/Information/Display ID & Class Details
• Select Tools/Web Developer/Outline/Block Level Elements

You should now see the page to be styled with its major elements highlighted for you. You can highlight additional elements using the Outline menu. Using this markup, you can write CSS selectors for elements without having to look through source code.

Creating Override Styles

Now that you can address each individual element on a page, you can start styling. Select the last style sheet in the web developer side bar (opened in step 4 above) and add your selectors and style overrides at the end. The display of the document will change in real time.

One handy selector syntax is the descendant selector. A descendant selector specifies elements which are contained by another specified element, directly or indirectly. Descendant selectors consist of elements separated by whitespace. For example, "div a" selects "a" elements which are enclosed by a "div" element somewhere up the document tree.

This isn't to be confused with the child selector, which only selects elements which are directly below each other. The child selector uses a greater than symbol, and is not supported by Internet Explorer.

When you are done, copy and paste the new code you've added into a text editor and save it as a style sheet.

Applying the Overrides

Now that your override style sheet is ready, it needs to be attached to the pages you wish to theme. The best way to accomplish this is by linking the external style sheet to the document at the very end of the document's head section. This way, it is the last style sheet loaded.

That is all there is to it. This method may seem a little complicated, but after initial set up it will save time. Depending on the size and complexity of the software you wish to theme, you may save hours of work.