Can you customize individual icons for folders on the bookmarks bar in Firefox 4?

Question

I have a number of folders on my bookmarks bar in firefox. I'd like to be able to change the icons for a few them to match the category they represent. Is this possible? If so, how?

My suspicion is that it's not built in to firefox itself, because changing the icon is what distinguishes a normal bookmark from a folder (it would break the UI metaphor they're using). But I'm not opposed to using an extension for this, if one exists.

Answer 1

It's possible by using the userChrome.css file:

To create this file, use your operating system tools.

Go to your profile folder (%appdata%\Mozilla\Firefox\Profile\######.default). Then go to the chrome folder there, creating it if necessary. In the chrome folder, create a plain text file named userChrome.css

To modify the icon of a folder named test, enter this to the userChrome.css file:

/*
 * Do not remove the @namespace line -- it's required for correct functioning
 */
@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); /* set default namespace to XUL */

#personal-bookmarks .bookmark-item[container][label="test"] {
 list-style-image:url('gmail.png') !important;
 -moz-image-region:auto !important;
}

Place the folder icon(s) in the same folder where userChrome.css resides

The result should look something like this: