geek#techno-babble for the masses

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 my FireFox 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!

This entry was posted on Friday, April 17th, 2009 at 12:15 pm and is filed under Useful Tricks. You can follow any comments to this entry through the RSS 2.0 feed. You can leave a comment, or trackback from your own site.