Please note that computed style may look different than it looks in your CSS files. This is where the magic happens as this is where we are going to play around to change the design of various template elements. This is the HTML code of the page rendered by all scripts and front-end view of components and modules. This is the output of the code, the front-end of Joomla! powered website.

When you identify the change you have to make, you can go back to your editing program. Note that the CSS code shows on the right side of the screen, allowing you to do some changes to see how things would look like without having to modify your original files.Click on the different sections of the site (always on the bottom half of the screen) and see on top how the area you clicked on is highlighted.

You can navigate through both HTML and CSS code.

Open Firebug and the screen will split in two parts: one will be the website you were visiting (on top) and the other half will be Firebug with the code behind what you are watching.

OR click here to download and install Firebug. Click on the first option on the top menu, which should say “Get Add-ons,” and search for Firebug.

Go to the Tools menu in your Firefox browser and look for “Add-ons.” Click on it and a new window will pop-up.

We are going to download and install Mozilla Firefox, so please click here to download.

By using Firebug, you can find the mistakes on the HTML or CSS code you wrote, and will also find out why something is not working. It is capable to show you each HTML element (html tags, javascript code, css code, etc.) on the webpage so it’s really helpful in understanding the template structure. This is extension for Firefox browser that can really help you during templates customization. We would like to introduce a very useful and important tool called FireBug.

Firebug download for firefox 27