Using Firebug to experiment with styles on your WordPress blog before making permanent changes
For many WordPress users who are self-hosted, changing the styles on a theme can lead to a great deal of frustration. After all, not everyone is proficient in CSS. And some bloggers, who have a basic grasp of CSS, don’t necessarily know where to find the particular code snippets they are looking for to alter styles. Even expert coders — without assistance from a program — can have a great deal of difficulty finding the styles for elements in the theme that they want to change. That’s just 3 reasons why you should install the fabulous Firebug add-on for Firefox.
Once enabled, you will be able to call upon the mighty power of the Firebug god, who lives at the bottom right hand side on your Firefox browser window. Just click that little icon to summon him. Here is the window that will pop-up in your browser after you perform the summoning ritual with the click of a button (we’ve come a long way since human sacrifices, huh?):
On the left hand side you have a navigator for the HTML/PHP or whatever document type page you are viewing. This navigation window allows you to view the contents of entire files, whether they be the CSS file for your site (style.css for WordPress), the HTML in the page you are viewing or a JavaScript file (.js) that the template uses.
The left-hand window shows you the styles for the selected element (which, in the screenshot above, is for the body tag) and so much more. Not only does Firebug display the location in your external CSS file of the styles (specifically what line it is on), but Firebug also tells you where styles are inherited from.
The styles in the above image (in the right-hand window) are all applied to the body tag; so, naturally, there are no inherited styles. But if you click on the plus arrow for the body tag, you can un-collapse the tag, allowing you to see the tags contained within. Most theme layouts nowadays use the <div> tag as building blocks, as opposed to tables (which are so fifth century). So you should see a list of <div> tags after un-collapsing the body tag and then un-collapsing the main container div (there will usually be one of those) in the left-hand window.
At this point you can navigate through your elements and view their inherent/inherited styles. You can also use the inspect button (a blue arrow icon on the top left of the Firebug window) to find an element. Using the inspection tool is a MUCH easier way of finding a particular style for an element than navigating manually to an element with the left-hand HTML tab.
Editing your pages with Firebug
And here’s where it gets wild.
You can also edit every aspect of your page (including the CSS, JavaScript, HTML and PHP) by simply double-clicking code and the changes will show up, in real-time, in your browser window. I’m going to give you a demonstration.
First, I open up my Firebug window (after performing the clicking ritual to summon the Firebug god), click on the inspector button (the blue arrow icon on the top left of the Firebug window) and select an element on the page. I am going to select the title of this page, which, Firebug tells me, is in an <h1> tag.
**Note that you cannot see my mouse which is hovering over the Blogtap.net heading in this screen shot.
Then I am going to click on the highlighted code which says “Blogtap.net” in the left-hand window (which displays the HTML content) in the link (a) tag. I am going to change it to something like …
Tada! It’s just like magic. Firebug uses AJAX to display your changes without refreshing the page.
Once you’ve experimented with the different things you want to change on your blog (whether it be fonts, headings, padding, margins) you can go and make the changes within your template files. Firebug tells you exactly where your styles and HTML tags are located so making permanent changes is a very simple matter.
Tags: firebug, firefox, styles
