What I Learned about Firebug

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!

Find Plugins Used on a Site

Wordpress

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.

Use WordPress as a Wiki

Wordpress

I’m not sure why you’d want to do use a content management system as a wiki – but I’m such a fan of WordPress that I thought this article on WordPress Jedi looked interesting.

Many webmasters use solutions such as MediaWiki to add a Wiki section to their website. There is nothing wrong with that approach. But integrating MediaWiki with WordPress could be challenging. Besides, having to deal with a new content management system is not always fun.

Check out the 5 plugins in this article if you’d like to learn more.

Bulk WordPress Plugin Installer

Wordpress

I am always setting up new WordPress sites and the first thing I do – the first thing we all do – is install a set of the same plugins. Now there is a plugin to make it easier to bulk install those favorites!

Bulk Plugin Installation is a new plugin that allows you to install one or more plugins simply by typing their names or download URLs in a new textarea added to the “Add New” plugin page.

Learn more and see screenshots on WPMU.org.

The Best WordPress Related Websites on the Internet

Wordpress

Tom Ewer at WPMU has created a list of the top 40 best WordPress sites. If you’re interested in WordPress you should check out the list – and of course if you think something is missing let him know! I also have my own WordPress bookmarks and bibliography (which are by no means comprehensive) if you’re interested in bookmarking those.

WordPress Plugins

Wordpress

In preparation for a workshop I’m doing with Polly Farrington at Internet Librarian I’ve been creating a bibliography of WordPress plugins. Here’s what I have so far:

Check out the updated list on Zotero and feel free to add your own must have plugins to the comments here.

Usability and User Testing

Wordpress

Most of you know that I teach WordPress classes for libraries. One of the things that I always have trouble with is teaching plugins. There are so many different plugins out there and they all work differently. Some you install and that’s it, some you install and have to set up, some have their own control panel and others put their menus under Settings or Tools. It’s hard to explain to newbies why things aren’t standardized in any way and that’s why this post at Smashing Magazine caught my attention.

The average website has over five plugins installed (according to PressTrends) and often a theme options panel. For a great experience to continue throughout the website as people actually experience it, we need to establish strong standards for the rest of the community to follow.

I am calling all WordPress plugin developers and themers. You don’t need to guess what your users might want or how they will experience your product. Just watch them. We know it: if we focus on usability, stability and then value, we can make products that users will line up for.

To the core WordPress team and the community at large: Let’s get together and create WordPress human interface guidelines for those who contribute by providing plugins and themes for the world to use. Apple gave us a rock and upon it built a foundation that few can deny. Google finally got around to it with Ice Cream Sandwich, and I expect to see drastic improvement in the wild west that is the Android application landscape. Help us help WordPress.

This doesn’t go just for WordPress though – this goes for our own library websites and our OPACs. How many of you do user tests? Tests where you actually watch the patrons/users try and find things on your website or in your catalog? I’m guessing not many. Most of us think it’s too costly or maybe takes too much time, but if you just reached out to your patrons you might find that you’re wrong. The cost might be some chocolate or a small gift card and as for the time it will be well spent.

For some pointers, read the entire post over at Smashing Magazine and do some research on how others go about usability testing, I can tell you from personal experience that you’ll be surprised how helpful it will be!

WordPress Favicon

Wordpress

One of the things I wish was easier in many WordPress themes was adding a favicon. The favicon is the little icon that appears in the address bar of most websites to the left of the URL.

A favicon (short for favorites icon), also known as a shortcut icon, website icon, URL icon, or bookmark icon, is a 16×16 or 32×32 pixel square icon associated with a particular website or webpage.

Does your library website have one that’s custom to you? If not, and you use WordPress, you might like this tutorial from WPMU.org on adding a favicon to your WordPress site.

A favicon can be added to a website by several methods – by adding code to your theme files or by using a plugin. Many times, you must create the favicon off-site and then upload it to your hosting account for it to be used.

What’s that theme?

themesniffer

Have you ever visited a website and wondered what theme was being used? I have! And now there is a way using Chrome to sniff out the WordPress theme being used by a site you’re looking at.

Chrome Theme Sniffer is a add-on for Chrome that will detect the theme or template being used on current site for several major open source CMS’s, including Drupal, Joomla and WordPress. All you have to do is click the Theme Sniffer button at the top of your browser to get the information instantly

See it in action here on my site – or any other of your favorite WordPress powered sites.

Found via WPMU.org.

WordPress bookshelf plugin

Bookshelf

Are you using WordPress for your library website? This tutorial from Smashing Magazine walks you through creating a bookshelf plugin for your WordPress site. From the tutorial’s conclusion:

Having done this tutorial, you should be able to create a nice shelving plugin for your books. The plugin might serve your needs if you need an online book archive or library. The options aren’t limited to books either; you could create a similar system for CDs, DVDs and records, and you could tweak it to show videos. The possibilities are endless.