How To Use The Firefox Web Developer Tool to Customize your Site<html><a href="http://www.mozilla.com/firefox" target="_blank">Firefox</a> and the <a href="http://chrispederick.com/work/webdeveloper" target="_blank">Firefox Web Developer Extension</a> is something that everyone who wants to customize their SmugMug site should have.
<br><br></html>
"I have downloaded and installed them both. Uhhhhhhh..... what now?"<br>
This tutorial is for you! I will go over two basic functions from the web developer extension, and explain them how to use them. If you understand those two functions, designing your site will become a lot easier.</html>http://dgrin.smugmug.com/Tutorials/SmugMug-Site-Stuff/How-To-Use-The-Firefox-Web/Untitled-1-copy/64004222_w6Yv7-Ti-1.jpghttp://dgrin.smugmug.com/gallery/1354921_WAthY/2006-04-11T06:19:43ZCopyright 2009, the copyright holder of each photograph. Some portions copyright SmugMug. All rights reserved.SmugMugBy Ivar.
After you have downloaded and installed the web developer extension, an extra row with
several menus will appear.<p><a href="http://dgrin.smugmug.com">Digital Grin</a><br />By Ivar.
After you have downloaded and installed the web developer extension, an extra row with
several menus will appear.</p><p><a href="http://dgrin.smugmug.com/Tutorials/SmugMug-Site-Stuff/How-To-Use-The-Firefox-Web/1354921_WAthY#64004222_w6Yv7" title="By Ivar.
After you have downloaded and installed the web developer extension, an extra row with
several menus will appear."><img src="http://dgrin.smugmug.com/Tutorials/SmugMug-Site-Stuff/How-To-Use-The-Firefox-Web/Untitled-1-copy/64004222_w6Yv7-Th-1.jpg" width="150" height="46" alt="By Ivar.
After you have downloaded and installed the web developer extension, an extra row with
several menus will appear." title="By Ivar.
After you have downloaded and installed the web developer extension, an extra row with
several menus will appear." style="border: 1px solid #000000;" /></a></p>2009-02-21T06:59:42ZDigital Grinhttp://dgrin.smugmug.comhttp://dgrin.smugmug.com/Tutorials/SmugMug-Site-Stuff/How-To-Use-The-Firefox-Web/Untitled-1-copy/64004222_w6Yv7-Th-1.jpgDon't be alarmed by the number of menus and options, in this tutorial I will only cover two functions which you can find in the 'CSS' menu and in the 'Information' menu.<p><a href="http://dgrin.smugmug.com">Digital Grin</a><br />Don't be alarmed by the number of menus and options, in this tutorial I will only cover two functions which you can find in the 'CSS' menu and in the 'Information' menu.</p><p><a href="http://dgrin.smugmug.com/Tutorials/SmugMug-Site-Stuff/How-To-Use-The-Firefox-Web/1354921_WAthY#64005442_RiGjs" title="Don't be alarmed by the number of menus and options, in this tutorial I will only cover two functions which you can find in the 'CSS' menu and in the 'Information' menu."><img src="http://dgrin.smugmug.com/Tutorials/SmugMug-Site-Stuff/How-To-Use-The-Firefox-Web/Untitled-2-copy/64005442_RiGjs-Th.jpg" width="150" height="88" alt="Don't be alarmed by the number of menus and options, in this tutorial I will only cover two functions which you can find in the 'CSS' menu and in the 'Information' menu." title="Don't be alarmed by the number of menus and options, in this tutorial I will only cover two functions which you can find in the 'CSS' menu and in the 'Information' menu." style="border: 1px solid #000000;" /></a></p>2009-02-21T07:04:30ZDigital Grinhttp://dgrin.smugmug.comhttp://dgrin.smugmug.com/Tutorials/SmugMug-Site-Stuff/How-To-Use-The-Firefox-Web/Untitled-2-copy/64005442_RiGjs-Th.jpgFunction one: 'Display Element Information'
CSS requires you to define two things:
1) WHICH ELEMENT do I want to change
2) what do I want to change about that element
In order to te ...<p><a href="http://dgrin.smugmug.com">Digital Grin</a><br />Function one: 'Display Element Information'
CSS requires you to define two things:
1) WHICH ELEMENT do I want to change
2) what do I want to change about that element
In order to te ...</p><p><a href="http://dgrin.smugmug.com/Tutorials/SmugMug-Site-Stuff/How-To-Use-The-Firefox-Web/1354921_WAthY#64007265_mb6er" title="Function one: 'Display Element Information'
CSS requires you to define two things:
1) WHICH ELEMENT do I want to change
2) what do I want to change about that element
In order to te ..."><img src="http://dgrin.smugmug.com/Tutorials/SmugMug-Site-Stuff/How-To-Use-The-Firefox-Web/3/64007265_mb6er-Th.jpg" width="150" height="92" alt="Function one: 'Display Element Information'
CSS requires you to define two things:
1) WHICH ELEMENT do I want to change
2) what do I want to change about that element
In order to te ..." title="Function one: 'Display Element Information'
CSS requires you to define two things:
1) WHICH ELEMENT do I want to change
2) what do I want to change about that element
In order to te ..." style="border: 1px solid #000000;" /></a></p>2009-07-25T10:57:13ZDigital Grinhttp://dgrin.smugmug.comhttp://dgrin.smugmug.com/Tutorials/SmugMug-Site-Stuff/How-To-Use-The-Firefox-Web/3/64007265_mb6er-Th.jpgA yellow floatie appears with alot of information. If the floatie is covering something you want to see, click and hold the top bar of it, and drag it anywhere you want.<p><a href="http://dgrin.smugmug.com">Digital Grin</a><br />A yellow floatie appears with alot of information. If the floatie is covering something you want to see, click and hold the top bar of it, and drag it anywhere you want.</p><p><a href="http://dgrin.smugmug.com/Tutorials/SmugMug-Site-Stuff/How-To-Use-The-Firefox-Web/1354921_WAthY#64020508_ErS6J" title="A yellow floatie appears with alot of information. If the floatie is covering something you want to see, click and hold the top bar of it, and drag it anywhere you want."><img src="http://dgrin.smugmug.com/Tutorials/SmugMug-Site-Stuff/How-To-Use-The-Firefox-Web/4/64020508_ErS6J-Th.jpg" width="150" height="132" alt="A yellow floatie appears with alot of information. If the floatie is covering something you want to see, click and hold the top bar of it, and drag it anywhere you want." title="A yellow floatie appears with alot of information. If the floatie is covering something you want to see, click and hold the top bar of it, and drag it anywhere you want." style="border: 1px solid #000000;" /></a></p>2009-02-21T07:03:07ZDigital Grinhttp://dgrin.smugmug.comhttp://dgrin.smugmug.com/Tutorials/SmugMug-Site-Stuff/How-To-Use-The-Firefox-Web/4/64020508_ErS6J-Th.jpgYour cursor changes to a crosshair, and whatever element you put your cursor over gets a thin red border.
The ID ( that what is superseded by 'div #' ) and the class ( that what is supers ...<p><a href="http://dgrin.smugmug.com">Digital Grin</a><br />Your cursor changes to a crosshair, and whatever element you put your cursor over gets a thin red border.
The ID ( that what is superseded by 'div #' ) and the class ( that what is supers ...</p><p><a href="http://dgrin.smugmug.com/Tutorials/SmugMug-Site-Stuff/How-To-Use-The-Firefox-Web/1354921_WAthY#64020992_mSKeT" title="Your cursor changes to a crosshair, and whatever element you put your cursor over gets a thin red border.
The ID ( that what is superseded by 'div #' ) and the class ( that what is supers ..."><img src="http://dgrin.smugmug.com/Tutorials/SmugMug-Site-Stuff/How-To-Use-The-Firefox-Web/5/64020992_mSKeT-Th.jpg" width="150" height="72" alt="Your cursor changes to a crosshair, and whatever element you put your cursor over gets a thin red border.
The ID ( that what is superseded by 'div #' ) and the class ( that what is supers ..." title="Your cursor changes to a crosshair, and whatever element you put your cursor over gets a thin red border.
The ID ( that what is superseded by 'div #' ) and the class ( that what is supers ..." style="border: 1px solid #000000;" /></a></p>2009-02-21T07:01:48ZDigital Grinhttp://dgrin.smugmug.comhttp://dgrin.smugmug.com/Tutorials/SmugMug-Site-Stuff/How-To-Use-The-Firefox-Web/5/64020992_mSKeT-Th.jpgHELP, I don't see an ID or a class on the top row!!
Some elements are elements contained in an element with an ID and don't have an ID of their own.
Not to worry, the ID of the 'ancestor ...<p><a href="http://dgrin.smugmug.com">Digital Grin</a><br />HELP, I don't see an ID or a class on the top row!!
Some elements are elements contained in an element with an ID and don't have an ID of their own.
Not to worry, the ID of the 'ancestor ...</p><p><a href="http://dgrin.smugmug.com/Tutorials/SmugMug-Site-Stuff/How-To-Use-The-Firefox-Web/1354921_WAthY#64021574_4N4mU" title="HELP, I don't see an ID or a class on the top row!!
Some elements are elements contained in an element with an ID and don't have an ID of their own.
Not to worry, the ID of the 'ancestor ..."><img src="http://dgrin.smugmug.com/Tutorials/SmugMug-Site-Stuff/How-To-Use-The-Firefox-Web/6/64021574_4N4mU-Th.jpg" width="150" height="98" alt="HELP, I don't see an ID or a class on the top row!!
Some elements are elements contained in an element with an ID and don't have an ID of their own.
Not to worry, the ID of the 'ancestor ..." title="HELP, I don't see an ID or a class on the top row!!
Some elements are elements contained in an element with an ID and don't have an ID of their own.
Not to worry, the ID of the 'ancestor ..." style="border: 1px solid #000000;" /></a></p>2009-02-21T06:59:14ZDigital Grinhttp://dgrin.smugmug.comhttp://dgrin.smugmug.com/Tutorials/SmugMug-Site-Stuff/How-To-Use-The-Firefox-Web/6/64021574_4N4mU-Th.jpgFunction two: 'Edit CSS'
OKAY, I know the ID and/or class, what now?
The web developer has a function called 'Edit CSS' in the 'CSS' menu. It will allow you to change your CSS, and view th ...<p><a href="http://dgrin.smugmug.com">Digital Grin</a><br />Function two: 'Edit CSS'
OKAY, I know the ID and/or class, what now?
The web developer has a function called 'Edit CSS' in the 'CSS' menu. It will allow you to change your CSS, and view th ...</p><p><a href="http://dgrin.smugmug.com/Tutorials/SmugMug-Site-Stuff/How-To-Use-The-Firefox-Web/1354921_WAthY#64022269_dXf2F" title="Function two: 'Edit CSS'
OKAY, I know the ID and/or class, what now?
The web developer has a function called 'Edit CSS' in the 'CSS' menu. It will allow you to change your CSS, and view th ..."><img src="http://dgrin.smugmug.com/Tutorials/SmugMug-Site-Stuff/How-To-Use-The-Firefox-Web/7/64022269_dXf2F-Th.jpg" width="150" height="122" alt="Function two: 'Edit CSS'
OKAY, I know the ID and/or class, what now?
The web developer has a function called 'Edit CSS' in the 'CSS' menu. It will allow you to change your CSS, and view th ..." title="Function two: 'Edit CSS'
OKAY, I know the ID and/or class, what now?
The web developer has a function called 'Edit CSS' in the 'CSS' menu. It will allow you to change your CSS, and view th ..." style="border: 1px solid #000000;" /></a></p>2009-02-21T06:58:03ZDigital Grinhttp://dgrin.smugmug.comhttp://dgrin.smugmug.com/Tutorials/SmugMug-Site-Stuff/How-To-Use-The-Firefox-Web/7/64022269_dXf2F-Th.jpgAfter selecting 'Edit CSS' a set of tabs and a notepad-area appear on the left side of your screen.
The amount and the names of the tabs can differ.
smugmugBlack-*****.css and smugmug ...<p><a href="http://dgrin.smugmug.com">Digital Grin</a><br />After selecting 'Edit CSS' a set of tabs and a notepad-area appear on the left side of your screen.
The amount and the names of the tabs can differ.
smugmugBlack-*****.css and smugmug ...</p><p><a href="http://dgrin.smugmug.com/Tutorials/SmugMug-Site-Stuff/How-To-Use-The-Firefox-Web/1354921_WAthY#64023363_Pa4Sr" title="After selecting 'Edit CSS' a set of tabs and a notepad-area appear on the left side of your screen.
The amount and the names of the tabs can differ.
smugmugBlack-*****.css and smugmug ..."><img src="http://dgrin.smugmug.com/Tutorials/SmugMug-Site-Stuff/How-To-Use-The-Firefox-Web/8/64023363_Pa4Sr-Th.jpg" width="150" height="119" alt="After selecting 'Edit CSS' a set of tabs and a notepad-area appear on the left side of your screen.
The amount and the names of the tabs can differ.
smugmugBlack-*****.css and smugmug ..." title="After selecting 'Edit CSS' a set of tabs and a notepad-area appear on the left side of your screen.
The amount and the names of the tabs can differ.
smugmugBlack-*****.css and smugmug ..." style="border: 1px solid #000000;" /></a></p>2009-02-21T06:59:13ZDigital Grinhttp://dgrin.smugmug.comhttp://dgrin.smugmug.com/Tutorials/SmugMug-Site-Stuff/How-To-Use-The-Firefox-Web/8/64023363_Pa4Sr-Th.jpgIf you have one standard customization for your entire site, and you don't use themes, you most likely have done your customizing in your customization screen in the control panel.
click on ...<p><a href="http://dgrin.smugmug.com">Digital Grin</a><br />If you have one standard customization for your entire site, and you don't use themes, you most likely have done your customizing in your customization screen in the control panel.
click on ...</p><p><a href="http://dgrin.smugmug.com/Tutorials/SmugMug-Site-Stuff/How-To-Use-The-Firefox-Web/1354921_WAthY#64024495_KPc8g" title="If you have one standard customization for your entire site, and you don't use themes, you most likely have done your customizing in your customization screen in the control panel.
click on ..."><img src="http://dgrin.smugmug.com/Tutorials/SmugMug-Site-Stuff/How-To-Use-The-Firefox-Web/10/64024495_KPc8g-Th.jpg" width="150" height="110" alt="If you have one standard customization for your entire site, and you don't use themes, you most likely have done your customizing in your customization screen in the control panel.
click on ..." title="If you have one standard customization for your entire site, and you don't use themes, you most likely have done your customizing in your customization screen in the control panel.
click on ..." style="border: 1px solid #000000;" /></a></p>2009-07-25T12:17:43ZDigital Grinhttp://dgrin.smugmug.comhttp://dgrin.smugmug.com/Tutorials/SmugMug-Site-Stuff/How-To-Use-The-Firefox-Web/10/64024495_KPc8g-Th.jpgAfter you have made all the changes you want to make, the easiest thing to do is to select all of your CSS and copy it.
Go to your control panel > customize and look for your CSS box.
Simp ...<p><a href="http://dgrin.smugmug.com">Digital Grin</a><br />After you have made all the changes you want to make, the easiest thing to do is to select all of your CSS and copy it.
Go to your control panel > customize and look for your CSS box.
Simp ...</p><p><a href="http://dgrin.smugmug.com/Tutorials/SmugMug-Site-Stuff/How-To-Use-The-Firefox-Web/1354921_WAthY#64031926_ErVMP" title="After you have made all the changes you want to make, the easiest thing to do is to select all of your CSS and copy it.
Go to your control panel > customize and look for your CSS box.
Simp ..."><img src="http://dgrin.smugmug.com/Tutorials/SmugMug-Site-Stuff/How-To-Use-The-Firefox-Web/11/64031926_ErVMP-Th.jpg" width="150" height="68" alt="After you have made all the changes you want to make, the easiest thing to do is to select all of your CSS and copy it.
Go to your control panel > customize and look for your CSS box.
Simp ..." title="After you have made all the changes you want to make, the easiest thing to do is to select all of your CSS and copy it.
Go to your control panel > customize and look for your CSS box.
Simp ..." style="border: 1px solid #000000;" /></a></p>2009-10-30T04:12:04ZDigital Grinhttp://dgrin.smugmug.comhttp://dgrin.smugmug.com/Tutorials/SmugMug-Site-Stuff/How-To-Use-The-Firefox-Web/11/64031926_ErVMP-Th.jpgEXAMPLEI want to change the color of the name of the active gallery on top of my page.Using 'display element information' we find that it has a class 'title' and it's ancestor is 'breadcrumb ...<p><a href="http://dgrin.smugmug.com">Digital Grin</a><br />EXAMPLEI want to change the color of the name of the active gallery on top of my page.Using 'display element information' we find that it has a class 'title' and it's ancestor is 'breadcrumb ...</p><p><a href="http://dgrin.smugmug.com/Tutorials/SmugMug-Site-Stuff/How-To-Use-The-Firefox-Web/1354921_WAthY#64037510_kFWqZ" title="EXAMPLEI want to change the color of the name of the active gallery on top of my page.Using 'display element information' we find that it has a class 'title' and it's ancestor is 'breadcrumb ..."><img src="http://dgrin.smugmug.com/Tutorials/SmugMug-Site-Stuff/How-To-Use-The-Firefox-Web/14/64037510_kFWqZ-Th.jpg" width="150" height="76" alt="EXAMPLEI want to change the color of the name of the active gallery on top of my page.Using 'display element information' we find that it has a class 'title' and it's ancestor is 'breadcrumb ..." title="EXAMPLEI want to change the color of the name of the active gallery on top of my page.Using 'display element information' we find that it has a class 'title' and it's ancestor is 'breadcrumb ..." style="border: 1px solid #000000;" /></a></p>2009-02-21T06:57:06ZDigital Grinhttp://dgrin.smugmug.comhttp://dgrin.smugmug.com/Tutorials/SmugMug-Site-Stuff/How-To-Use-The-Firefox-Web/14/64037510_kFWqZ-Th.jpg