Before you use Firebug to edit any code on your website, backup up your site and make sure you know how to replace any files that you may accidentally damage. You need FTP access and you need to know which files are important before you do this.
A good alternative, if you are just starting to practice editing code, is to use the Jetpack WordPress plugin and the Custom CSS feature.
After installing and configuring the Custom CSS feature of Jetpack go to…
Appearance > Edit CSS. In your dashboard.
Install Firebug Add On for Firefox.
In Firefox go to Tools > Add Ons > search for Firebug.
As you make changes to your style sheet, if you don’t see the changes, clear your browser’s cache.
Open your web page in Firefox.
Open Firebug.
Click the Element Inspector button in Firebug.
Click the element on your page that you want to edit.
Use Firebug to find the html div or class tag.
- In the html section of Firebug (left hand side) look for the tag you think is styling the page element you want to change.
- If the html tag has a plus sign next to it, click the plus sign to expand the code.
- Hover over different tags and see which part of your web page is highlighted.
- Click the tag when your chosen page element becomes highlighted Firebug displays the CSS for the page section you want to edit.
Look in the right hand panel of Firebug. The first element listed is usually the most specific CSS style rule that is styling the highlighted page element.
Make changes in Firebug and see if you’ve got the right style rule.
- When you’ve found the style rule, edited the CSS to achieve the look you want.
- Open your theme’s CSS and go to the line number you found in Firebug.
- The formatting may be slightly different to the way it looked in Firebug but the string of selectors and their order will be the same.
- Copy the selected code from your style sheet. Firebug told you which line to find it on in your style sheet.
- Paste the CSS code you just copied from your style sheet, back into the same style sheet at the very bottom.
- Make any changes you need in this bottom piece of code, it will override the code further up the page.
- Save your changes.
How to make the changes in Firebug
- In the CSS panel on the right, click a green CSS property.
- Press tab on the keyboard to move to the value section of the code.
- Press the up and down arrow keys to cycle through different options or type in a value by hand.
- Press tab to move on again to the next property.
- Your changes can be seen on the web page as you make them. BUT! The changes are temporary.
- Add the changes to the bottom of your theme’s style sheet to make them permanent.
To install Firebug…
In Firefox, go to Tools > Add Ons > search for Firebug.
I hope you found this Firebug tutorial useful, you can find more WordPress web design stuff on Philip’s blog.
