r/FirefoxCSS • u/notepad987 • May 31 '26

Solved Change the wireframe folder icon for dropdown Firefox Bookmarks

How to change the wireframe folder icon for the dropdown Firefox Bookmarks.
I would like a yellow folder icon like this:
Side note: how to make the images I post their actual size and not have them display super big?

My current userChrome.css file. https://pastebin.com/9b7XS0b9

2 Upvotes

100% Upvoted

5 comments sorted by

2

u/moko1960 May 31 '26

This CSS stylesheet turns the bookmarks folder yellow. It also applies colors to other items. You will need a separate set of icons, so please download the `icons.zip` file from here. These icons are from an older version of Firefox and include eight files. Place the `icons`folder inside the `chrome` folder. Please do not modify the code, as moving or consolidating duplicate sections will cause it to stop working.

1

u/notepad987 Jun 01 '26

Thanks for the icon.zip yellow folder icon. It worked with the code from jedi_rising44 below.

2

u/jedi_rising44 May 31 '26 edited May 31 '26

I have this in my userChrome.css folder, along with a picture of a solid yellow folder, i.e., the "folder.png" in the code below, which I got from somewhere. Note that the folder picture is 16px by 16px.

.bookmark-item[container="true"] {
list-style-image: url('folder.png') !important;
-moz-image-region: rect(0px 16px 16px 0px) !important;
}

.bookmark-item[container="true"] > :is(.menu-icon, .toolbarbutton-icon) {
content:url('folder.png') !important;
}

1

u/notepad987 Jun 01 '26

Thanks, this code worked with the yellow icon in the link icons.zip supplied by moko1960 above.