firebug

When you are customizing your Protostar template for your Joomla 3 site, you need to look at the front end of the website and see how your custom styles are working. Often are other styles being applied to specific elements and these settings don't work with your desired layout. You can use web developer diagnostic tools such as Firebug for Firefox that allow you to look at the underlying HTML and styles. This way you can see which styles are being applied, in what order and from what source.

A web diagnostic tool like Firebug for the Firefox browser is essential for inspecting the various elements on your web page and seeing the hierarchy of styles that are being applied to that element.

If you are using Protostar, you may wish to change the font of a heading, the width of a column, the background color, or a multitude of other aspects of your website's appearance. It is futile and time-consuming to simply dig through the style sheets to see what is currently styling the element. Firebug allows you to select any element of the web page and see just what styles are currently being applied. To override these existing styles, you must match the elements being specified and load your overriding style AFTER the existing styles.

Install Firebug for Mozilla Firefox

If Firebug is installed and enabled in your Firefox browser, you will see a little insect icon in the upper right corner. To see it has been installed, pull down Tools, select Add-ons and click on the Extensions tab. If previously installed, Firebug will appear in the list. You can choose to enable it here.

To install Firebug go to http://getfirebug.com/ and click on Install.


Launch Firebug

Icon for FirebugTo launch Firebug, click on the insect icon in the upper right of the Firefox browser window or click on F12. The firebug window will appear at the bottom of the screen. You can still scroll through your web page, it just has a smaller window.

Close, minimize or detach FirebugYou may choose to detach the Firebug window from the bottom of the browser by clicking on the double window icon. This is especially nice if you have a large monitor or work with two monitors.


The Firebug tabs

The tabs in Firebug

The tabs in Firebug allow you to perform different diagnostic tasks.

Click on the Firebug icon and you get a dropdown menu with a selection of options for Firebug

Click on the next icon, the window with the arrow, and you can select an element from the browser window and see where it is in the HTML and what styles are being applied.

The two arrows let you scroll through the tabs.

The arrow and three lines generates a command line popup at the bottom of the Firebug panel. This is used for debugging JavaScript.

The Console tab opens up the Console window. This window is used for troubleshooting and debugging. It displays what is currently happening with script  and displays errors.

The HTML tab displays the generated HTML for the page and the styles that are applied to the selected element.

The CSS tab displays all the style sheets that are currently loaded into the document.

The Script tab displays the JavaScript files that have been loaded into the page.

The DOM tab allows you to inspect the DOM properties of the web page

The Net tab allows you to watch the elements as they are loaded onto the page.

The Cookies tab allows your to see what cookies are being accessed by the web page.


Using the HTML tab to style your Joomla web page

firebug html panel

On the left side of the Firebug HTML panel, you see all of the tags of the HTML document, any inline styling and content. You can open up parent elements with the little plus sign to see the child elements that it contains.

The HTML tab displays the generated HTML format of the current web page. By generated, we mean that it is the end result of whatever went into the display of the page, whether the element or content was fed into the page via PHP or JavaScript. Joomla uses PHP to compile each web page. Plugins and Components, may use JavaScript to create elements and add inline styles.

In this panel you can see what has been included in the <head> section, such as meta tags, links to style sheets or script files, if a <style> section is included with the page, if Google Analytics code is being loaded, etc.

You can also see all of the elements displayed on the web page within the <body> tag. You can click through the elements to get to the one that you are styling, or you can use the element inspector to jump to a specific element.

If you use the element inspector (the window with the arrow) to select an element displayed on the web page, this element will then be highlighted. Simply click on the window and arrow icon then reach up to grab one of the elements displayed on the page, such as a heading, a sidebar, an image, etc.

firebug style panel

On the right side you see which styles are being applied to the highlighted element.

These styles are shown from the various locations in your style sheets, or if the element is being styled from the <head> section of the HTML or if there are inline styles being applied. The styles that are higher on the list will override matching styles lower in the list.

You will also see from which style sheet the style is being loaded and on which line in the style sheet.

Select the other available tabs for a different way to see what is styling the selected element.

  • The computed tab show the end result of all styles applied.
  • The layout tab displays the margins and padding for the selected element.
  • The DOM tab allows you to inspect the DOM properties for the selected node.
  • the Events tab allows you to inspect the event listeners for the selected node (used for JavaScript).

Has BJ.Zemplate.com helped you with understanding Joomla?

If you would like to make a small contribution to help fund this resource, that would be great, but do not feel obligated in any way.

Donation Amounts


Still not finding a special topic?

Use Google's Search function below for search the content of bj.zemplate.com.