Firebug: Essential for CSSing WordPress

firebug_teaserCustomizing 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:
firebug_005_open02

In Firebug, select tabs HTML and Style

firebug_020_fbtabs1

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

Instantly view HTML and CSS for any visible element

firebug_030_ff_to_fb_html

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.

firebug_040_fb_html_css

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

firebug_045_fb_css_color

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:

firebug_047_fb_css_edit

.

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.

firebug_050_fb_html_region

Summary

Firebug — essential.

About these ads

9 Comments

  1. k-Raul
    Posted 2009-01-23 at 4:56 am | Permalink | Reply

    Very good! Firebug is really essential! :D I use in my CSS Students!

  2. Posted 2009-01-28 at 3:10 am | Permalink | Reply

    http://www.musicmuleblog.wordpress.com
    Please help me. There is a dashed line appearing under my header which is sized to specified 760×200 and even with firebug I can’t find which code corresponds to this line.

    Any help would be much appreciated,

    Nick

  3. Corey McCarty
    Posted 2009-06-24 at 3:15 am | Permalink | Reply

    Im wondering if a problem Im having is related to Firebug.. or the WordPress admin. I was using Firebug to identify CSS changes.. and LOVE the code hinting.. was working like a charm.
    I was copying from Firebug and pasting my small code changes into WP. Then I copied a larger section of code and pasted it into WP and hit “Update” .. and was horrified to discover that the admin had deleted half my style sheet (from where I pasted to the end).. have you had any experiences similiar to this?

  4. Posted 2010-09-20 at 1:32 am | Permalink | Reply

    I really liked the graphical highlightings that you use in the captured screen images. What tool do you use to make them?

  5. Posted 2010-09-20 at 1:42 am | Permalink | Reply

    Hi Mert,

    I annotated the screen shots in Xara.

    – The purple lines are “felt pen”.

    – Where I show an enlarged “excerpted” section of screen, that piece was cut out in Xara, and then had a shadow/background glow applied.

    I suspect you can do the same sort of thing in Photoshop too.

  6. Posted 2010-10-02 at 5:10 pm | Permalink | Reply

    Really nice! Thanks!

  7. Posted 2011-06-16 at 4:45 am | Permalink | Reply

    Differently from your screenshots, when I analyze my wp blog (that runs in local with xampp) there is not a “style.css” in the right box BUT only a linkable text (named “wordpress” or “wordpress #1″ or “wordpress #1″) which is linked to http://localhost/wordpress/ (my local wp path), followed by a correct line number.
    I’ve no idea to sort it out. Could you help me?

One Trackback

  1. [...] go out to Graham Wideman for the [...]

Post a Comment

Required fields are marked *

*
*

Follow

Get every new post delivered to your Inbox.

%d bloggers like this: