How to Get an Extension for Firefox

Note: Please be sure to use the most recent version of Firefox. You can get it from http://www.getfirefox.com

1. Open FireFox
2. Go to the Tools menu, and select 'Extensions'.
   
3. From the Extensions window, select 'Get More Extensions'
   
4. At the top of the page, there is a search area
5. From the drop down menu, change from 'Entire Site' to 'Extensions'
   
6. In the search box, type the name of the extension you want to get
7. Select 'Go'
8. On the results page, select the extension you want
9. Select 'Install Now'
   
10. Select the next 'Install Now' button and it will download and install
    
11. Close all windows in Firefox and restart Firefox to be able to use the latest installed extensions.

Instructions on how to use some useful Extensions

• Web Developer
• Lorem Ipsum Generator
• Copy to Plain Text
• ColorZilla
• IE View

Web Developer

Chris Pederick (the developer of Web Developer) has some basic documentation of the extension on his site.

1. Go to whatever page it is you'd like to check
2. Click the Tools button from the Web Developer Bar
3. Then select Validate HTML
   

1. Go to whatever page it is you'd like to check
2. Click the Tools button from the Web Developer Bar
3. Then select View Speed Report
   
   

   Note: at the bottom of the result page there is some information which will assist you with the size report of your page.

Note:It is best to have a decent understanding of how style sheets work, or this may be confusing for you. To learn more about CSS styles checkout W3Schools CSS Tutorial

1. Open up a page in Firefox that you'd like to edit the CSS for.
2. Click on the CSS button in the Web Developer Bar and choose Edit CSS.
   Note: If you like shortcuts, the shortcut is Ctrl + Shift + E (to close the Edit CSS, use the same shortcut).
3. Now you can just edit the Styles for the page by editing the style that is shown on the left side of the screen.

What do those buttons do?

The Edit Area

This is where you do the actual CSS editing

The Tabs

Select which style sheet of the document you'd like to edit.

Load

Use this if you'd like to load in a CSS file into the current tab you in overwriting whatever styles are currently in the tab.

Save

Allows you to save the CSS styles from the current style tab your in.

Clear

This will completely clear the style tab your in.

Reset All

This will reload all of the CSS files from how Page Owner originally specified; Resetting all CSS styles to how they were originally.

Close

This will close the Edit CSS Sidebar and you will loose all changes you made to the styles.
You can also use the shortcut Ctrl + Shift + E

Quirks with Edit CSS

• If you like to use tabbing to align your styles, the Tab key doesn't work like you'd expect in the Edit Area. The tab doesn't indent the text at all, but moves the focus over to the document which is annoying. A way to get around this is just don't tab in the styles in Edit CSS: Copy and Paste the code to your web site editor.
• When your editing CSS styles with Edit CSS: don't change URL's from the page your working on, create a new Browsing Tab, or switch to another open Tab. When you do any of the previous, you'll loose all the changes you made which is very annoying and there is no way to get your modifications back other then to redo them all.

Lorem Ipsum Generator

1. With Firefox Open, go to Tools menu, and select Lorem Ipsum Generator
   
2. Choose the amount you want to be generated.
3. Click Generate
4. Click Copy to Clipboard
5. Then, wherever you want the filler content, paste it.

Copy to Plain Text

1. Select the text you would like to copy.
   
2. Click the Edit Menu, and choose Copy as Plain Text
   (this will remove all formatting from the text)
   

ColorZilla

1. Click on the EyeDropper in the lower left corner of your screen.
   
2. Then hover over items on the page and the color will change in the status bar.
   
3. To select a color; click on the color you want from an element on the page.
4. Then double click on the EyeDropper
5. You can then grab the hex value from the ColorZilla window
   

IE View

• On any links on the page your on, you may right click the link, and then from the context menu select 'Open Link Target in IE' .
  
• On any free space on the page you can right click, and then from the context menu select 'View This Page in IE'.