Firebug is a popular web development tool, available as an extension for the web browser Mozilla Firefox (and there is a Lite version for other browsers). It can inspect, analyze and change your web style and layout in real time, which is a huge help when it comes to customize any WordPress theme.

We’re going to go through the basics on how to install and use Firebug to add custom CSS styles to your theme. But, first of all, an introduction from the people of Mozilla.

Installing Firebug

You can download and install Firebug from its official website, or from your browser’s addon repository. You may need to restart your browser after doing it.

Inspecting elements

Right-click on the area you wish to change, and choose the Inspect Element with Firebug option. The Firebug window will open in its HTML tab: at the left, you will see the HTML code of your web page (with the element you clicked highlighted), and at the right you will see the Style sub-tab, with the CSS styles applied to that element.

Changing styles in real time

• To edit the value of a CSS property, click on it.
• To disable a property, hover on it and click the icon appearing to its left.
• To add a new property to a rule, right-click on it (or in one of its properties) and choose the New Property option. Then, enter the name and the value of the new property.
• To add a new rule, right-click anywhere and choose the Add Rule option. Then, enter the name of the rule (or keep the suggested one) and add new properties to it.

All the changes you make will be reflected immediately on the web page. This way, you can easily customize the aesthetics of your theme while checking how it looks.

Note that, if you reload the page, all your changes will be lost. That’s because Firebug works on the client side (your browser), and the files in your server remain untouched.

Obtaining your custom CSS

At the Style sub-tab, Firebug also tells us the stylesheet and line where it found each CSS rule (check the right-aligned link). If we want to check the whole stylesheet, we can click on the link, and Firebug would move to its CSS tab and show us the whole file (focused in the corresponding line). We can also search the theme files for that specific stylesheet, go to the mentioned line, and we will found the definition of that rule. But if we only want the CSS code to customize it and feed it to the theme, the easiest way is simply selecting and copying the whole rule from the Style sub-tab.

This way, copying the rules you need and changing the values of their properties, you will end up with a custom CSS code you can add to the theme. When editing this code, there are two things that you should consider:

• Be sure you’re pointing to the elements you want. If the original CSS rule applies to more than one element (separated by commas), there is a chance that you may your changes to apply only to some of them: in that case, remove the elements you don’t need. Also, it’s worth taking a look to the body class, which may help you point to an element only in specific pages.
• Don’t redefine properties you don’t want to change. If you’re not changing the default value of a property, remove it completely from your custom CSS, so the value from the original stylesheet can be used.

Saving your changes

Once you have your custom CSS code, you can check this article to learn how to add it to the theme. The styles defined there will overwrite the default theme styles and give you the customized look & feel you wanted.

If you know CSS, you can change almost anything in your theme. There’s virtually no limit!