Video Tutorial

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 view the style.css file from your theme editor ( Apperance -> Editor ) and find line 46, and you should find the following there:

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

Copy this style to your custom.css file. Any style you define in custom.css will override the styles in style.css. You can read the Best practices when customizing a WooTheme tutorial to learn more on how to best customize your theme.

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!