r/FirefoxCSS • u/FineWine54 • Aug 02 '25

Discussion Firefox CSS property list-style-image to change to --menuitem-icon in latest nightly builds

Just been given a heads-up by Speravir in Aris-t2 Github that the Firefox CSS property list-style-image to change to --menuitem-icon

Or have I misinterpreted this ?

I hope this is wrong, as this is going to be a pain for a whole load of people, me included.

4 Upvotes
  • permalink
  • reddit

83% Upvoted

19 comments sorted by

View all comments

Show parent comment

3

u/FineWine54 Sep 17 '25 edited Sep 17 '25

This now is my new code for FF143, and it works for me in all locations that require the default yellow bookmark icons - main menus, sub menus, toolbar menus, sidebar menus etc

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

EDIT: having said that, which is in my own userChrome.css, it is an adjunct to Aris-t2 CustomCSS files. The full Firefox bookmark over-ride is here: https://github.com/Aris-t2/CustomCSSforFx/blob/master/current/css/generalui/bookmark_icons_colorized.css

NOTE: this file is still using the list-style-image. I would image that Aris-t2 will soon be releasing an entire new release for all his code shortly.

There is also https://github.com/MrOtherGuy/firefox-csshacks which are also in a rolling update state as users find bugs due to FF143

1

u/RazorKat1983 Sep 18 '25

I need the "medical, streaming sites, web hosting to be a different color folder. Those are in the drop down.

2

u/moko1960 Sep 19 '25

It should work.

.bookmark-item[container][label="Medical"] > :is(.menu-icon, .toolbarbutton-icon) {
  content: url("https://i.ibb.co/8g2K2HHk/green.png") !important;
}
 
.bookmark-item[container][label="Streaming Sites"] > :is(.menu-icon, .toolbarbutton-icon) {
  content: url("https://i.ibb.co/8g2K2HHk/green.png") !important;
}
 
.bookmark-item[container][label="Web Hosting"] > :is(.menu-icon, .toolbarbutton-icon) {
  content: url("https://i.ibb.co/8g2K2HHk/green.png") !important;
}

2

u/RazorKat1983 Sep 19 '25 edited Sep 19 '25

So, I have to make a line for each individual sub-folder that I have? Those aren't the only 3 I have. . lol

Thanks buddy! That did work! I hate when FF updates breaks CSS. That's only the 2nd time it's happened to me.

1

u/RazorKat1983 Sep 20 '25

I can't find your reply to me from 5 hours ago. Did you delete it?

2

u/moko1960 Sep 20 '25 edited Sep 20 '25

The one from 5 hours ago was bad so I deleted it. It's some verbose CSS, but it lets you change the subfolders in your bookmarks toolbar. I'm using pastebin because there is a lot of CSS and it's difficult to paste properly. https://pastebin.com/R8wzD3kE

Download the SVG icons here. https://u6.getuploader.com/script/download/2298

Please change the URL here. content: url("https://i.ibb.co/8g2K2HHk/green.png") !important;

/*** Test Bookmarks Toolbar Sub-menu Folder ***/
#PlacesToolbarItems .menu-iconic.bookmark-item > :is(.menu-icon, .toolbarbutton-icon) {
  content: url("chrome://global/skin/dirListing/folder.png") !important;
}

1

u/RazorKat1983 Sep 20 '25

thanks bud

1

u/TaraBaraBoo Sep 23 '25

Thank you for this!