[2022] Any way to change the color of individual Bookmark folders in the sidebar?
@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
PlacesToolbarItems > .bookmark-item[container][label="Complete Tasks" i] {fill: #FF0000 !important;} PlacesToolbarItems > .bookmark-item[container][label="Medical Coding" i] {fill: #FF0000 !important;} PlacesToolbarItems > .bookmark-item[container][label="Bodybuilding" i] {fill: #FF0000 !important;}
This isn't that important, but I was just experimenting to see if changing a few folder colors would be of any benefit to me. And the above code that I tried didn't work. I'm guessing that something changed with Mozilla Firefox in the last 1-1.5 years, and I have a feeling that if I dig into https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors for hours or even days I won't be able to figure out what I need to change. Anyone know what the new code should be? Thanks in advance.
Modified by gaveitatry
Chosen solution
The code you posted has a missing leading '#" to indicate that #PlacesToolbarItems is an 'id' and this works for folders on the Bookmarks Toolbar. Treechildren are used in the Library and in the sidebar and need other code, but for treechildren this is all or nothing (i.e. you can't color a specific folder).
Read this answer in context 👍 0All Replies (5)
From what I have seen, you now have to refer to a particular image. I am using this: https://www.userchrome.org/what-is-userchrome-css.html#colorbookmarkfolder
Fill only works for SVG images. You can try background-color to see if that works better.
#PlacesToolbarItems > .bookmark-item[container][label="Complete Tasks" i] {background-color: #FF0000 !important;}
#PlacesToolbarItems > .bookmark-item[container][label="Medical Coding" i] {background-color: #FF0000 !important;}
#PlacesToolbarItems > .bookmark-item[container][label="Bodybuilding" i] {background-color: #FF0000 !important;}(note that that 'i' flag means ignore case, so all lowercase should work as well)
Thanks. I'm not sure why, but it's not working. I had previously tried color: and background-color:. The reason why I thought I should be using fill: is because this old code I have seems to work on changing the folder icon color:
treechildren::-moz-tree-image(container) {fill:#FF0000 !important;}
I even tried deleting all of my userChrome and starting over and then adding the code you suggested, but no luck.
I will just consider this unsolved and I will leave it open in case someone finds a solution. It's not a big deal though. Thank you for your time and have a nice day.
Chosen Solution
The code you posted has a missing leading '#" to indicate that #PlacesToolbarItems is an 'id' and this works for folders on the Bookmarks Toolbar. Treechildren are used in the Library and in the sidebar and need other code, but for treechildren this is all or nothing (i.e. you can't color a specific folder).
Yeah, cor-el, thank you. You are right. I was missing the #. I was trying to figure out how to post the code in code format, and I tried different things and ended up deleting the #'s by accident. Another thing that you are right about, that I hadn't realized, was that I was trying to change the bookmark folder icons for the sidebar, but the code we were discussing was for the bookmarks toolbar. No wonder it wasn't working! And thanks for explaining that the sidebar will only let you change all of the folders and not each specific one.
Thanks TNorth, for the reply. I think that just shows the different things you can do to the bookmarks sidebar folder icons, but I'm thinking now that you can only change all of them at once and not individual folders. Anyway, thank you, and good night.