Delicious Toolbar Icon Woes

Recently I’ve begun using the popular bookmarking service Delicious.  One of my favorite features of this service is that I can install the associated Firefox add-on, and this enables a handy bookmarks toolbar that stays synchronized between my home and work computers.  Recently, however, I’ve noticed a strange incompatibility with the theme I use in Firefox.  For some reason, while using the myFireFox theme, the icons placed in the favorites bar are sometimes improperly sized which makes for a relatively ugly experience:

Notice the huge icon next to my link for my Doctor’s Office in the photo above?  This was driving me crazy, so I started looking for ways to fix it without having to switch my theme (I know it looks just like IE8, and that’s on purpose!).  After searching for solutions, I really didn’t find any other instances of folks having the same problem, so I set out to devise my own solution.  This solution works best if you have the Stylish add-on installed.

1. Install Stylish
2. Navigate to Tools > Add-ons, then find Sylish in the list and click Options.
3. Click the Write button and paste the following code:

   @namespace url(http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul);
   @-moz-document url(chrome://browser/content/browser.xul) {
     #ybToolbar-bookmarksview{
       height:0px !important;
     }
     #ybToolbar .toolbarbutton-icon{
       height:16px !important;
       width:16px!important;
     }
     #ybToolbar-chevron .toolbarbutton-icon{
       height: 5px !important;
       width: 7px !important;
     }
   }

4. Save your script and enjoy your fixed delicious toolbar!

Good luck, and happy hacking!