Using Firebug to edit your Website

0 Flares 0 Flares ×

Easy CSS Edits with FirebugSupernova Media

Did you know that with Firebug you can edit any website’s CSS live. Possibly one of the best keep secrets out there.  I bet your wondering what the devil is Chrissie talking about now?  Well it’s so simple and fun to do.   

You will need to be using Firefox web browser and have the firebug extension installed. Click here for your firebug.   For Google Chrome users click here.  

What is Firebug  – Firebug integrates with Firefox to put a wealth of web development tools at your fingertips while you browse. You can edit, debug, and monitor CSS, HTML, and JavaScript live in any web page.
[Source:  Firebug homepage]

For this blog I want to look at the editing of css and html for WordPress websites.  Once you learn how to view and edit you will also be able to troubleshoot CSS element problems and assist you in custom edits for your WordPress site’s layout and design.

Let’s start, goto any site, open up firebug.  ( from your browser, under the tools tab, goto web developer, then firebug, or hit the  F12  key ) to open firebug.

Here’s our how to video on YouTube!   There was just too many screen shots to explain everything so I had to make a video 😀

I really love firebug it has assisted me with my coding skills and hope you find it useful too.


  • always download your style.css file via ftp, from your site, save that file as the original, and make your edits to a copy of the style.css
  • Firebug will also show you the line number of elements which helps when you are looking for that line in your style.css file
  • before you upload your newly edited style.css file  always ( and I mean ALWAYS ! ) rename the original file such as:  stylemaster.css , then upload the edited file, making sure rename the new file to style.css 
  • view your site, reload/refresh to see your edits.  If the site breaks, all you have to do is delete the current style.css file and rename the original one back to the style.css, and your site will be reset.  

By renaming the original file it is easy to revert back to it when things don’t work. 

I know you can use the editor in the WordPress dashboard to makes edits to any of your sites themes files, but if you make a mistake with the code, and save it, there is no way to revert back. You will need to have a copy of that file to ftp to your site’s directory to replace the corrupted file.

I would like to hear from you. Did you watch the video?  And are you using Firebug?  Please post a comment.


[Blog by Chrissie ]

Want more of this awesome content?


Sign up to receive our Monthly Newsletter

Chosen one of the Top Ten Social Media Companies in Canada

Join our eClub

Powered by Subscribers Magnet

Follow Us on Google+

View More of Our How to’s on Slideshare

View Supernova Media's profile on slideshare
About Nancy Bain

Our services include building optimized, functional and self managed WordPress websites, Nova Scotia social media training and consulting, interactive full screen high definition virtual tours with lead capture and print advertising. For most of our clients, we are their one stop solution for all things marketing, branding and small business development related.

0 Flares Twitter 0 Facebook 0 Google+ 0 Pin It Share 0 LinkedIn 0 StumbleUpon 0 Buffer 0 0 Flares ×