kierandelaney.net

Firefox 3 Bookmarks Toolbar Favicons - Now For OSX

Who’s idea was it to remove favicons from Firefox for the Mac? Its a stupid shitty idea in any case. I had my bookmarks toolbar all neatly set up with favicons and no text - after all the Flickr logo tells you all you need to know and these specific bookmarks are in your toolbar because their frequent stops on your internet tours….

And then we got a mac and the only thing, the only thing I didn’t like was the inability to have favicons display on my toolbar’s without using some roughnecks Firefox theme that makes my eyes bleed with poor design and style abuse. But here it is, the few lines of code you need to change to make it all play nice - its even CSS so it shouldn’t be taxing for even the hardest of code-phobes.

First find your profile folder, bearing in mind the tilde character (~) refers to the current user’s Home folder, so ~/Library is the /Macintosh HD/Users//Library folder.

Your profile directory is one of these:

• ~/Library/Mozilla/Firefox/Profiles/
• ~/Library/Application Support/Firefox/Profiles/

You’re going to need to edit/create a file called userChrome.css. This file sets the display rules for various elements in the Firefox user interface and is located in the sub-folder called chrome in your profile folder. The file does not exist by default, so you need to create it before you can start adding your preferences. There’s actually an example file that exists by default, called userChrome-example.css so you can just rename that file by removing the -example part and start editing away…

And heres the magic code…. if you’re CSS aware then editing margins and things for the best fit for you shouldn’t be a problem.

.bookmark-item > .toolbarbutton-icon {
padding: 0px 2px 0px 0px !important;
margin: 0px !important;
width: 18px !important;
height: 16px !important;
display: inline !important;
}
.bookmark-item:hover > .toolbarbutton-icon {
background: url("chrome://browser/skin/bookmark-hover-mid.png") repeat-x !important;
}
.bookmark-item:hover:active > .toolbarbutton-icon {
background: url("chrome://browser/skin/bookmark-open-mid.png") repeat-x !important;
}
toolbarbutton.bookmark-item[container]:hover:active > .toolbarbutton-text,
toolbarbutton.bookmark-item[container][open="true"] > .toolbarbutton-text,
toolbarbutton.bookmark-item[container]:hover:active > .toolbarbutton-icon,
toolbarbutton.bookmark-item[container][open="true"] > .toolbarbutton-icon {
background: url("chrome://browser/skin/bookmark-open-mid.png") repeat-x !important;
}

Filed by Kieran at August 22nd, 2008 under Blog, Code, Mac