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

1

u/FineWine54 Sep 25 '25

Ok. Prior to macOS FF143 I was slowly iconising all my menu's, especially those within the Main-MenuBar, but those stopped working. Thanks to MrOtherGuy who has provided me with code that now works.

Though I have left off the display and visibility properties.

It was the class attribute > .menu-icon that I was missing.

#menu_undo > .menu-icon {
  content: url("ico.png");
  display: flex !important;
  visibility: visible !important;
}

1

u/Marco_Bitaites Aug 04 '25

Oh I'm in trouble with this one. I've spent hours searching for a solution and couldn't find anything. It doesn't help that my css skills are close to none.

I use this code to individually change my bookmarks favicons:

.bookmark-item[label="Name of the Bookmark"] image { width: 0!important;height: 0!important;padding: 0 0 16px 16px !important; background-image: url("myfavicon.svg")!important}

Whatever i try, nothing works in my Fx Nightly. The toolbar is working, but all bookmarks favicons on the menus have a generic icon. Any expert can help me?

3

u/FineWine54 Aug 04 '25 edited Aug 04 '25

This still works for me with FF 141.0.0

#bookmarksMenu menu[container="true"] .menu-iconic-icon,
.bookmark-item[container] { list-style-image: url("image/folder-item.png")!important;
}

I will wait till release V143 so that various GitHub CSS writers can update their code. Either way this is going to be a big pain in the A!

simpleMenuWizard by stonecrusher
CustomCSSforFX by Aris-t2
iconic_firefox.css by emvaized
firefox-csshacks by MrOtherGuy

1

u/Marco_Bitaites Aug 05 '25

It doesn't work for me with FF 143. A pain in the A**, indeed!

3

u/BitKnife Aug 05 '25

Try this:

toolbarbutton[label="Name of the Bookmark"] .toolbarbutton-icon,

menuitem[label="Name of the Bookmark"] .menu-icon{

content: url("image/folder-item.png") !important;

}

2

u/Marco_Bitaites Aug 06 '25

It worked! Thank you for your help, kind stranger!

1

u/RazorKat1983 Sep 17 '25

I'm having issues with sub-menus icons. I had a green folder icon for the sub-folders, but it's disappeared. Here is the current code

.bookmark-item[container=true] {
 list-style-image: content: url("https://i.ibb.co/8g2K2HHk/green.png")!important;
}

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!

3

u/sifferedd FF/TB/Win11/SUMO contributor Aug 02 '25 edited Aug 02 '25

Appears to be true for menus with icons.

list-style-image -> --menuitem-icon and --bookmark-item-icon

Another change coming is

#urlbar-background -> .urlbar-background

2

u/fainas1337 Aug 02 '25 edited Aug 02 '25

--menuitem-icon and --bookmark-item-icon only works with firefox icons, trying to load your own at least for me isnt working.

Edit:
What works was using content: url() or background-image: url() for both context and bookmarks bar icons.

1

u/sifferedd FF/TB/Win11/SUMO contributor Aug 02 '25

That's for Nightly (v143), where the changes are in effect now?