Using Firebug With Your Joomla Website - Revision history

Wilsonge: Remove 1.6 and 1.7 tags and add 3.x

2013-04-29T22:28:54Z

Remove 1.6 and 1.7 tags and add 3.x

Hutchy68: version template

2012-09-18T15:08:58Z

version template

Rand486 at 16:23, 16 January 2012

2012-01-16T16:23:28Z

Mvangeest: Tutorial:Using Firebug With Your Joomla Website moved to Using Firebug With Your Joomla Website: Moved page to main namespace because the Tutorial namespace is deprecated

2011-01-15T15:41:46Z

Tutorial:Using Firebug With Your Joomla Website moved to Using Firebug With Your Joomla Website: Moved page to main namespace because the Tutorial namespace is deprecated

Gbaudoin at 09:22, 9 March 2010

2010-03-09T09:22:12Z

Dextercowley: add dutch version

2009-10-04T17:30:01Z

add dutch version

Dextercowley: move other languages before video controls

2009-06-28T16:33:25Z

move other languages before video controls

Dextercowley: add tutorials category and link to italian version

2009-06-28T16:27:39Z

add tutorials category and link to italian version

Dextercowley: add links for subtitled versions and download version

2009-06-06T01:22:26Z

add links for subtitled versions and download version

Dextercowley: new firebug video tutorial

2009-03-17T18:03:10Z

new firebug video tutorial

New page

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 let's 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:

[http://help.joomla.org/files/joomla_firebug_tutorial_part1.swf Part One] (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

[http://help.joomla.org/files/joomla_firebug_tutorial_part2.swf Part Two] (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

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.

[[Image:Video_tutorial_controls_20090315.png|center|frame]]

@@ Line 1: / Line 1: @@
-{{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:
+{{version|1.0,1.5,2.5,3.x}}[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 identify the HTML code for any element on a page;

@@ Line 1: / Line 1: @@
-[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:
+{{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 identify the HTML code for any element on a page;

@@ Line 1: / Line 1: @@
-[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 let's you:
+[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 identify the HTML code for any element on a page;

@@ 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 let's you:
+[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 let's 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;
@@ Line 31: / Line 31: @@
 [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 Langauges Available===
+===Other Languages Available===
 This tutorial is also available with subtitles in the following languages:

← Older revision		Revision as of 17:30, 4 October 2009
Line 35:		Line 35:

	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]		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===		===Video Controls===

@@ 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 let's you:
 * quickly find the exact CSS code that styles any HTML element on a page;
@@ Line 31: / Line 30: @@
 [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.
 ===Video Controls===
@@ Line 43: / Line 47: @@
 [[Image:Video_tutorial_controls_20090315.png|center|frame]]
 [[Category:Tutorials]]

@@ 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:
-[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
 * Install Firebug
 * Firebug Layout
@@ Line 18: / Line 19: @@
 * 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
 * Module Class Suffixes
 * Menu Styling
@@ Line 26: / Line 28: @@
 * Apply Style to New CSS Class
 * Firebug Help Resources
 The videos have the following controls: