Using Firebug With Your Joomla Website
From Joomla! Documentation
(Redirected from Discover your template css-styles and learn how to change them)
This article is tagged because it NEEDS UPDATING. You can help the Joomla! Documentation Wiki by contributing to it.
More pages that need help similar to this one are here. NOTE-If you feel the need is satistified, please remove this notice.
Reason: Firebug has now been incorporated into Firefox. Show how to use firefox and chrome dev tools instead
- quickly find the exact CSS code that styles any HTML element on a page;
- quickly identify the HTML code for any element on a page;
- instantly see the effects of changes to HTML or CSS code on the appearance of the page.
A free, narrated video tutorial called "Using Firebug With Your Joomla! Website" is available at the links below. To play the videos, just click on the links below. To download the video files to your local computer and play them locally, right-click each link in Firefox and select "Save Link As". The contents of each video is as follows:
- Install Firebug
- Firebug Layout
- Inspect Command
- Find Element From HTML
- Change CSS
- Add New CSS
- Explore Beez Template
- Beez Font Size Buttons
- Beez Tableless Design
- What's Next
- Module Class Suffixes
- Menu Styling
- Module Class Suffix Parameter
- Page Class Suffix Parameter
- Add Inline CSS Property
- Apply Style to New CSS Class
- Firebug Help Resources
Click here to download both tutorials in one Zip archive. Just unzip the archive and open the SWF files in your browser or SWF player.
Other Languages Available
This tutorial is also available with subtitles in the following languages:
The videos have the following controls:
- Play / Pause
- Slider (to quickly position to any point in the video)
- Table of Contents (pops up)
- Time Elapsed / Total Time
These are as shown in the picture below.