

Once you've tested the CSS in Firebug, change or add the styles to the correct stylesheet via template manager. Simply click the various divs in the left panel to explore the CSS styles applied.

In this example we've changed the margin of a paragraph.

In the right panel experiment by altering the CSS and see what happens (you can't damage the existing CSS file - if you make a mistake simply refresh the screen and try again). In this tab the HTML is in the left panel and the CSS is in the right. Once the panel opens there are several different tabs available, but we are going to utilise the HTML tab. Right click on an area of the website you wish to examine and choose "inspect element" from the list that appears. Search for the Firebug extension and install (you will need to restart the browser before you can use the extension) Once installed, navigate to the Tools tab in the Firefox tool bar and click add-ons. If not already using Firefox, download and install the Firefox browser from Mozilla. (There are firebug Lite versions and similar programs for Chrome, Safari and IE, but they are not as user friendly.) Firefox Whatever your browser preferences, Firebug works best with Firefox. When moderators reply to these posts its frequently answered using firebug ( ) to troubleshoot the CSS.įirebug offers several handy features including the ability to examine, test and improve the CSS of the website. In this tutorial we are going to alter some CSS using the Firefox Firebug extension.Ī common post to our forums is asking how to view and change the CSS of a Joomla template or extension.
