Web Design Basics – Using Firebug to Help You Style

Using Firebug to Help You Style

Have you ever looked at your website and wished that you could tweak just minor details of your design? Even if you’re not a web designer, it’s possible to make small changes that can make your theme exactly what you want it to be. But, if you’ve ever done any WordPress design, you know that each theme has hundreds of different elements and selectors that affect every little piece of the site. Though you might think it’s complicated at first, finding the piece of code you need is actually really simple, especially when you have web inspector tools like Firebug at your disposal. Firebug is an add on for Firefox that ‘inspects’ different elements of a page, and tells you what part of the code is affecting that section.

Using Firebug to Help You Style

Each different browser has a different program or add on like Firebug that can do the same thing, but I prefer to use Firebug because it’s simple and I can keep my normal browser window (Safari) separate. To start using Firebug first you need to have Firefox installed on your computer, then you can install Firebug as an add on. This will add a little firebug icon to the toolbar at the top of your page, and then whenever you want to use firebug you click on the bug and it opens the inspector. It might not look exactly like this because you can set the inspector window to come up at the bottom or on the side of the page, it’s just up to you.

Firebug Inspector

Step 1

In my WordPress design tutorials, Step 1 is always to create a child theme. If you have one already – then great – bypass this step. But, if you don’t have a child theme, you need to stop right now and read my post – How to make a child theme & why you need one. In a nutshell, a child theme allows you to create a safe place to put all your design changes so you never risk breaking your theme and your edits are never lost.

Follow the steps in that post to create the child theme, and then you can come back here and continue on with this tutorial. Once you have created your child theme you go to Appearance > Editor to find the style.css file and that is where you put all your code in, or you can access it through FTP.

Step 2

Once you’ve got a child theme set up, you can start using Firebug to help you make edits to your theme. First, install the Firebug extension onto your Firefox browser, then you can get stared.

Step 3

Once you have installed the extension, you just click the little bug icon in the toolbar at the top, and a window will pop up with code that corresponds to the page you are viewing. You can choose to make the window appear at the bottom or sides of the page, or even completely detached depending on what works for you and your computer size.

Step 4

Whether you’re making small changes like the colour of a font, or big changes like the layout of your page – Firebug can help. Once the firebug window is open, you need to click on the inspector button towards the bottom of the page that looks like an arrow over a box.

Firebug Inspector

Once you have this tool active, then you can click on any other element of the page. The different elements will highlight as you move your cursor over them, so you know that the inspector tool is working. Then, click on the one that you want to inspect. You are trying to find the ‘selector’ – the class or id of the area that you want to style. The selector tells the computer to apply your style code to that specific area of the page. You can read a bit more about selectors in my post Classes & IDs – Understanding Selectors.

In the image below I’ve selected the header of my site. In the small window in the bottom right, you can select ‘Style’ to see the css styling that is written for that section, ‘Computed’ to see what the styles are exactly as they affect that section, or ‘Layout’ to see a visual of the size, padding, and margin of that section.

Now when I select the header, I can see that ‘#branding img’ on line 544 is the selector that is affecting it when I look at the style section on the right. Then if I click on that, this shows me the whole style sheet over on the left.

Firebug Inspector

Firebug Inspector

Step 5

If I decide that this is the right piece of code I want to edit, I can try out my edits right in the window. Say I wanted to edit the size of the header, I click on ‘width’ which is currently set at 100%, and I change it to 50%. You can type in the 50%, or use the arrow keys to toggle up or down one by one. If I’ve chosen the right piece of code, this should immediately affect the element you’re trying to edit. In this case it’s made my header a lot smaller.

Firebug Inspector

Step 6

But remember, you still need to go into the actual style sheet and make these changes, since these changes aren’t permanent – they’re just used so that we can test styling to see that it does what we want it to do. So, now that you know that branding img {width: 50%;} makes the header smaller, then you can just type that code into your child theme style file and save. It will override the 100% width code in the parent them, and voila, your header is now half the size it was before! Obviously you wouldn’t want to make just this change because now the header doesn’t look great, but you get the gist!

The changes should take effect as soon as you save your child them style.css file, and then refresh the browser. If they don’t, something has gone wrong. You’ve used the wrong code, or some other code is somewhere else overriding yours, so you just need to dig deeper to find it.

If you’ve got any questions or concerns about child themes or Firebug that you can’t seem to figure out, just ask! I’m happy to help.

What inspector do you use to debug your themes? Let me know in the comments below!

14 thoughts on “Web Design Basics – Using Firebug to Help You Style”

Leave a Reply

Your email address will not be published. Required fields are marked *