Search Support

Avoid support scams. We will never ask you to call or text a phone number or share personal information. Please report suspicious activity using the “Report Abuse” option.

Learn More

Is it possible to have different icon for differnt folders in bookmark toolbar

  • 5 replies
  • 3 have this problem
  • 15 views
  • Last reply by Wizardgoat

more options

On the bookmarks toolbar all folders have the same icon. Is there a way to assign different icons to different folders. Even if customizing requires programming is not a problem. If this is possible can someone point me in the right direction. Thank you in advance, Momir

On the bookmarks toolbar all folders have the same icon. Is there a way to assign different icons to different folders. Even if customizing requires programming is not a problem. If this is possible can someone point me in the right direction. Thank you in advance, Momir

All Replies (5)

more options

Hmm, maybe. The Bookmarks Toolbar icons can be restyled using custom CSS rules in a userChrome.css file or the Stylish extension.

For example, I created one that helps me spot bookmarklets by replacing the generic dotted outline with a blue bullet:

@namespace url(http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul);
#personal-bookmarks .bookmark-item[scheme="javascript"] .toolbarbutton-icon {
  width:6px !important;
  height:6px !important;
  background-color:#00f !important;
  border-radius:3px !important;
}

Targeting individual folders is going to require some fancier selectors, but hopefully will be possible. Also, introducing new icons may require that you convert the the images to data-URIs, since I'm not sure you can use arbitrary URLs with toolbar images.

Not sure if this is enough to get started. Do you have the DOM Inspector extension? It has a feature to inspect the DOM of toolbars, which might be useful.

more options

Or perhaps check the Add-ons site first, since there are many bookmark-related extensions.

more options

Add code to the userChrome.css file below the default @namespace line.


@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); /* only needed once */

#bookmarksMenuPopup .bookmark-item[container][label^="<folder name>"] {
 list-style-image:url('bookmark-icon.png')!important;
 -moz-image-region:auto!important;
}

The icon file needs to be in the chrome folder where the userChrome.css is located.


The customization files userChrome.css (user interface) and userContent.css (websites) are located in the chrome folder in the Firefox profile folder.

  • Create the chrome folder (lowercase) in the <xxxxxxxx>.default profile folder if this folder doesn't exist
  • Use a plain text editor like Notepad to create a (new) userChrome.css file in the chrome folder (file name is case sensitive)
  • Paste the code in the userChrome.css file in the editor window
  • Make sure that the userChrome.css file starts with the default @namespace line
  • Make sure that you select "All files" and not "Text files" when you save the file via "Save file as" in the text editor as userChrome.css.
    Otherwise Windows may add a hidden .txt file extension and you end up with a not working userChrome.css.txt file

You can use this button to go to the current Firefox profile folder:

more options

jscher2000 said

Not sure if this is enough to get started. Do you have the DOM Inspector extension? It has a feature to inspect the DOM of toolbars, which might be useful.

More I've been thinking about this more i see that it wont be as easy as I hoped. I suppose that i could change using CSS how all folder icons looks, but to change them individual will require accessing each by name. I will try with DOM Inspector. That seems logical to me .

Thank you very much I have ena idea where to start. I will post there if I find sutable solution.

Regards to all

more options

Your problem is now solved! The Bookmarks Folder Images extension will let you either select from a list of icons, or provide your own icons, for any Bookmarks folder. Note that most of the CSS solutions will style only the popups. They cannot readily style individual "tree children" in the Sidebar and Library views. It takes an extension, and this one will do it.

See https://addons.mozilla.org/addon/bookmarks-folder-images/