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

Bookmark Folder Icons

  • 7 replies
  • 1 has this problem
  • 41 views
  • Last reply by jscher2000

more options

Hello, I have recently purchased a new laptop computer as my old one crashed. It is running Windows 10 which is new and unfamiliar to me. I am also using Firefox V85 as my default browser. In building my new bookmarks folder list I found the folder icons are coloured a nasty shade of grey. However, running Firefox on older operating systems (eg XP or Windows 8.1) the folders are a pleasing yellow colour. I have exhausted myself trawling the web, Youtube, and the Firefox help topics in trying to find a way to change the folder icon colour, but with no sucess. Please accept my apologies as I suspect that this question will have been asked before, but I cannot find any references to it. If anyone knows how to do this, please be aware that, whilst I am literate, I don't necessarily understand arcane computer terminology so I would welcome a simple key stroke by key stroke walk through. If there is a fix, it needs to work in both the Toolbar and the Sidebar. Many Thanks Chris

All Replies (7)

more options

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.

Helpful?

more options

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

Modified by cor-el

Helpful?

more options

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.

Helpful?

more options

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

Helpful?

more options

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;}

Helpful?

more options

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

Helpful?

more options

Chris said

... 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).

Helpful?

Ask a question

You must log in to your account to reply to posts. Please start a new question, if you do not have an account yet.