Firebug & Web Developer Firefox Extentions | CSS Editing

ClimbingMonkey

Joined: 2005-03-18
Posts: 62

Posted: Wed, 2007-10-10 07:41

What is firebug you ask? It really might turn out to be the best web development extension for Firefox ever made. This is a must have that no Web developer should do without.

I’m serious - you need Firebug. Since I have been more active on the web development scene, I have used only two tools to create, interrogate and fix web sites. Firebug and the Web Developer extensions, and UltraEdit, the king of all text editors (in my humble opinion.) Occasionally I will use TopStyle to more in depth css design, but after my most recent rebuild I have not installed it and have never missed it.

Firebug lets you view and edit the HTML and CSS of any page. It tells you exactly which CSS rules affect the styling of the element you select in the style inspector - not only which rules affect it directly but also which rules it inherits properties from.

More thoughts here: http://www.marcnjami.com/web-design/firebug

---------------------------------------------------
Wordpress / Gallery2 (WPG2) Developer
My Site: http://www.marcnjami.com/

capt_kirk

Joined: 2006-01-24
Posts: 492

Posted: Wed, 2007-10-10 15:00

I'd also add View Source Chart as one of my "key" troubleshooting Firefox add-ons.

One of the keys to using Firebug as a CSS troubleshooter is the ability to turn off and change individual CSS elements to see what effect they have. Here's what I do to troubleshoot CSS:

1. Right click on the element that's giving you trouble and select "Inspect Element" at the bottom of the popup menu.

2. On the right side of the Firebug panel that appears at the bottom of the screen, you'll have all of the CSS that is being applied to the element that is highlighted in the left side of the panel.

3. Since CSS is "layered" the most relevant CSS definition is at the top, working down through all of the other CSS elements that apply to the selected element.

4. If you put your cursor just to the left of a specific CSS attribute and left click, that attribute will be temporarily disabled, with a red crossed circle showing next to that attribute. You can turn it back on by left clicking it again.

5. You can change the name or value of an attribute by left clicking them and typing in the new value.

6. You can add a new attribute by hitting the "Enter" button while editing the last value in a CSS element. Type the new name and then the new value.

7. You can switch elements in the left part of the panel by left clicking on the element's tag (img, a, div, etc.)

I'll add some screenshots to this post over time. The best way to learn your way around Firebug is to right and left click your way around everything in it. Since all of the changes you make are only to the temporary copy stored in your memory, if you make a change you can't figure out how to reverse, all you have to do is reload the page, and you're back to a fresh page from the server.

Kirk
____________________________________
G2Image Documentation, G2Image Demo Page, My Family Website

aharami

Joined: 2007-04-16
Posts: 47

Posted: Fri, 2007-10-19 18:10

I am a web development noob with basically no css knowledge and I have to say that firebug was a big help in figuring out what css items does what. Thanks a lot!

net4earning

Joined: 2007-06-02
Posts: 202

Posted: Wed, 2008-03-26 11:58

i use Web Developer Toolbar.
its great.
==========================
|| Car Wallpapers || Make Money Online || Hot Cars

marcellodj

Joined: 2007-11-07
Posts: 24

Posted: Fri, 2008-03-28 09:11

Thanks for suggestions, firebugs work great for me!
i simply removed the "onblur.." function in AddComment.tpl .
regards, m

pelinga

Joined: 2007-05-22
Posts: 26

Posted: Tue, 2008-04-01 09:53

"i use Web Developer Toolbar.
its great."

it's not great. i prefer firebugs . it has a lot of Widgets
----------
Details::Gallery Wallpaper

Dirkii

Joined: 2008-01-16
Posts: 214

Posted: Wed, 2008-09-03 00:30

How can I find out with Firebug the name of the file in which the code (the original code before parsing) is shown after clicking "Inspect Element"? After clicking "Inspect Element" I see the code of the inspected element but not the name of the file in which the code is.

Nice greetings, Dirk.

---------------------------
www.galerie-der-fotos.de

ClimbingMonkey

Joined: 2005-03-18
Posts: 62

Posted: Wed, 2008-09-03 06:22

For me (using the latest version of Firebug on FF3) When I inspect an element I get a list in the right hand pane that lists the files that are responsible for generating and/or styling that element. When you hover over the file name it shows the full path to the file.

---------------------------------------------------
Wordpress / Gallery2 (WPG2) Developer
My Site: http://www.marcnjami.com/

Dirkii

Joined: 2008-01-16
Posts: 214

Posted: Wed, 2008-09-03 10:50

Thanks ClimbingMonkey,

I just see - Firebug working with the latest FF2 - something like this: http://getfirebug.com/ or fb.jpg (screenshot). I cannot find the file name anywhere in my version. Clicking "NET" in Firebug shows some file names, but the one I would have to edit (when trying out) I cannot find.

I didn`t even know that there is a new version of Firebug available. When I in the menu click "Search for updates" or something like that a message displays that upgrading to FF3 will cause incompatibilty with Firebug, so it cannot be used.

So you use Firebug 1.2 Beta? And it works fine?

Nice greetings, Dirk.

---------------------------
www.galerie-der-fotos.de

ClimbingMonkey

Joined: 2005-03-18
Posts: 62

Posted: Wed, 2008-09-03 22:03

So I mainly use firebug to fix up my css... With that said, you are close. Go the a site of your liking, open firebug, click inspect and then select and element. In the attached screenshot I selected the title of my site. The right hand pane (or the "details" pane so to speak) should update and show you all the styles that are being applied and the files that they are in. When you hover over a file, it should show you the full path. Hope this helps.

---------------------------------------------------
Wordpress / Gallery2 (WPG2) Developer
My Site: http://www.marcnjami.com/

Dirkii

Joined: 2008-01-16
Posts: 214

Posted: Wed, 2008-09-03 22:42

Thank you very much for screenshot and description.

I am testing on the "ICE" theme and when I inspect the dropdown menu "item actions" on the starting page there should appear somewhere the file name "childs.tpl" therein the code is, but I cannot find this name neither by hovering nor anywhere else. May be Firebug doesn`t show all the associated files.

Thanks again, nice greetings, Dirk.

---------------------------
www.galerie-der-fotos.de

ClimbingMonkey

Joined: 2005-03-18
Posts: 62

Posted: Thu, 2008-09-04 03:17

Firebug will never show you which .tpl files to modify. Gallery uses the "template" files to dynamically generate the HTML that is sent to the browser. Firebug is seeing this html and doesn't even know these files exist for that matter. You will have to dig into these files by hand. The ICE theme is quite nice BTW... Good choice!

---------------------------------------------------
Wordpress / Gallery2 (WPG2) Developer
My Site: http://www.marcnjami.com/

Dirkii

Joined: 2008-01-16
Posts: 214

Posted: Thu, 2008-09-04 11:30

Ah yes, thanks ClimbingMonkey,

This sounds very plausible, the browser receives and "sees" all the information after parsing...

Thanks, yes I like the ICE theme very much.

Many thanks for your help, nice greetings, Dirk.

---------------------------
www.galerie-der-fotos.de

b_dibrell

Joined: 2009-01-30
Posts: 5

Posted: Sun, 2009-02-01 02:48

I was so impressed with Firebug that I decided to post about it. I am a mainframe (COBOL and PL/I) programmer by trade, definitely not a web developer, and within several hours, I was able to begin completely overhauling the styling of my gallery. If you are just moderately familiar with html and CSS, you'll pick it (Firebug) up in no time.

blueback1

Joined: 2009-08-12
Posts: 1

Posted: Wed, 2009-08-12 16:16

I have tried all of the suggestions and still can not get my site background to show up on the gallery pages. What can I do?

ClimbingMonkey

Joined: 2005-03-18
Posts: 62

Posted: Thu, 2009-08-13 07:52

Hmmm without a URL or your css it is hard to say...

---------------------------------------------------
Wordpress / Gallery2 (WPG2) Developer
My Site: http://www.marcnjami.com/

gregorystienstra

Joined: 2010-05-05
Posts: 14

Posted: Wed, 2010-05-19 07:24

Well I downloaded Firefox and it doesn't work with gallery2. but explorer 8 works just find.

Authentication Failure

Your change cannot be completed due to a loss of session data. Please try again. If it still doesn't work, try logging out and logging back in.

Back to the Gallery
Error Detail -
Error (ERROR_REQUEST_FORGED)

* in modules/core/classes/GalleryController.class at line 239 (GalleryCoreApi::error)
* in main.php at line 243 (GalleryController::assertIsGenuineRequest)
* in main.php at line 104
* in modules/core/classes/GalleryEmbed.class at line 189
* in /home/gregory/public_html/wp-content/plugins/wpg2/wpg2template.inc at line 76 (GalleryEmbed::handleRequest)
* in ??? at line 0
* in /home/gregory/public_html/wp-includes/plugin.php at line 339
* in /home/gregory/public_html/wp-includes/template-loader.php at line 7
* in /home/gregory/public_html/wp-blog-header.php at line 16
* in /home/gregory/public_html/index.php at line 17

System Information
Gallery version 2.3.1
PHP version 5.2.9 cgi
Webserver Apache/2.0.63 (Unix) mod_ssl/2.0.63 OpenSSL/0.9.8e-fips-rhel5 mod_auth_passthrough/2.1 mod_bwlimited/1.4 FrontPage/5.0.2.2635
Database mysqlt 5.0.90-community
Toolkits SquareThumb, ImageMagick, Thumbnail
Operating system Linux gvo18816.gvodatacenter.com 2.6.18-164.11.1.el5 #1 SMP Wed Jan 20 07:32:21 EST 2010 x86_64
Browser Mozilla/5.0 (Windows; U; Windows NT 6.1; en-US; rv:1.9.2.3) Gecko/20100401 Firefox/3.6.3

ClimbingMonkey Joined: 2005-03-18 Posts: 62	Posted: Wed, 2007-10-10 07:41
	What is firebug you ask? It really might turn out to be the best web development extension for Firefox ever made. This is a must have that no Web developer should do without. I’m serious - you need Firebug. Since I have been more active on the web development scene, I have used only two tools to create, interrogate and fix web sites. Firebug and the Web Developer extensions, and UltraEdit, the king of all text editors (in my humble opinion.) Occasionally I will use TopStyle to more in depth css design, but after my most recent rebuild I have not installed it and have never missed it. Firebug lets you view and edit the HTML and CSS of any page. It tells you exactly which CSS rules affect the styling of the element you select in the style inspector - not only which rules affect it directly but also which rules it inherits properties from. More thoughts here: http://www.marcnjami.com/web-design/firebug --------------------------------------------------- Wordpress / Gallery2 (WPG2) Developer My Site: http://www.marcnjami.com/
	XUser login Username: * Password: * Create new account Request new password
capt_kirk Joined: 2006-01-24 Posts: 492	Posted: Wed, 2007-10-10 15:00
	I'd also add View Source Chart as one of my "key" troubleshooting Firefox add-ons. One of the keys to using Firebug as a CSS troubleshooter is the ability to turn off and change individual CSS elements to see what effect they have. Here's what I do to troubleshoot CSS: 1. Right click on the element that's giving you trouble and select "Inspect Element" at the bottom of the popup menu. 2. On the right side of the Firebug panel that appears at the bottom of the screen, you'll have all of the CSS that is being applied to the element that is highlighted in the left side of the panel. 3. Since CSS is "layered" the most relevant CSS definition is at the top, working down through all of the other CSS elements that apply to the selected element. 4. If you put your cursor just to the left of a specific CSS attribute and left click, that attribute will be temporarily disabled, with a red crossed circle showing next to that attribute. You can turn it back on by left clicking it again. 5. You can change the name or value of an attribute by left clicking them and typing in the new value. 6. You can add a new attribute by hitting the "Enter" button while editing the last value in a CSS element. Type the new name and then the new value. 7. You can switch elements in the left part of the panel by left clicking on the element's tag (img, a, div, etc.) I'll add some screenshots to this post over time. The best way to learn your way around Firebug is to right and left click your way around everything in it. Since all of the changes you make are only to the temporary copy stored in your memory, if you make a change you can't figure out how to reverse, all you have to do is reload the page, and you're back to a fresh page from the server. Kirk ____________________________________ G2Image Documentation, G2Image Demo Page, My Family Website

aharami Joined: 2007-04-16 Posts: 47	Posted: Fri, 2007-10-19 18:10
	I am a web development noob with basically no css knowledge and I have to say that firebug was a big help in figuring out what css items does what. Thanks a lot!

net4earning Joined: 2007-06-02 Posts: 202	Posted: Wed, 2008-03-26 11:58
	i use Web Developer Toolbar. its great. ========================== \|\| Car Wallpapers \|\| Make Money Online \|\| Hot Cars

marcellodj Joined: 2007-11-07 Posts: 24	Posted: Fri, 2008-03-28 09:11
	Thanks for suggestions, firebugs work great for me! i simply removed the "onblur.." function in AddComment.tpl . regards, m

pelinga Joined: 2007-05-22 Posts: 26	Posted: Tue, 2008-04-01 09:53
	"i use Web Developer Toolbar. its great." it's not great. i prefer firebugs . it has a lot of Widgets ---------- Details::Gallery Wallpaper

Dirkii Joined: 2008-01-16 Posts: 214	Posted: Wed, 2008-09-03 00:30
	How can I find out with Firebug the name of the file in which the code (the original code before parsing) is shown after clicking "Inspect Element"? After clicking "Inspect Element" I see the code of the inspected element but not the name of the file in which the code is. Nice greetings, Dirk. --------------------------- www.galerie-der-fotos.de

ClimbingMonkey Joined: 2005-03-18 Posts: 62	Posted: Wed, 2008-09-03 06:22
	For me (using the latest version of Firebug on FF3) When I inspect an element I get a list in the right hand pane that lists the files that are responsible for generating and/or styling that element. When you hover over the file name it shows the full path to the file. --------------------------------------------------- Wordpress / Gallery2 (WPG2) Developer My Site: http://www.marcnjami.com/

Dirkii Joined: 2008-01-16 Posts: 214	Posted: Wed, 2008-09-03 10:50
	Thanks ClimbingMonkey, I just see - Firebug working with the latest FF2 - something like this: http://getfirebug.com/ or fb.jpg (screenshot). I cannot find the file name anywhere in my version. Clicking "NET" in Firebug shows some file names, but the one I would have to edit (when trying out) I cannot find. I didn`t even know that there is a new version of Firebug available. When I in the menu click "Search for updates" or something like that a message displays that upgrading to FF3 will cause incompatibilty with Firebug, so it cannot be used. So you use Firebug 1.2 Beta? And it works fine? Nice greetings, Dirk. --------------------------- www.galerie-der-fotos.de

ClimbingMonkey Joined: 2005-03-18 Posts: 62	Posted: Wed, 2008-09-03 22:03
	So I mainly use firebug to fix up my css... With that said, you are close. Go the a site of your liking, open firebug, click inspect and then select and element. In the attached screenshot I selected the title of my site. The right hand pane (or the "details" pane so to speak) should update and show you all the styles that are being applied and the files that they are in. When you hover over a file, it should show you the full path. Hope this helps. --------------------------------------------------- Wordpress / Gallery2 (WPG2) Developer My Site: http://www.marcnjami.com/

Dirkii Joined: 2008-01-16 Posts: 214	Posted: Wed, 2008-09-03 22:42
	Thank you very much for screenshot and description. I am testing on the "ICE" theme and when I inspect the dropdown menu "item actions" on the starting page there should appear somewhere the file name "childs.tpl" therein the code is, but I cannot find this name neither by hovering nor anywhere else. May be Firebug doesn`t show all the associated files. Thanks again, nice greetings, Dirk. --------------------------- www.galerie-der-fotos.de

ClimbingMonkey Joined: 2005-03-18 Posts: 62	Posted: Thu, 2008-09-04 03:17
	Firebug will never show you which .tpl files to modify. Gallery uses the "template" files to dynamically generate the HTML that is sent to the browser. Firebug is seeing this html and doesn't even know these files exist for that matter. You will have to dig into these files by hand. The ICE theme is quite nice BTW... Good choice! --------------------------------------------------- Wordpress / Gallery2 (WPG2) Developer My Site: http://www.marcnjami.com/

Dirkii Joined: 2008-01-16 Posts: 214	Posted: Thu, 2008-09-04 11:30
	Ah yes, thanks ClimbingMonkey, This sounds very plausible, the browser receives and "sees" all the information after parsing... Thanks, yes I like the ICE theme very much. Many thanks for your help, nice greetings, Dirk. --------------------------- www.galerie-der-fotos.de

b_dibrell Joined: 2009-01-30 Posts: 5	Posted: Sun, 2009-02-01 02:48
	I was so impressed with Firebug that I decided to post about it. I am a mainframe (COBOL and PL/I) programmer by trade, definitely not a web developer, and within several hours, I was able to begin completely overhauling the styling of my gallery. If you are just moderately familiar with html and CSS, you'll pick it (Firebug) up in no time.

blueback1 Joined: 2009-08-12 Posts: 1	Posted: Wed, 2009-08-12 16:16
	I have tried all of the suggestions and still can not get my site background to show up on the gallery pages. What can I do?

ClimbingMonkey Joined: 2005-03-18 Posts: 62	Posted: Thu, 2009-08-13 07:52
	Hmmm without a URL or your css it is hard to say... --------------------------------------------------- Wordpress / Gallery2 (WPG2) Developer My Site: http://www.marcnjami.com/

gregorystienstra Joined: 2010-05-05 Posts: 14	Posted: Wed, 2010-05-19 07:24
	Well I downloaded Firefox and it doesn't work with gallery2. but explorer 8 works just find. Authentication Failure Your change cannot be completed due to a loss of session data. Please try again. If it still doesn't work, try logging out and logging back in. Back to the Gallery Error Detail - Error (ERROR_REQUEST_FORGED) * in modules/core/classes/GalleryController.class at line 239 (GalleryCoreApi::error) * in main.php at line 243 (GalleryController::assertIsGenuineRequest) * in main.php at line 104 * in modules/core/classes/GalleryEmbed.class at line 189 * in /home/gregory/public_html/wp-content/plugins/wpg2/wpg2template.inc at line 76 (GalleryEmbed::handleRequest) * in ??? at line 0 * in /home/gregory/public_html/wp-includes/plugin.php at line 339 * in /home/gregory/public_html/wp-includes/template-loader.php at line 7 * in /home/gregory/public_html/wp-blog-header.php at line 16 * in /home/gregory/public_html/index.php at line 17 System Information Gallery version 2.3.1 PHP version 5.2.9 cgi Webserver Apache/2.0.63 (Unix) mod_ssl/2.0.63 OpenSSL/0.9.8e-fips-rhel5 mod_auth_passthrough/2.1 mod_bwlimited/1.4 FrontPage/5.0.2.2635 Database mysqlt 5.0.90-community Toolkits SquareThumb, ImageMagick, Thumbnail Operating system Linux gvo18816.gvodatacenter.com 2.6.18-164.11.1.el5 #1 SMP Wed Jan 20 07:32:21 EST 2010 x86_64 Browser Mozilla/5.0 (Windows; U; Windows NT 6.1; en-US; rv:1.9.2.3) Gecko/20100401 Firefox/3.6.3

Firebug & Web Developer Firefox Extentions | CSS Editing

XUser login