How To Troubleshoot Your Blog’s Layout With Firebug (And Other Tools)

While it isn’t always fun (unless you’re a geek like me that is ) sometimes you need to break down and look under the hood of your blog to get things working right.

Whether it’s changing a header image, adding some space between your content and your sidebar, or just trying to change the color or size of the links, titles, or text on your blog – eventually, most bloggers end up wanting to tweak SOMETHING about their WordPress theme.

Unfortunately, this is something a lot of folks aren’t used to doing, nor is it something they want to spend a lot of time learning about… that’s where there are guys like me

Today I’m going to share an invaluable tool (well, several tools that accomplish the same task) to aid the next time you need to figure out why your blog looks the way it does.

Now, before we continue, it’s important that I point out that we’re not going over any HTML code or CSS here, just how to identify the portions of code that are causing you trouble. We’ll save the CSS basics for another day.

Understanding What You’re Looking For

Depending on your comfort level with web design, you may or may not know where to begin.

Generally speaking, if there’s an issue with your blog’s layout, you’ll need to identify which of your blog’s style rules are controlling the section that’s giving you trouble. Those style rules are written in Cascading Style Sheets, or CSS.

In a nutshell, web pages are all built by code documents, and that code is broken up into sections, or elements (like titles, paragraphs, etc). CSS then assigns ID’s and classes to those elements, and tells your web browser what each element should look like when it loads the page.

Those different elements and their corresponding ID’s and classes are what we’re going to focus on today.

Choose Your Weapon: Firefox, Internet Explorer, Safari, or Chrome

Fortunately, there is a similar tool that you can use in each of the major web browsers.

While I prefer Firefox, you may have another favorite, so I’ll go over how to find your development tool, regardless of your browser of choice – feel free to skip the sections that don’t apply to you .

Firefox

Firefox’s development tool isn’t actually built in when you install the browser – because a lot of folks simply don’t need it. Those of us that do can install it quite easily though.

Just select Tools » Add-ons from the menu. From there you can do a quick search for “Firebug.” Install the add-on, restart the browser and you’ll be good to go.

Once Firebug is installed, you can access it by clicking on the small Firebug icon that appears in the lower right-hand corner of your browser, or by hitting the F12 key on your keyboard.

Internet Explorer 8

While IE is my least favorite of the major browsers, it is still pretty popular. Those of you using the latest version of Internet Explorer can open the Developer Tools by selecting Tools » Developer Tools from the menu. Developer Tools can also be opened with the F12 key.

Safari

For all of you Mac users out there, Safari also includes a Web Inspector. To access it, simply click on the Menu button to the right of the search bar.

Scroll down the list of options to Develop. From the sub-list that appears, click on Show Web Inspector.

The hotkeys for Web Inspector on the Windows version of Safari are Ctrl+Alt+I, and it’s probably something similar on a Mac.

Chrome

Google Chrome is the newest of the major browsers. To access Chrome’s Developer Tools, click on the menu button to the right of the address bar. Scroll down to Developer, and in select Developer Tools from the sub-menu. The hotkeys for Developer Tools are Ctrl+Shift+I.

Understanding The Layout

Okay, now that your development tool is open, let’s go over the layout.

There are two main panels that you’re going to be working with. The one on the left displays the code for the current page (don’t worry if you’re new at this… it will make more sense as time goes on ).

This is what the different developer tools look like (click to expand)

There are more options that will allow you to evaluate different items on the page, but don’t worry about those for now.

In that right hand pane, you’ll also see a tab, button or section labeled “computed.” This will give you a list of all the different style parameters and their values for that particular element, so if you’re looking for something specific, you won’t need to scroll through all of the code to find it.

Selecting and Identifying Different Elements

Alright, this is the good part. Now that you have you’re browser’s development tool ready to go, we can start tracking down whatever problems you may be encountering with your blog’s design. The first step is to enable element selection. Here’s what to look for on your platform:

• Firefox:

  Second button on the left of the Firebug menu bar. Looks like a mouse cursor hovering over a blue rectangle.

• IE 8:

  First button in the row of icons in the Developer Tools Menu (just below the HTML, CSS, etc. tabs). Looks just like your mouse cursor.

• Safari and Chrome

  Small magnifying glass button on the bottom row of the window or dock.

By the way… you can select whether to use these tools in their own windows (really handy if you have multiple monitors) or to dock them at he bottom of the browser.

Just hover over the different buttons to get the tooltips, and look for one that says “Undock,” “Unpin,” or “Open in a separate window.”

Okay, back to work! Once you’ve enabled element selection mode, start moving your mouse around on your blog. Move slowly, take your time.

You’ll notice that as you move around, the different elements on your page are highlighted with borders, and in some cases their margins and padding are displayed.

Once you find an element you want to inspect, just click on it!

In the two windows of your browser’s development tool, you’ll see the code that is controlling that element: HTML code on the left, CSS styles on the right. There are, of course, more things to inspect, but you can play around with them at your leisure.

Troubleshooting The Code

Now that you’ve managed to locate the code and styles for a specific element on your page, the rest is up to you. All of the styles assigned to the element you’ve selected will be displayed in the right hand pane of the development tool, even if those styles are actually inherited from a parent element.

You can start testing and troubleshooting by modifying or disabling some of those styles right there in the development tool.

Next to each CSS style, there will be a checkbox, or some other option (depending on what browser you are using) to disable that particular rule. You can also edit any of the styles to see how something different would look right in that pane as well!

Keep in mind, these changes are only effecting the way your browser sees the page, at this particular moment – you aren’t actually changing anything on the page itself, so the next time you load the page, it will go back to the way it was.