Firebug: Essential for CSSing WordPress

Customizing the appearance of a website on wordpress.com means selecting from the provided themes, and optionally augmenting its CSS.  To make the CSS task tractable requires a tool that allows inspecting the relationship between a page’s html, and the CSS that operates upon it, element by element. Probably the most popular tool for doing that is the Firebug addon for Firefox.

Below is a two-minute tour of the features that make Firebug indispensable.

Obtain and Install Firebug

Assuming you have Firefox (3.x) installed:  Tools > Addons > Get Add-ons.  Type “firebug” in the search slot. If firebug doesn’t show on the list, hit the See all results link.  Or, try this link directly https://addons.mozilla.org/en-US/firefox/search?q=firebug . (Firebug is also available for Firefox 2.x, installation is similar.)

Open Firebug

Open Firebug from the Tools menu:

In Firebug, select tabs HTML and Style

You can use View > Vertical panes to select side-by side arrangement, or above-below.

Instantly view HTML and CSS for any visible element

Select an element in Firefox and see the corresponding HTML in Firebug.

Select HTML tag to see corresponding CSS, and CSS inheritance

In Firebug, select a tag to cause the Style display to show all the CSS that affects that tag.  Styles are shown in order from highest to lowest priority. Note how overridden CSS rules statements are displayed in strikeout font.

What determines the color of this element (the post title “A paginated post” contained in an <a> tag)?  It seems that there’s a rule for h2.entry-title, but the color attribute  is overridden in a rule for <a> in general, and this again is overridden by a specific rule for [.entry-title a].  And if you’re unsure which color is which…

Hover mouse over CSS to see color and image thumbnails

You can hover the mouse over CSS color values to get a popup swatch of the color (the example here really does display the color of the post title shown above).  You can also hover over images mentioned in the CSS (for example for background images) and see a thumbnail popup. That’s especially useful for those oddly-named images used for fancy background fills.

Try out CSS alterations on the spot

Having located the CSS for the element of interest, you can edit the values, or delete or add attributes. Here’s a sample: change the post title to green:

.

Hover mouse over tag to see highlighted regions on the browser page

Need to see what regions (“boxes”) are governed by which html tags (and their CSS)? Just hover the mouse over a tag in Firebug, and the corresponding rectangle highlights in Firefox.  Colors: Yellow: margin; Purple: padding; light blue: block-level element.

Summary

Firebug — essential.