What I Learned about Firebug


Tonight I attended a meetup with the Austin WordPress group on how to use Firebug presented by Nick Batik. I have used Firebug for ages, but no one ever taught me how to use it, so I’ve just fumbled around and pretty much stuck to finding out what CSS elements did what. Here’s what I learned tonight!

  1. When inspecting an element you can click on a color code and then use your arrow keys to change the color incrementally. Click up to go lighter or down to go darker – on the entire value or just a color 0pair (R G or B)Change Color in Firebug
  2. Can click up and down arrows in all of the elements (like above) and it will change the value up or down. This is a good way to find the right margin or padding.
  3. Same thing if the field is blank just use the arrows to see what options you have. I tested this with ‘text-align’ and it told me values like justify, right, and left.
  4. If a field doesn’t have a style you can right click in the style area of firebug and choose to add an element style (will effect only this element – so if it’s the 2nd H1 it will only effect the 2nd H1) – it will add it in line which isn’t the best way to do css, but gives you the code you need to create a style tag with the next tip
    • You can right click on the tag in the html editor, copy the css path to get what you need for the style sheet
  5. To make a rule for all fields of a type you can choose to ‘add rule’ which will add a rule for all fields of the same type – like all H1s
    Add CSS Rule
  6. I never clicked the ‘Layout’ tab! Did you know you could see the ‘box model’? Do you know what the ‘box model’ is? I didn’t! See the image included here. Basically it shows you the size of the element, the padding, the border and the margin – and you can click the numbers here to edit them.
    Firebug Layout
  7. The computed tab will show you how the style is being defined and where it’s being defined – what file and line number it’s being set on.
    Computed Tab in Firebug
  8. The Cookies tab will show you all the cookies on the page so you can easily edit or remove them.
    Firebug Cookies
  9. Someone asked why firebug over the built in inspector? Our speaker said that originally it was because it was the only option – and then it was because other developers kept adding on more features to firebug that aren’t in the inspector
    • for example there is fireftp – so you make changes in firebug, click send and it sends it directly up to your site.
    • And YSlow which suggests ways to speed up your site.
    • More add ons for Firebug

A lot more was covered, but these are the quick and easy tips and tricks I can share with you!

Delete individual autofill entries

Address Bar

Today I did some clean up of my data on my computer. I created some groups in LastPass and did some site title clean up. I also did some research on how to get rid of autofill entries that aren’t right or got added without me realizing. I found this handy article on Lifehacker on doing just this.

For example, I visit TripIt a least once a week and one time I typed it wrote as tripti.com and so that is always the first address I pick from the address bar. So using the tip from Lifehacker I just moused over that entry in my address bar and hit ‘Shift+Delete’ on my keyboard and it disappeared. I was also able to delete typos in my log in forms this way as well.

Find Plugins Used on a Site


I wrote a little while back about a plugin for Chrome that lets you find out what WordPress theme a site is using, now I have one to find plugins! Thanks to WordPress Jedi for pointing out SpyBar for Chrome and Firefox. It helps you find out what WordPress plugins and themes a site is using.

Once you install SpyBar, you will be able to analyze websites and find each one’s theme and plugins in one click. The script did not show us every plugin for every site but it showed enough in many cases. SpyBar also shows the themes being used by your favorite sites.

KohaCon12: Offline Circulation



My colleague at ByWater, Kyle Hall, was up next talking about the Koha Offline Circulation Tool. Kyle wrote the first offline circulation tool in 2006 and within the last year rewrote the whole thing to make it work with latest releases of Koha. With 3.8 we also have another offline circulation tool to use – this one is a Firefox plugin.

Kyle started with a demo of the desktop application. If you’d like to see a demo you can view the video I did last year here (maybe Kyle will do a new one for us with more information).


  • Can load a file of patron and fines info in to the system
  • Great for book mobiles which are offline all of the time


  • If you have multiple computers and/or branches you have to upload all of those files.
  • If library A checks out a book in the AM and the patron returns it to library B in the PM you need to load library A’s file first or else the checkin on library B’s file will be ignored (because the book isn’t checked out yet)

