Hi Dan, do you mean swap all gray folders for something different, or change individual folders to different icons? Firefox supports a style rule file you can use to change the standard image or to assign particular images to particular bookmarks/folders. It does get to be a bit picky the more you individualize it.

Could you take a look at these threads:

To substitute old icons for current ones:

Part (3) here gives the steps to sub the old style images for the current ones: https://support.mozilla.org/questions/1245941#answer-1186777

To color the current icons:

I have a different style recipe here: https://www.userchrome.org/what-is-userchrome-css.html#colorbookmarkfolder -- you would use this instead of the ZIP file mentioned in the other thread.

To assign colors to folders based on the text labels, here's an example: http://forums.mozillazine.org/viewtopic.php?f=38&t=3043237&p=14814089#p14814089

Hi there,

thank you for your response.

This still requires me to rewrite code though ... it's crazy that it's 2019 and Firefox doesn't just have a menu with options to customize these folder icons.

To be honest, the best option would be to REMOVE the folder icons altogether, since I don't really need them. It 's enough for me if the name of each folder appears in the toolbar, without icon.

Is it possible to remove the icons for each folder, by changing code if need be?

Thanks,

Dan

Hi Dan, yes, you can use a custom style rule to hide the folder icons on the bookmarks toolbar while keeping them elsewhere (menus, Library window, etc.).

When you have 10 minutes to focus on it, here's how it works:

This assumes you do not already have a userChrome.css file. If you do already have a working userChrome.css file, you just need to add the rule under (A) to your file.

(A) Select and copy the following style rule code

/* No folder icons on Bookmarks Toolbar */
#PlacesToolbarItems toolbarbutton[container="true"]:not([query="true"]) .toolbarbutton-icon {
  display: none !important;
}

(B) Generate and download a userChrome.css file

Open the following page and paste the above rules into the editor, replacing the sample rule:

https://www.userchrome.org/download-userchrome-css.html

Then click "Generate CSS File" and save the userChrome.css file to your computer. (See first attached screenshot)

Use the downloads list on the toolbar to open the downloads folder directly to the new userChrome.css file. (See second attached screenshot)

Minimize that Windows Explorer window for later reference.

(C) Create a new chrome folder in your profile folder

The following article has the detailed steps for that (#1, #2, and I recommend #3)

https://www.userchrome.org/how-create-userchrome-css.html

I have videos for both Windows and Mac in case the text is not clear.

(D) Move the userChrome.css file you generated in Step B into the chrome folder you created in Step C

The next time you exit Firefox and start it up again, it should discover that file and apply the rules. Folder names will be there with no icons.

Alright ... that worked like a charm.

Thank you for your support.

Dan

Hello,

I would like to add something to this if possible.

So I created a number of bookmark folders in the toolbar and, with your help, removed all the gray folder icons that were there by default.

Now, there's a little formatting thing that Firefox does that I can't figure out. I am attaching screenshots for reference.

The content of all folders begins with two separators (horizontal gray lines), followed by the first bookmark in that folder.

In some folders the gap on the very top, just above the two separators, is slightly larger than in other folders (visible in screenshots) ... now, while this doesn't affect functionality, it still bothers me because it seems random and it's one of those things that make me wonder: Why does Firefox do this?

Do you have an idea what might cause this, and how it can be fixed so all folders have a unified appearance?

Thanks, Dan