How Firebug Helps You Design Your Blog

by Phil Barron · 49 comments

Firebug logo

If you want to make a few quick web design tweaks to your WordPress theme framework, Firebug, a free add-on for Firefox and Chrome, can help you do it.

Let me explain.

Firebug provides you with X-ray vision that exposes the HTML elements of your site and identifies the CSS styles at work.

Even better, Firebug allows you to make changes to those styles in real-time, meaning you can make a change and see how it affects your website instantly

Not a coder? No problem!

When you’re using a theme framework like Thesis, there are styles attached to each section of your blog—even if you can’t see them in action.

This means, when you start using a web inspector tool like Firebug, all you have to do is add some CSS styles and you’ll be good to go.

Firebug for Firefox Demonstration

Firebug inspector

Figure 1. See how Firebug exposes the code and styles associated with the code?

Let’s say you wanted to remove the underline from all of your links in Thesis. You add .custom a {text-decoration: none; } into your stylesheet, save it, and check out your website. In most cases, the underline is gone, as expected. However, there are still a few other links in your Footer that have an underline. What’s the deal?

In most cases, you’d have to dig through your CSS file and discover why those footer links remain unchanged. However, with Firebug, you can highlight the specific link in question, expose the HTML and CSS, and see exactly what’s going on in just a few seconds.

For example, in Figure 1 above, you’ll see that the footer links have a bottom border, which explains why they keep their underline when you remove the text decoration. So, if you wanted to remove the underline, you’d have to remove the bottom border from your footer links

However, what if you want to test out your change before you add it into your stylesheet? Well, as I mentioned earlier, Firebug lets you do that on the fly so you can see the results instantly without affecting your visitors

Figure 2. When you click the CSS in Firebug, Firebug will let you edit it in real-time.

In the right-hand pane of Firebug, as shown in Figure 2, you can select the default value 1px solid #CCCCCC; of the border-bottom property, and replace it with the value you want—which is none. See figure 3.

Figure 3. In Firebug, you can type over the existing styles without any problems.

As you change the value of border-bottom, you’ll see that the underline disappears from both of the footer links. Having confirmed in Firebug that your proposed style rule change will have the effect you want, you can now move to make the actual change by writing your style rule into custom.css:

.custom #footer a { border-bottom: none; }

How Firebug Lets You Emulate Your Favorite Websites

Let’s look at another hypothetical situation. Let’s say you see a website with some awesome widget styling and decide you’d like to emulate it on your own website. You could hire a web designer, but if you wanted to do it yourself, you can launch Firebug and see exactly what CSS styles are needed to create a similar widget.

For example, see figure 4:

Figure 4. See how Firebug shows you the specific H3 styling associated with the widget?

As you can see, the styles associated with the widget are as follows:

.custom .sidebar h3 { background: none repeat scroll 0 0 #111111; color: #FFFFFF; font-family: Georgia; font-size: 1.4em; font-variant: normal; letter-spacing: 6px; margin: 0 -20px 10px; padding: 0.5em 0.6em; text-transform: uppercase; }

By default, in Thesis, your widget looks something like this:

firebug edit WordPress widgets

To test the custom style from Figure 4, open up Firebug, click on your widget with the inspect button, and paste the styling into the CSS section. And, just as in the footer link example earlier, Firebug will show you what it would look like on your site:

WordPress widget recent comments

The title is completely changed! It’s close to what you want, but do you see how the widget title is a little wide for the sidebars you’re using? You can edit the rules you are testing in Firebug until you are satisfied with the result. In this case, you would edit the values for margin:

.custom .sidebar h3 { background: none repeat scroll 0 0 #111111; color: #FFFFFF; font-family: Georgia; font-size: 1.4em; font-variant: normal; letter-spacing: 6px; margin: 0 -11px 10px; padding: 0.5em 0.6em; text-transform: uppercase; }

And the result:

Perfect! Now you have exactly what you want, all you’ll have to do is paste your style rules into your custom.css and you’ll be good to go.

Let’s note one other detail before leaving this topic> See the value with the line drawn through it (beside the cursor) in the screenshot below?

override CSS with Firebug

Figure 5. See how Firebug puts a line through CSS that no longer applies due to custom CSS changes?

That value, #555555 (a shade of gray), is the default color assigned to the text in the Thesis sidebar widget title. That value is struck out in the screenshot above because it has been overridden by the new color value of #FFFFFF (white) placed in a rule in custom.css. Firebug keeps you informed of the values you are replacing as you customize, and where those default rules are located.

The Bottom Line

FIrebug helps you, coders and non-coders alike, make design tweaks to your website without knowing much CSS. Sure, if you want to do something fancy, you’ll have to find the right CSS for the job, but Firebug does all the heavy lifting—searching through hundreds of lines of CSS—for you.

Have you used Firebug? If so, tell us about your experience in the comments!

If you enjoyed this article, enter your email below to get free updates!

{ 49 comments }

Willie Jackson

It’s really easy to think of information like this as common knowledge, but it’s immensely valuable to those new to web design. Nice post 🙂

Adam Baird

Seriously. Learning to use firebug was an absolutely HUGE step forward in my development as a designer. It does seem second nature, but if you’re new to this stuff, this post is absolute gold. Great work Phil!

Derek

I’ve been doing the web thing for about 5 years now and I wish I had Firebug from the very beginning. It makes changing your website a cinch, even if you know minimal HTML and CSS.

Today, I couldn’t survive without it. One of my favorite features is how Firebug will automatically measure the width and height of your website in the compute tab.

Roseli A. Bakar

I really love how Firebug let you emulate other sites ! Thanks for the tips.

Genuine Chris Johnson

Really bringing it.

Spreading the hacker ethos. love it.

Derek

There’s an ethos associated with being a hacker?

Genuine Chris Johnson

Yeah, there is. Just get stuff done drive on and eliminate drama.

Thomas Griffin

For me, Firebug is one of the most crucial elements of design and development – right up there with Photoshop. A good, thorough understanding of how to use Firebug will save you countless hours and lots of money designing websites. Excellent post!

JC

Dude, no crap! Buying THESIS and then finding out about Firebug was the beginning of my design career. Without this wonderful concoction of web awesomeness, I’d be incomplete!

Joanna G

Firebug is indispensable for someone like me who picks skills up as I go along. I love it how satisfies my how-did-they-do-that curiosity on other sites. It’s honestly helped me understand CSS better. That it fixes my errors as well is an added bonus. Go Phil!

Andra

Love it!

Jacek Golebiowski

I started using Chrome, where is no full version of firebug. Lucky, there is tool for developers, which is good for the most of time.

flaminglacer

Brilliant explanation of how to use firebug to best advantage. Having spent the last few weeks doing CSS courses, I’m really looking forward to producing some good work based on the much loved Thesis

Larry O

Firebug is a super great suggestion for code-writers at any skill level. Gets right to the heart of helping to modify the custom.css file. WTG PHIL!

Jonathan

Nice tip! I just installed Firebug based on your recommendation.

I’m a beginner when it comes to HTML and CSS, so instant feedback when making changes and the ability to model existing sites will be very helpful.

The trial and error method I’d been using seemed awfully slow…make a change, save, switch browser tabs, refresh site to check results, go back and make another change, save, switch browser tabs….etc. This should save a lot of time.

Thanks!

Kyle

I use firebug already, but this explained it more in depth! I love all these articles, thanks for posting! Glad to be a part of the email list and get these updates!

Dr. Paul Weinberg

New to Thesis and new to website/blogging, I am grateful for the information onf the Firebug tool.. Thanks for the tip and for the help…Great post!

Terje MK

Wow!

Just what I needed. Been playing around with my thesis installation, firebug and css for a couple of weeks with the result: moore questions:) This post just made it for me when it comes to how to use firebug to understand my thesis tweeking.

So thanks for a great post.
Terje

Derek

I haven’t been in the game long, but Firebug has without a doubt been the best tool for web design I have ever come across. I’ve been using it since the beginning (only about a year) and will continue to do so from here on out. Chrome has something similar that comes automatically with the install but it’s not quite as robust and lacks the usability that Firebug has. Cheers to firebug!

Tom

This is great. I have been using Core FTP Lite as my main ftp client. I would either edit in Dreamweaver, which takes a bit to load or Notepad. This is so much easier.

jaime Mondestin

This is a darn great post. I was having to trouble figuring how the firebug addon works. I even went to my local library checking out a book specifically for CSS. It’s a great book, however this post has just reinforce what was in my face the whole time. Thesis Rocks and with this firebug addon it will change the way web design forever….

jaime Mondestin

I had a brush with the add on before. However, I see that it was pointing to my Thesis sytle.css not my custom.css

Thank again for the post. Now I understand that it was a dynamic view on what my site would look like without manually altering the style.css file.

ellen madono

I thought firebug was beyond me. I can do this. Yeahhhh!!!

Derek

It’s really easy to use. It’s the secret weapon most developers use, especially when tweaking Thesis designs 😀

Joel

What a great tool for blogging and creating sites! Thanks for sharing!

Jörgen Gedeon

I’ve had the pleasure of using Firebug now for quite some time. Excellent tool for dissecting your own website as well as others.
Thanks for this great tut!
/J

PongGuru

I don’t think Firebug will work on Internet Explorer.

Derek

Firebug is a Firefox and Chrome add-on.

Phil Barron

Internet Explorer has its own built-in inspector feature called Developer Tools. The F12 key will pull it up for you.

Bilal Ahmad

Firebug helped me a lot in my blog designing. It works great for newbies, but i am still facing a problem with IE 6. I don’t know how to fix this. Any way firebug is really very helpful for beginners.

Mahboob Shah

Hey thanks for the share.

And check the 2nd para under figure 1, ‘you can’ is misspelt as ‘youc an’.

Regards,
Shah

Kev

Personally, I prefer the Web Developer Toolbar for Firefox: it just seems easier to use. If I need to see which style is affecting a particular part of a page, I just select to View CSS, click on the element and all the CSS rules that affect it appear in a pane along with the complete selector so that I can go into Thesis and change exactly the correct style.

Derek

You should write a tutorial for us that details how you use the Web Developer Toolbar for Firefox! We’d be able to publish it here on DIYthemes.com

Dinu

sounds cool 🙂 I try to learn things using the “inspect element” option in chrome .. I would consider installing firebug lite on chrome

Jacques

Firebug itself is great, but it’s such a shame it’s attached to such a slow browser.

That’s why I use Opera Dragonfly, which is almost as good (it’s only slightly worse in the script department), but Opera itself is, I’d argue, a much better browser.

gabe

Seems like firebug is just another version of the Web Inspector, a tool I’ve been using in firefox, safari and chrome for a long time. The web inspector comes built into these browsers (and most others that I’ve found) and provides the same information (you can edit it and see changes too, just like firebug), but the web inspector also lets your right-click an element on the page and select ‘inspect element’ to go right to that element in the inspector. Does Firebug allow this? It can be a real hassle to go digging through nested elements looking for that one element you are trying to style… To access the web inspector on a mac, in chrome or safari, you can use the short cut command + option +i

Phil Barron

…but the web inspector also lets your right-click an element on the page and select ‘inspect element’ to go right to that element in the inspector. Does Firebug allow this?

Yes, it does.

James

This is exactly what I need. I am new to blogging and anything that shortcuts the shortcut is very valuable to me.

Gee

i have read about firebug sometime ago but haven’t tried it because i’m not sure if it really works. reading about it here in the Thesis Theme site was just the go signal I needed to start using it.

thanks for sharing.

Tom

Thanks for the helpful information. I’ve had firebug installed for a while but never utilised its potential. Time to see what else I might have been missing.

Chris@Apple Roof Cleaning

It looks like a very useful gadget for us non technophiles.

Sagar Gholap - AspiredTechie.com

I must say that its the most awesome addon I’ve ever used. It helped me improve my css skills and its because of it that I have developed many free thesis theme skins which I will be launching in Dec 2010.

Hats off to Firebug and Apple Webkit 🙂

Regards,
Sagar G

chung

Firebug seems to be useful but I have a problem..
I’ve been playing around with Firebug for a week now and I can’t seem to implement the changes that I made in Firebug to my actual thesis theme design.

It just wont stay for some reason.

I also want to take out text and put in new text….can firebug also do that?

Perhaps someone can direct me to a comprehensive tutorial on firebug or if someone could help me in figuring this out..

Thanks.

Chung

Rick

I’ve run into a few problems with my CSS and am going through this tutorial again. I tried using the Developer options in Chrome but I’m going back to using Firebug (also in Chrome) to make it a bit easier. I could have sworn I wrote a tutorial like this a while back! 🙂

You guys are definite design ninjas. Way to go.

David

Having just purchased the Thesis theme, I have to say that it is incredible! I love it.
#Chung
Firebug will not alter the CSS for you. It shows where the CSS is coming from and where to add or delete whatever you require in your css document.

On another note – I purchased the Developer’s theme of Thesis and thought that I could gain access to the Forum. I did purchase it via an affiliate link and cannot access it. Can anyone help in this regard, please?

Lancelot Nelson

Thank You!

Another great post from ayou guy. So glad I picked thesis theme. Will be using your many tips I receive, Lance

žogi

Now i’m on chrome but I use firefow only when I want to use firebug… that tool is !!!awesome!!! Create by playing around…

David

I’m always looking for ways to customize my Thesis website, thanks for the training on Firebug!

Ali

Okay, now I’m trying firebug on my live website and I like the changes I made using this add-on. Now, how you transfer and save these changes to my actual site? There is no save command that actually save my changes to my actual Wordpress site! I like to do the change while I’m observing my site changes before my eyes, but the problem I’m encountering is what’s next? What is the next step after you made the changes using firebug? Please help.

Thanks