Difference between revisions of "Using Firebug With Your Joomla Website"
From Joomla! Documentation
Dextercowley (talk | contribs) (new firebug video tutorial) |
m (version template) |
||
| (7 intermediate revisions by 4 users not shown) | |||
| Line 1: | Line 1: | ||
| − | Firebug is a free add-on program that works with the Firefox web browser. It is tremendously helpful when you are working with Joomla! websites. Firebug | + | {{version|1.0,1.5,1.6,1.7,2.5}}[http://getfirebug.com/ Firebug] is a free add-on program that works with the [http://www.mozilla.com/firefox/ Firefox] web browser. It is tremendously helpful when you are working with Joomla! websites. Firebug lets you: |
* quickly find the exact CSS code that styles any HTML element on a page; | * 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; | * quickly identify the HTML code for any element on a page; | ||
| Line 6: | Line 6: | ||
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: | 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: | ||
| − | [http://help.joomla.org/files/joomla_firebug_tutorial_part1.swf Part One] (18 minutes) | + | [http://help.joomla.org/files/joomla_firebug_tutorial_part1.swf Part One with no subtitles] or |
| + | [http://community.joomla.org/videos/firebug_tutorial/firebug_tutorial_part1_english.swf Part One with English subtitles] (18 minutes) | ||
* Install Firebug | * Install Firebug | ||
* Firebug Layout | * Firebug Layout | ||
| Line 18: | Line 19: | ||
* What's Next | * What's Next | ||
| − | [http://help.joomla.org/files/joomla_firebug_tutorial_part2.swf Part Two] (13 minutes) | + | [http://help.joomla.org/files/joomla_firebug_tutorial_part2.swf Part Two with no subtitles] or |
| + | [http://community.joomla.org/videos/firebug_tutorial/firebug_tutorial_part2_english.swf Part Two with English subtitles] (13 minutes) | ||
* Module Class Suffixes | * Module Class Suffixes | ||
* Menu Styling | * Menu Styling | ||
| Line 27: | Line 29: | ||
* Firebug Help Resources | * Firebug Help Resources | ||
| + | [http://joomlacode.org/gf/download/frsrelease/10403/40595/firebug_tutorial.zip 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: | ||
| + | |||
| + | Italian: [http://community.joomla.org/videos/firebug_tutorial/firebug_tutorial_part1_italian.swf Part One] [http://community.joomla.org/videos/firebug_tutorial/firebug_tutorial_part2_italian.swf Part Two] | ||
| + | |||
| + | Dutch: [http://community.joomla.org/videos/firebug_tutorial/firebug_tutorial_part1_dutch.swf Part One] [http://community.joomla.org/videos/firebug_tutorial/firebug_tutorial_part2_dutch.swf Part Two] | ||
| + | |||
| + | ===Video Controls=== | ||
The videos have the following controls: | The videos have the following controls: | ||
* Play / Pause | * Play / Pause | ||
| Line 36: | Line 48: | ||
[[Image:Video_tutorial_controls_20090315.png|center|frame]] | [[Image:Video_tutorial_controls_20090315.png|center|frame]] | ||
| + | |||
| + | |||
| + | [[Category:Tutorials]] | ||
Revision as of 10:08, 18 September 2012
This article is for Joomla! CMS Version(s) 
Firebug is a free add-on program that works with the Firefox web browser. It is tremendously helpful when you are working with Joomla! websites. Firebug lets you:
- 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:
Part One with no subtitles or Part One with English subtitles (18 minutes)
- 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
Part Two with no subtitles or Part Two with English subtitles (13 minutes)
- 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[edit]
This tutorial is also available with subtitles in the following languages:
Video Controls[edit]
The videos have the following controls:
- Play / Pause
- Slider (to quickly position to any point in the video)
- Volume
- Table of Contents (pops up)
- Time Elapsed / Total Time
These are as shown in the picture below.
