This browser does not support basic Web standards, preventing the display of our site's intended design. May we suggest that you upgrade your browser?

Tips and How-Tos

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'.
    Tools > Extensions
  3. From the Extensions window, select 'Get More Extensions'
    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'
    select extensions from dropdown
  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'
    click install now link
  10. Select the next 'Install Now' button and it will download and install
    click install now button
  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

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

HTML Validation (Information and help about the validator)
  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
    validate HTML
Speed Report
  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
    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.

Edit CSS

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 The Edit Area
This is where you do the actual CSS editing
The Tabs The Tabs
Select which style sheet of the document you'd like to edit.
Load 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 Save
Allows you to save the CSS styles from the current style tab your in.
Clear Clear
This will completely clear the style tab your in.
Reset All 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 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
    tools menu > lorem ipsum generator
  2. Choose the amount you want to be generated.
  3. Click Generate generate button
  4. Click Copy to Clipboard 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.
    select the text to copy
  2. Click the Edit Menu, and choose Copy as Plain Text
    (this will remove all formatting from the text)
    copy as plain text

ColorZilla

  1. Click on the EyeDropper in the lower left corner of your screen.
    the eye dropper
  2. Then hover over items on the page and the color will change in the status bar.
    select an element from the page the element's information
  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
    get the hex value

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' .
    Oplen Link Target in IE picture how to
  • On any free space on the page you can right click, and then from the context menu select 'View This Page in IE'.
    View This Page in IE picture how to
Excellence. Our Measure. Our Motto. Our Goal.