Skip to main content


Laura Gordon,

I made this presentation at the JoomlaNYC User group meeting on December 8, 2011.

Firebug is a very powerful tool that helps me to modify any template / design to my client's wishes.  Without it I would be completely blind.  By using it, I get the 'secrets' behind the website, how it is built, and how I can modify it.
Once you have firebug installed on your firefox browser you can use it to make online TEMPORARY changes to your website.   To view the html / css, just right click anywhere on the screen, and select, ‘Inspect Element’, the bottom half of the screen will show on the left the actual HTML code, on the RIGHT the css values, including the files that the css are pulled from.

The bottom right of the screen can be edited dynamically to see the end results, but this is not actually changing any css files on your website, it is just temporary.

To see the actual css name that it is being pulled from, just put your mouse over the (red.css), and it will tell you the line number and the actual file location of that .css file.

Personally, I like to modify changes here, then I copy my changes and put them in my .css file (preferably custom.css, if there is one).

An advantage of putting them in a custom.css file, is when your template needs to be upgraded, all of your changes are preserved.