This tutorial was written by one our awesome forum ninjas – Jordan Hatch.

Firebug is a great add-on extension to the popular web browser Firefox. It can help you make CSS changes in real-time and will help you locate where the CSS rules are defined and where in the file they are. It makes it even easier to customise any WooTheme. This tutorial is going to go through the basics of editing a style with Firebug, and then editing the CSS to save the new styling.

Downloading Firebug

You can download Firebug by visiting the Add-ons Repository here. You may need to restart your browser after installing it.

To change a style in Firebug, right click on the area you wish to change and choose the Inspect Element option. The Firebug window will open up at the bottom of the screen, and you can see the HTML of the page on the left, and the CSS of the element you clicked on on the right. You can change any of the CSS and it will automatically update the page so you can see your changes in action. When you’re happy with them, you can add it to your CSS file.

We will be attempting to change the link color of our Gotham News theme, with the default style, to a color of your choice.

Finding the CSS

You’ll need to open Firefox and go to your WordPress installation with Gotham News selected as the theme. Choose the default style for now, you can do the same techniques here to other stylesheets later.

Considering we’re going to change the link colours, right click on any normal link (ie. in a post or page), and choose the Inspect Element option. The Firebug window should open and show you all the CSS styling for the link.

Right click the link and select Inspect Element

Click on the color: attribute and you will find that you can change the colour. Change it to whatever you like, you can visit this site for a colour wheel with the relevant codes. When you change the colour in the Firebug window, it automatically updates on the page, so you will find your links all changing to match the new style.

Click on any value in the CSS edit window

However, these changes are not permanent yet! If you refresh the page, you will find that your changes are lost, because Firebug is only editing on the client side (eg. your web browser) and not on your web server. Let’s go and add those into the stylesheet.

Saving your changes

So, we would like to save our changes to our CSS files. The first step is to find what CSS file our styles are defined in. As in the screenshot, take a look at the right-aligned text above the a element in Firebug. That is the file our styles are in – style.css – and the line number of the styles – line 46.

Find the correct file to edit

You can now download the style.css file from your server and find line 46, and you should find the following there:

a {
	color: #006DAD;
	text-decoration: none;
}

Change it to what you decided on in Firebug, and then upload it to your server. Clear your cache, refresh the page, and voila – your links should all be your new colour.

Finding the correct stylesheet file

The standard file to edit is style.css which is located in the root of your theme folder.

Our themes come with various styles, and you will often find that the CSS points to the specific style (e.g. default.css). You can find these stylesheets under a sub-folder in your theme directory called /styles/ (e.g. wp-content/themes/busybee/styles/default.css).

You can’t use your WP theme editor to edit these files. You have to download the file with an FTP client and edit it locally, and then upload it to your server again.

Validation

To make sure that webpages were coded to a certain standard, the W3C released their Validator, and you can check if your site is Valid XHTML. All our themes are valid XHTML out of the box, but be aware that if you’re adding YouTube videos or modifying the theme, you may cause your site to fail the validation. If ever any of your modifications cause problems with browser compatibility, use the validator to check if you’ve coded everything correctly first.

Doing a bit more!

You can use Firebug to make changes to almost anything in your themes. For example, you could use it to change the background image of the header, you could use it to add extra padding around a picture, or change the background colours of the sidebar tabs. Firebug is your CSS buddy when it comes to WordPress!

A short video demonstration

(Please open the article to see the flash file or player.)
Click video to view video