How to Use Firebug to Change Your Theme’s Look and Feel

In this post I’m going to show you a great web developer tool called Firebug. Who is not a web developer or a web designer by profession, might not have heard of this free, all-important Mozilla Firefox browser extension. For those who are not afraid of casting a glance on some bit of HTML or CSS code to modify the look and feel of a template or theme for their websites, Firebug is a must-have tool. Here I will show you how to use Firebug for some CSS restyling of your template or WordPress theme.

Downloading Firebug

First things first: Firebug is a Mozilla Firefox browser add-on. There’s also a lite version of Firebug written in JavaScript that can be added to other browsers as a bookmarklet. However, the full-blown tool is available only for the Firefox browser. Therefore, if you want to enjoy all the goodness of Firebug, make sure you go to the Mozilla Firefox browser page and install this great free, open-source browser on your computer.

That said, click on the Tools button of your Firefox browser, then on Add-ons. This opens the add-ons page. Click on Get Add-ons. If you can’t see Firebug listed right away, type firebug in the search box and click Enter.

Mozilla Firefox addons page
Mozilla Firefox addons page

When you can see Firebug in the add-ons list, simply click the Add to Firefox button, and you’re done!

Open Firebug

You can open Firebug in one of these ways.

  • Keyboard Shortcut

    Toggle F12 to open and close Firebug.

  • Firebug Icon

    You can use the Firebug icon on top of the browser window to open Firebug. Then it’s just a matter of clicking the first red button from the left on the top right of the Firebug window to minimize the tool. Click the middle red button to open Firebug in a new window. Finally, to deactivate Firebug, simply click the last red button from the left.

    Open Firebug window
    Open Firebug window
  • Firefox View Menu Link

    A further way to open Firebug is certainly from the View menu link in the browser. Simply click View -> Firebug.

  • Context Menu Link

    Lastly, you can simply right-click on the part of the web page you want to inspect with your mouse, and select the Inspect Element with Firebug from the context menu option.

Use Firebug For A Theme’s Makeover

There’s a lot you can do with Firebug. For instance, you can view all the scripts, stylesheets, and HTML mark-up for the site; you can also use the JavaScript console to debug the website’s scripts.

In this and forthcoming posts, my focus will be on Firebug’s ability to reveal the CSS styling applied to a site element and to make CSS changes that can be previewed live as they’re being made. This functionality makes Firebug an irreplaceable asset when it comes to troubleshooting or applying CSS styles to your template or WordPress theme.

CSS Tweaking With Firebug

Just to demonstrate how handy a tool like Firebug can be, let’s take my blog’s listings page as example. Here’s what one of the listings looks like:

Post excerpt from wpthememakeover.com
Post excerpt from wpthememakeover.com

Let’s say I’d like to add a round border around the featured image. First, I’ll right-click on the image itself and choose Inspect Element with Firebug. This opens the Firebug window with the relevant HTML portion already highlighted on the left-hand side of the pane and the relevant CSS styles on the right-hand side of the pane. Make sure you detach the Firebug window from the page so that you can move it around in the way that’s most comfortable for you. This is what my browser window looks like at this stage:

Firebug open to inspect image in blog listing
Firebug open to inspect image in blog listing

From the HTML mark-up I quickly realize that the image in question is inside an anchor tag (that is, a link), and both elements are inside a div tag with a class called entry-thumbnail. By clicking on the HTML mark-up for this container div, Firebug displays the styles that are relevant to it. Here’s what the CSS code looks like at the moment:

.entry-thumbnail {
    padding: 0 0 10px;
}

What I can do to quickly preview my round border is to type the style rules inside the .entry-thumbnail selector in the Firebug pane. Here’s the final result:

.entry-thumbnail {
    padding: 0 0 10px;
    border: 1px solid #666;
    border-radius: 50%;
}

Firebug will display what these modifications to the CSS look like in real time. Here’s how the result looks on my screen:

Result of changes made with Firebug
Result of changes made with Firebug displayed in real time

If you’re happy with the changes, simply select the relevant CSS rules, copy (Ctrl+C on PC Cmd+C on Mac or right-click on the selection and choose Copy from the context menu) and paste (Ctrl+V on PC Cmd+V on Mac or right-click on your stylesheet document and choose Paste from the context menu) the CSS styles on your stylesheet. Refreshing the web page restores the page to its original state in your browser.

To Sum Up

Firebug is an exceptionally useful and easy-to-use web development tool. It’s my favorite tool, and I’m going to refer to it a lot in future customization tips and tutorials. However, there are others available, and by any means use what you feel most comfortable with for your customizations.

Have you already tried Firebug? What’s your take on it?
Advertisements

Have your Say

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s