How to use Firebug

This is a basic tutorial on how to identify the css used for areas within your theme so you can edit anything you want.This might take a bit of practice until you know what to look for, but it will solve some of those “how do I do this, how do i change that” questions you might have.

Tools used:
Notepad++
FireFox Browser: It’s like IE but it works. Download it here http://www.mozilla.com/en-US/
Firebug firefox addon: http://getfirebug.com

First install firefox browser. It’s a great browser, and in my opinion better than internet explorer and you’ll need it in order to use the firebug plugin.

Next, install the firebug plugin into firefox.Tools > addons > get addons search for firebug.

Once you have that installed, you can easily view the source of any element on your site.

I’ll start with an easy example. Say you want to know how to change the color of your post titles. Open your webpage and right click on the title, and goto “Inspect element”

inspect-element

A box should open up at the bottom of your browser with the html on the left and the css on the right. You can click each ID in the left box, and the right one will move to it’s corresponding CSS.

If you hover over IDs on the left, it will highlight the area it repersents on your webpage, so you can easily see what each one is for. If you click on it, the css on the right will move to the code that defines it.

highlight-id

Sometimes there’s lots of different code that effects a certain element. For example although the class is entry-title, you can use a different ID to specify which entry-title you want to be effected.
IE: .one column .entry-title {font-size: 18px;} for a one column page template.
#content entry-title a {font-size: 24px;} For the normal posts.
It can get a bit confusing when you start defining each one seperatly, but once you get the hang of it, it makes things a lot easier to understand.

Firebug also allows you to test edit the css and html right in the page, so you can edit your css, get it to look the way you want, then copy the style and paste it into your stylesheet. Just right click on the css on the right and goto “New Property”

edit-element

add-new-property

This is also a great way to figure out how someone did something on another site. For example if you wanted to see how someones blockquotes were styled, you could inspect element on the blockquotes and view the CSS. I’ve learned how to do a lot of cool things using this.

One thought on “How to use Firebug

Leave a Comment

Your email address will not be published. Required fields are marked *

*
*