Using Firebug With Your Joomla Website: Difference between revisions

From Joomla! Documentation

Dextercowley (talk | contribs)
new firebug video tutorial
 
Cmb (talk | contribs)
Firebug is no longer available. This page should be deleted by a sysop.
 
(18 intermediate revisions by 8 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 let's you:
{{version|1.5,2.5,3.x}}[https://getfirebug.com/ Firebug] was a free add-on program that worked with the Firefox web browser. It is no longer available.
* 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:
See [[Web page diagnostic tools]] for more information on using a browser for Website diagnostics.
 
<noinclude>
[http://help.joomla.org/files/joomla_firebug_tutorial_part1.swf Part One] (18 minutes)
[[Category:Tutorials]]
* Install Firebug
[[Category:Template Development]]
* Firebug Layout
[[Category:Template Reference]]
* Inspect Command
[[Category:Video]]
* Find Element From HTML
</noinclude>
* 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]]

Latest revision as of 17:21, 17 July 2020

Firebug was a free add-on program that worked with the Firefox web browser. It is no longer available.

See Web page diagnostic tools for more information on using a browser for Website diagnostics.