Next up was the Firefox plugin (a video for this will be coming soon). Things to remember after installing the plugin:

  • Show the Add Ons bar in Firefox to see the Koha logo
  • After setting up your params close the plugin and reopen it

This tool lets you decide how you want to apply your changes, either by applying directly so that they’re recorded immediately or if you have multiple computers you can commit them to Koha so that they go in the right chronological order before getting added to Koha.


  • Has a way to keep things in order
  • Lives in your browser so it works on more operating systems


  • There is no way to load patron data in to it so you won’t see what the patron has checked out or what money they owe

Technorati Tags: ,

FF More Popular Than IE7 – Woo Hoo!

This news from Download Squad makes me very happy :)

We’ve all been watching the browser share trends for quite some time now, wondering when the day would come that an alternative finally shoved Internet Explorer off its perch.

It’s finally happened – at least when we’re talking about the most popular single version of a browser. You can see it all in the bar graph above: Firefox 3.5 has dethroned Internet Explorer 7.

Yes, we can all see the other two lengthy bars below IE7. Add them up, and it still means Internet Explorer (6,7, and 8 combined) is more popular overall. Still, for anything to overtake IE anywhere is pretty dang impressive.

We’ve still got 10 days left in 2009 to see where things wind up, but there’s no denying that this has been a good year for Mozilla.

Firefox Add-On Collections

I vaguely remember seeing mention of Firefox adding collections a while back, but I didn’t pay it much notice. Today I was doing my research on Firefox and saw what a collection really is!

Firefox collections are lists of add-ons put together by Firefox users! I did a search for library to see what librarians were recommending as Firefox add-ons and found a bunch I hadn’t heard of before. What a great way for us to share our knowledge with each other!

A few collections that I took note of were:

Don’t see a collection that meets your needs? Add one!! I love open source :)

Ads in Firefox

I always tell people that if they have Firefox (and they should) they need to install AdBlock Plus. Today I learned about Add-Art:

Add-Art is a free FireFox add-on which replaces advertising on websites with curated art images. The art shows are updated every two weeks and feature contemporary artists and curators.

Neat – but if I get to choose between removing ads or replacing them with other images – I’d rather have no ads at all!!

Integrated Gmail Firefox Add-on

I read about this neat sounding add-on for Firefox on Lifehacker – but unfortunately it’s not ready for prime time.

Allows you to make the Inbox Collapsible and loads your choice of Google Calendar, Reader, Notebook, Groups, etc… plus Custom URLs and Google Gadgets seamlessly into the gmail interface. Works w/Google Apps Accounts and GMail Themes.

I installed the Integrated Gmail add-on, but every time I went to Gmail I got an error pop up :(

I guess I’ll just have to wait for more testing before it works on my combo on OSX and Firefox. If you get this to work, let me know how you like it.

New Firefox add-on for WordPress

This sounds so awesome!!

On my list of 14 extremely useful Firefox addons I included ScreenGrab for capturing web pages to PNG or JPG images.

Today, I replaced it with Screen Grab to WordPress. As you probably guessed, it’s got the same core functionality with one major addition: the ability to send images directly to your WordPress-powered blog.

Heading off to download it and give it a whirl.

Technorati Tags: , ,

Power User’s Guide to Firefox 3

This handy guide from Lifehacker may help you customize your newly installed Firefox browser.

Learn how to:

  • Shrink the Super-sized Back Button
  • Adjust the Smart Location Bar’s Number of Suggestions
  • Delete Mistyped URL Suggestions and Other Auto-complete Entries
  • Ditch Obselete Extensions
  • Revert the “AwesomeBar” with Oldbar
  • Trick Out Your Smart Bookmarks
  • Set Gmail as Your Default Email client—Without an Add-on
  • Say Hello to the Firefox Robots
  • Enable Spellchecking in One-line Input Fields
  • Mac Users: Add Favicons to Your Bookmark Toolbar

Technorati Tags: