This site will have limited functionality while we undergo maintenance to improve your experience. If an article doesn't solve your issue and you want to ask a question, we have our support community waiting to help you at @FirefoxSupport on Twitter and/r/firefox on Reddit.

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

Folder color in 111 version

more options

I've been with yellow folders for several years. In the version that I have now, version 111, no longer works. I was put at userchrome.css the following: @namespace url(http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul); .bookmark-item[container], treechildren::-moz-tree-image(container) { fill: gold !important; } treechildren::-moz-tree-image(container, OrganizerQuery_BookmarksToolbar) { fill: black !important; } treechildren::-moz-tree-image(container, OrganizerQuery_BookmarksMenu) { fill: black !important; } treechildren::-moz-tree-image(container, OrganizerQuery_UnfiledBookmarks) { fill: black !important; } treechildren::-moz-tree-image(container, livemark) { fill: orange !important; } .bookmark-item[container][query], treechildren::-moz-tree-image(container, query) { fill: dimgray !important; }

I do not know because it doesn't work now. Maybe version 111 no longer admits it? Do you know how to put the yellow folders?

I've been with yellow folders for several years. In the version that I have now, version 111, no longer works. I was put at userchrome.css the following: @namespace url(http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul); .bookmark-item[container], treechildren::-moz-tree-image(container) { fill: gold !important; } treechildren::-moz-tree-image(container, OrganizerQuery_BookmarksToolbar) { fill: black !important; } treechildren::-moz-tree-image(container, OrganizerQuery_BookmarksMenu) { fill: black !important; } treechildren::-moz-tree-image(container, OrganizerQuery_UnfiledBookmarks) { fill: black !important; } treechildren::-moz-tree-image(container, livemark) { fill: orange !important; } .bookmark-item[container][query], treechildren::-moz-tree-image(container, query) { fill: dimgray !important; } I do not know because it doesn't work now. Maybe version 111 no longer admits it? Do you know how to put the yellow folders?

Chosen solution

You need to open the the about:config page via the location bar and paste toolkit.legacyUserProfileCustomizations.stylesheets in its search bar. If this pref is currently false then double-click this line to toggle the value to true.

Read this answer in context 👍 2

All Replies (17)

more options

You need to update your code as what you currently have for treechildren looks rather old, livemark haven't been supported for a very long time and OrganizerQuery has been replaced by queryFolder for a lot of folders.


treechildren::-moz-tree-image(title, container) {}
treechildren::-moz-tree-image(title, open) {}
treechildren::-moz-tree-image(title, separator) {}
treechildren::-moz-tree-image(title, query, folder) {}

treechildren::-moz-tree-image(container, queryFolder_menu________) {}
treechildren::-moz-tree-image(container, queryFolder_unfiled_____) {}
treechildren::-moz-tree-image(container, queryFolder_toolbar_____) {}

Modified by cor-el

more options

cor-el said

You need to update your code as what you currently have for treechildren looks rather old, livemark haven't been supported for a very long time and OrganizerQuery has been replaced by queryFolder for a lot of folders.
treechildren::-moz-tree-image(title, container) {}
treechildren::-moz-tree-image(title, open) {}
treechildren::-moz-tree-image(title, separator) {}
treechildren::-moz-tree-image(title, query, folder) {}

treechildren::-moz-tree-image(container, queryFolder_menu________) {}
treechildren::-moz-tree-image(container, queryFolder_unfiled_____) {}
treechildren::-moz-tree-image(container, queryFolder_toolbar_____) {}

I have no code knowledge, I simply put what they told me in this forum and worked for several years. But if you tell me that it has been old, I put what you tell me Do I put such a code that you have put in userChrome.css?.

Please, can you put all the code that I have to put in userChrome.css ? Thanks.

Modified by Lombard.Lombard

more options

. Please, can you put all the code that I have to put in userChrome.css? for yelow folder. Thanks.

Modified by Lombard.Lombard

more options

You have code in curly brackets {} in your question. That should go in the {} in cor-el's answer.

more options

Dropa said

FYI-userChrome.css isn't part of Firefox by default this is user installed and customized. If your having issue with your userChrome.css you should contact the site that you installed the userChrome.css from for support on how to configure the .css our using. If not you should post this to a userChrome.css github site to check the code or make revision for it to work.

People can still get help with userChrome.css here as you can see cor-el provided some. If you do not know then do some research or move on to something you understand.

more options

James said

Dropa said

FYI-userChrome.css isn't part of Firefox by default this is user installed and customized. If your having issue with your userChrome.css you should contact the site that you installed the userChrome.css from for support on how to configure the .css our using. If not you should post this to a userChrome.css github site to check the code or make revision for it to work.

People can still get help with userChrome.css here as you can see cor-el provided some. If you do not know then do some research or move on to something you understand.

Hello. Previously about 4 years ago, someone asked in the forum what the code was to put the yellow folders and some people responded by putting the code. I copied it and followed the instructions they gave it. And so I've been several years, so far that it seems that it doesn't work anymore. My knowledge on this subject is null to develop code, so I say that if anyone knows what the code is and puts it, then wonderful. I appreciate everything you tell me.

more options

Terry said

You have code in curly brackets {} in your question. That should go in the {} in cor-el's answer.

Hello. Previously about 4 years ago, someone asked in the forum what the code was to put the yellow folders and some people responded by putting the code. I copied it and followed the instructions they gave it. And so I've been several years, so far that it seems that it doesn't work anymore. My knowledge on this subject is null to develop code, so I say that if anyone knows what the code is and puts it, then wonderful. I appreciate everything you tell me.

more options

James said

Dropa said

FYI-userChrome.css isn't part of Firefox by default this is user installed and customized. If your having issue with your userChrome.css you should contact the site that you installed the userChrome.css from for support on how to configure the .css our using. If not you should post this to a userChrome.css github site to check the code or make revision for it to work.

People can still get help with userChrome.css here as you can see cor-el provided some. If you do not know then do some research or move on to something you understand.

Hello. Previously about 4 years ago, someone asked in the forum what the code was to put the yellow folders and some people responded by putting the code. I copied it and followed the instructions they gave it. And so I've been several years, so far that it seems that it doesn't work anymore. My knowledge on this subject is null to develop code, so I say that if anyone knows what the code is and puts it, then wonderful. I appreciate everything you tell me.

more options

These threads show when I search for OrganizerQuery_BookmarksToolbar, so one of them might have your current code that needs an update.


It is not that difficult to create userChrome.css if you have never used it.

The first step is to open the "Help -> Troubleshooting Information" page and find the button to access the profile folder with the random name (xxxxxxxx.default-release).

You can find the button to go to the profile folder under the "Application Basics" section as "Profile Folder -> Open Folder". If you click this button then you open the profile folder in the Windows File Explorer. You need to create a folder with the name chrome in the profile folder with the random name (name is all lowercase). In the chrome folder you need to create a plain text file with the name userChrome.css (name is case sensitive). In this userChrome.css text file you paste the text posted. On Mac you can use the TextEdit utility to create the userChrome.css file as a plain text file.

In Windows saving the file is usually the only time things get more complicated because Windows can silently add a .txt file extension and you end up with a file named userChrome.css.txt. To avoid this you need to make sure to select "All files" in the dialog to save the file in the text editor using "Save File as".

You need to close (Quit/Exit) and restart Firefox when you create or modify the userChrome.css file.

More info about userChrome.css/userContent.css in case you are not familiar: *https://www.userchrome.org/what-is-userchrome-css.html

In Firefox 69 and later you need to set this pref to true on the about:config page to enable userChrome.css and userContent.css in the chrome folder.

more options

You can try to replace your current code in userChrome.css with this new code to see if that works. I haven't tested it, so you need to check this yourself.

.bookmark-item[container],
treechildren::-moz-tree-image(title,container) { fill: gold !important; }
.bookmark-item[container][query],
treechildren::-moz-tree-image(title,container, query) { fill: dimgray !important; }

treechildren::-moz-tree-image(container, queryFolder_toolbar_____) { fill: black !important; }
treechildren::-moz-tree-image(container, queryFolder_menu________) { fill: black !important; }
treechildren::-moz-tree-image(container, queryFolder_unfiled_____) { fill: black !important; }

more options

cor-el said

You can try to replace your current code in userChrome.css with this new code to see if that works. I haven't tested it, so you need to check this yourself.
.bookmark-item[container],
treechildren::-moz-tree-image(title,container) { fill: gold !important; }
.bookmark-item[container][query],
treechildren::-moz-tree-image(title,container, query) { fill: dimgray !important; }

treechildren::-moz-tree-image(container, queryFolder_toolbar_____) { fill: black !important; }
treechildren::-moz-tree-image(container, queryFolder_menu________) { fill: black !important; }
treechildren::-moz-tree-image(container, queryFolder_unfiled_____) { fill: black !important; }


I am putting your code on userChrome.css on this route C: \ Users \ Steba \ Appdata \ Roaming \ Mozilla \ Firefox \ Chrome But it does not work. Thanks for your help

Modified by Lombard.Lombard

more options

That is the wrong location. The code should be in the chrome folder in the profile folder with the random name (xxxxxxxx.default-release) in AppData\Roaming.

  • C:\Users\<user>\AppData\Roaming\Mozilla\Firefox\Profiles\<profile>\chrome\

You can use the button on the "Help -> More Troubleshooting Information" (about:support) page to go to the current Firefox profile folder or use the about:profiles page (Root directory).

more options

You also need to set this pref to true on the about:config page to enable userChrome.css and userContent.css in the chrome folder.

more options

cor-el said

That is the wrong location. The code should be in the chrome folder in the profile folder with the random name (xxxxxxxx.default-release) in AppData\Roaming.
  • C:\Users\<user>\AppData\Roaming\Mozilla\Firefox\Profiles\<profile>\chrome\
You can use the button on the "Help -> More Troubleshooting Information" (about:support) page to go to the current Firefox profile folder or use the about:profiles page (Root directory).

Forgive me, you are right, I put it bad (the code I had for 4 years was well put). The correct route is: C: \ users \ Steba \ Appdata \ Roaming \ Mozilla \ Firefox \ Profiles \ ug5zbjz4.default-reelease \ Chrome

But it does not work.

more options

cor-el said

You also need to set this pref to true on the about:config page to enable userChrome.css and userContent.css in the chrome folder.

I don't understand what you want to tell me. Do I have to create and put userContent.css in chrome? With the same code that I put in userChrome.css?

Modified by Lombard.Lombard

more options

Chosen Solution

You need to open the the about:config page via the location bar and paste toolkit.legacyUserProfileCustomizations.stylesheets in its search bar. If this pref is currently false then double-click this line to toggle the value to true.

more options

It works perfectly Thank you so much You're the best