How can the bookmark folder colors be changed from gray?

You can also try the Firefox Color extension, but I don't think it works very well for this particular case.

Hello kgersen, thank you for your reply with links to previous posts about this. Following the instructions for creating a "userChrome.css" file, I have managed to get as far as creating a new text file and inserting the name userChrome.css within the new chrome folder created earlier. But I don't understand how I should then paste all of the following code into that file:

/* Colored folders for bookmark sidebar, toolbar, menu button */
  /* Standard folder */
#bookmarks-view treechildren::-moz-tree-image(container),
#PlacesToolbarItems toolbarbutton[container="true"] .toolbarbutton-icon,
#PlacesToolbarItems menu[container="true"] .menu-iconic-left,
#BMB_bookmarksPopup menu[container="true"] .menu-iconic-icon {
  fill: #e8bb00 !important; /* slightly muted gold */
}
  /* Live Bookmark (RSS Feed) */
#bookmarks-view treechildren::-moz-tree-image(container, livemark),
#PlacesToolbarItems toolbarbutton[container="true"][livemark="true"] .toolbarbutton-icon,
#PlacesToolbarItems menu[container="true"][livemark="true"] .menu-iconic-left,
#BMB_bookmarksPopup menu[container="true"][livemark="true"] .menu-iconic-icon {
  fill: orange !important;
}
  /* Smart bookmark folder */
#bookmarks-view treechildren::-moz-tree-image(container, query),
#PlacesToolbarItems toolbarbutton[container="true"][query="true"] .toolbarbutton-icon,
#PlacesToolbarItems menu[container="true"][query="true"] .menu-iconic-left,
#BMB_bookmarksPopup menu[container="true"][query="true"] .menu-iconic-icon {
  fill: #69c !important; /* similar to blue smart folder color */
}
  /* These "containers" are SVG in the sidebar, not yet on the menu */
#bookmarks-view treechildren::-moz-tree-image(container, OrganizerQuery_BookmarksMenu) {
  fill: olive !important;
}
#bookmarks-view treechildren::-moz-tree-image(container, OrganizerQuery_BookmarksToolbar) {
  fill: olive !important;
}
#bookmarks-view treechildren::-moz-tree-image(container, OrganizerQuery_UnfiledBookmarks) {
  fill: olive !important;
}

When I try to 'open' the userChrome.css file to paste this code, I am presented with a userChrome.css notepad page popping up. Am I supposed to paste the code onto that page? And then what?

Sorry, but I am lost as to what to do at this point.

Thanks Chris

Hi, yes copy and paste all the code into the userChrome.css Notepad file - which in turn, is in the chrome folder, then close the windows and restart Firefox.

Note: Make sure that your css file doesn't have an extension like userChrome.css.txt

You must also type about:config into the address bar, press Enter and accept any warning, then copy and paste the following into the search box toolkit.legacyUserProfileCustomizations.stylesheets Now on the search result, click the Toggle button at the right-hand end to change from False to True, then restart Firefox.

Hello kgersen and Scribe. You guys are brilliant.

Sorry for my shortcomings in understanding your initial replies. I still had a few moments when I also didn't quite understand your subsequent explanations, but when I played around with what you said I found that it all eventually made sense. That has solved the problem and my bookmark folders in both the toolbar and sidebar are now appearing in yellow again. Thank you so much.

Not sure if I dare mention this, but the Other Bookmarks Folder is still gray. I don't suppose there is also a tweak to change this to yellow as well is there? I won't close this as 'solved' right now, just in case there is. Chris

The Other Bookmarks button on the Bookmarks Toolbar is a separate folder that is added automatically when there are bookmarks saved in this folder and isn't an actual bookmark. You can possibly hide this button via the right-click context menu. This button is not within #PlacesToolbarItems, but is positioned outside the area that is closed with the overflow chevron (>>).

The button has this ID: #OtherBookmarks and is a .bookmark-item[container] with a SVG image (.toolbarbutton-icon) and label text (.toolbarbutton-text), so you can use the same code to style this button.

• #OtherBookmarks .toolbarbutton-icon {fill: olive !important;}

Hello cor-el. Thanks for your response. I understand your first paragraph entirly. The second part of your message:

"The button has this ID: #OtherBookmarks and is a .bookmark-item[container] with a SVG image (.toolbarbutton-icon) and label text (.toolbarbutton-text), so you can use the same code to style this button.

   #OtherBookmarks .toolbarbutton-icon {fill: olive !important;} "

suggests to me that the colour of the Other Bookmarks Icon can be changed - in a similar way to changing the bookmark folders, but I am afraid I am at a loss as to how that can be done. I am afraid that I need a step by step explanation if I am to achieve this.

That said, however, I am thinking that once I have properly organised my bookmarks folders, then there is probably little if any need for me to use the Other Bookmarks folder so the colour change me be becoming academic rather than a 'must have'.

Again, thanks to all who are responding to this question

Regards Chris

... you can use the same code to style this button.

#OtherBookmarks .toolbarbutton-icon {fill: olive !important;} 

Hi Chris, I think cor-el means to add that new rule at the end of your current rules (on its own line).