Getting bookmark icons back on your toolbar
Published by vladimir February 4th, 2008 in Mozilla, UncategorizedOne of the things that's always been different between the Windows and MacOS X versions of Firefox is favicons on the bookmarks toolbar --- Windows has 'em, the Mac doesn't. I think the origins of this are from Safari's decision to not include them, but I'm not really sure. Either way, this drove me nuts... I have a bunch of bookmarks on there where I have the title deleted, so that just the favicon shows up. This, as you can guess, isn't entirely useful if the favicon is hidden as well.
Luckily, you can restore the favicons with a quick userChrome.css hack. Here's what the end result looks like:
@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
.bookmark-item > .toolbarbutton-icon {
display: -moz-box ! important;
background-position: 0px 1px !important;
}
.bookmark-item:hover > .toolbarbutton-icon {
background: url("chrome://global/skin/toolbar/toolbarbutton-customhover-mid.png") repeat-x;
}
.bookmark-item[container]:hover:active > .toolbarbutton-icon,
.bookmark-item[container][open="true"] > .toolbarbutton-icon {
background: url("chrome://browser/skin/bookmark-open-mid.png") repeat-x !important;
}
13 Comments to “Getting bookmark icons back on your toolbar”
- 1 Pingback on Feb 11th, 2008 at 8:52 am
Cool! Thanks for the tip. But is there a way to increase the margin between the icon and the label. I tried to stick margin-right: 2px in there somewhere, but it did nothing…
See Bugzilla bug 348719 :) Some of the chrome in my patch there might be of help for tweaking them further (though it hasn’t been updated in a long time!). The dislike of favicons on the toolbar seems to be due to the perception that grey = Mac-native and that colours will ruin the pristine greyness of the theme. Personally, I’ve found the lack of them to pretty much cripple the user-friendliness of the bookmarks bar, which is about as anti-Mac in philosopy as you can get.
I notice that the favicons on the tabs are now desaturated when they’re backgrounded, so perhaps employing this approach will make them more acceptable.
If you don’t want the favicon and text look too sticky, you can add
padding-right: 3px ! important;
to .bookmark-item > .toolbarbutton-icon
Dunno if it’s IE6, or just the version I have at work, but dark grey text on a patterned dark grey background makes for aching eyes…
This may not be the right place to ask, but: apparently the “home” button/icon has been removed from recent Linux nightlies? What’s up with that?
Nice. Personally I’d prefer they were enabled on Mac by default. i don’t think it’s entirely necessary to copy Safari to be popular. Firefox should adapt to the OS (native looking skinning, widgets, etc), but it doesn’t have to be a carbon copy.
Great hack! I have added
.bookmark-item[container] > .toolbarbutton-icon { display: none ! important }
to avoid the folder icons.
This is really nice. I have one small problem, the background color on the icon does not get reversed when hovering over the link (so it looks like there is a bite out since the rest gets reversed). This looks especially funny when there is no name. Is there a way to fix this?
This post prompted me to finally dig out the DOM inspector and go looking at the bookmarks toolbar in a little more detail. I’ve always wanted to specifically remove the favicons from certain bookmarks so that they take up less space. I’ve documented the userChrome.css changes needed here:
http://www.peppertop.com/blog/?p=47
Does this work in the beta 3 builds? I stuck this in the userChrome.css file and restarted firefox, but it didn’t seem to have helped.
So ignore my last comment. Turns out I was editing the userChrome file with textedit, which wasn’t saving the file as a plaintext document. Once I fixed that, it all worked.
Is it just me, or do the favicons look gigantic? Is there a way of toning them down?
Thanks for this. I used this code and a couple of comments with tweaks to create a Stylish script for people who don’t want to edit userChrome.
http://userstyles.org/styles/5969