Handy Trick for Customizing Wordpress Themes: Mozilla’s Firebug Plugin

Posted: December 30th, 2009 | Author: Flippa Chick | Cool Comments: 11 Comments »

For many site flippers, using Wordpress as a content management system is a great way to quickly and efficiently design a website. However, not everyone is knowledgeable when it comes to playing around with CSS in order to edit a Wordpress theme to their liking. Fortunately, editing a Wordpress theme’s CSS files doesn’t have to be a difficult feat to accomplish thanks to Mozilla Firefox’s Firebug plugin.

Since I started using the plugin, I have found it to be a lifesaver when trying to customize Wordpress themes. While I am knowledgeable with CSS, I really hate having to test my changes using various software — or constantly refreshing web pages to view the final outcome. With Firefox’s Firebug plugin, I can not only edit css and other html files/settings, but I can do it all on the same screen, live, and track the changes along the way. This comes in handy when I’m trying to see what color scheme works best, or, when I’d like to change more advanced features of a theme such as margins or padding without wrecking havoc on the original CSS file.

How to Use Firebug

Your Firefox browser does not come standard with this plugin so it will have to be downloaded separately. You can download the plugin by visiting here. Once you have successfully download and installed this plugin, locate the Firebug icon in the lower right pane of your screen. As the name suggests, it will look like a tiny bug on your browser’s screen.

Video Tutorials

In honor of my first blog video tutorial, I went ahead and created a quick overview of how to use Firebug. After watching the video, take the time to really explore your theme and what you can do with the Firebug plugin.

If you still don’t have a clear grasp of what margins, padding, and other styles are, W3Schools is a great resource to utilize to understand the fundamentals of CSS. You don’t need a thorough knowledge of CSS to get started, but a clear understanding of what you are editing will help you revamp an existing Wordpress theme to your heart’s desire.

Enjoy the video!

As always, if you have any questions or comments — or if something was unclear, feel free to shoot me a message below.

About Flippa Chick

Yolanda is a little bit of everything, wrapped up in a whole lot of something. By day she operates full-time online designing, crafting content, and making her passive income dreams a reality. At the moment she can be found on this here blog, or helping webmasters out with private label niche content at Shop Flippa Chick.

More Related Posts

Here are a few posts that you might be interested in:

11 Comments on “Handy Trick for Customizing Wordpress Themes: Mozilla’s Firebug Plugin”

1 Wordpress Plugins » Blog Archive » Handy Trick for Customizing Wordpress Themes: Mozilla's Firebug … said at 2:25 am on December 31st, 2009:
[...] the original here: Handy Trick for Customizing Wordpress Themes: Mozilla's Firebug … Latest & Greatest Themes from Themeforest.net Glistor WP CMS + PORTFOLIO + BLOG3 [...]
2 Handy Trick for Customizing Wordpress Themes: Mozilla's Firebug … « Hot WP Themes said at 2:34 am on December 31st, 2009:
[...] a great way to quickly and efficiently design a website. However, not everyone is.Read this article:Handy Trick for Customizing Wordpress Themes: Mozilla's Firebug …Related Posts:Handy Trick for Customizing Wordpress Themes: Mozilla's Firebug …Handy Trick for [...]
3 Ruth - Web Career Girl said at 7:33 am on December 31st, 2009:
I really love this plugin too, it’s fantastic and I can’t believe I didn’t start using it sooner! I’m sure this post is going to be really helpful for so many people who didn’t know where to start.

[Reply]
4 Dave Doolin said at 3:00 pm on December 31st, 2009:
@ 5:00…

“Cheat like a whore”?

My goodness, lady.

Great tutorial BTW!

[Reply]
Flippa Chick Reply:
February 24th, 2010 at 1:14 pm
Hey there Dave…

You know…I wasn’t aware of that little advertisement until you brought it to my attention. Lol

…I’m still wondering what it has to do with color codes, but anyways, thanks for compliment on the tutorial. =)

[Reply]
5 Jim Hardin said at 7:32 pm on December 31st, 2009:
Hi Yolana!
Sounds cool! I am definately not a CSS expert. I really don’t know it at all so I would probably mess things up. This sounds like it could really help in making customizations to my blog. I’ll have to check it out.

Thanks
Jim

[Reply]
Flippa Chick Reply:
February 24th, 2010 at 1:09 pm
Hey there Jim!

I apologize for getting back to your comment so late, but if you have no knowledge of CSS, then this is one add-on you should download! If you’re afraid of messing things up, try setting up a test installation of Wordpress and just play around with things until you get the hang of it. =)

[Reply]
6 Dejan said at 5:10 am on January 21st, 2010:
This was a really helpful video!

I had Fire Bug already installed but I never knew it had such potential.

It would be a really cool idea to make a video series where you take a regular stock wordpress theme and change it to be suitable for lets say a website that covers a gardening niche. From zero to complete.

It doesn’t have to be complicated.

Regards.

Dejan

[Reply]
Flippa Chick Reply:
February 24th, 2010 at 2:21 pm
Hi there Dejan,

I have a video series in the works for a site flipping product that should be complete in the middle of this year. In the meantime, I’m launching a 4-week course on the basics of building and flipping a website that you can find right here on this blog starting today. =)

[Reply]
7 Rob said at 3:13 pm on February 9th, 2010:
Thanks for the intro to firebug – great overview

I use the web developer add on but this looks to be faster

[Reply]
Flippa Chick Reply:
February 24th, 2010 at 1:07 pm
Hi there Rob!

Thanks for dropping by!

I find Firebug to be much faster than a lot of other add-ons and even faster than the same feature that you can find on Google Chrome.

[Reply]