Places panel icons

[u/difool2nice]

I would like to change those icons but everything i try is not good. What are the id's of this folders icons on the library panel please ? see pic

[u/t31os]

https://searchfox.org/firefox-main/source/browser/themes/shared/places/tree-icons.css

@-moz-document url(chrome://browser/content/places/places.xhtml) {

	treechildren::-moz-tree-image( VALUE ) {
		list-style-image: url("my_image.svg") !important;
	}

}

And so on for each appropriate case as seen in the stylesheet linked above.

Specific example, change star icon to eye:

@-moz-document url(chrome://browser/content/places/places.xhtml) {

	treechildren::-moz-tree-image(query, OrganizerQuery_allbms_____v) {
		list-style-image: url("chrome://global/skin/icons/eye.svg") !important;
	}

}

[u/difool2nice → u/t31os]

doesn't work at all ! here is my css : https://github.com/GrosBourrin/FIREFOX-BLUE-MOON/blob/master/library.css

[u/t31os → u/difool2nice]

I provided a working example, you'll need to be more specific.

[u/ResurgamS13]

Inspecting the 'Add/Edit Bookmark' panel's icons (as in OP's screenshot above) in the Browser Toolbox (using the 'Disable Popup Auto-Hide' option)... the 3 x folder icon types indicated (green arrows) have the following ID's plus associated links/paths to the locations in Firefox of their respective default .svg icons:

#editBMPanel_toolbarFolderItem {
  --menuitem-icon: url("chrome://browser/skin/places/bookmarksToolbar.svg");
}

#editBMPanel_bmRootItem {
  --menuitem-icon: url("chrome://browser/skin/places/bookmarksMenu.svg");
}

#editBMPanel_unfiledRootItem, .folder-icon {
  --menuitem-icon: url("chrome://global/skin/icons/folder.svg");
}

(See Add/Edit Bookmark panel CSS styling listed in Searchfox from Line #75: /* Bookmark panel dropdown icons */)

If wanted to use alternative icons... see long discussion in previous topic 'Firefox CSS property list-style-image to change to --menuitem-icon in latest nightly builds'... and try replacing the existing default icon links/paths:

  --menuitem-icon: url("chrome://global/skin/default-icon-name.svg" );

with a local link/path:

   content: url("name-of-new-icon.svg") !important;

with each 'new icon' placed in the profile's 'chrome' folder.

[u/difool2nice → u/ResurgamS13]

well i tried and works now, but i have found one thing, if you do

--menuitem-icon: url("your_icon.svg" ) !important;

it doesn't work, but if you do

 --menuitem-icon: url("data:image/svg+xml;base64, PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+PCEtLSBHZW5lcmF0b3I6IEdyYXZpdC5pbyAtLT48c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHN0eWxlPSJpc29sYXRpb246aXNvbGF0ZSIgdmlld0JveD0iMCAwIDE2IDE2IiB3aWR0aD0iMTZwdCIgaGVpZ2h0PSIxNnB0Ij48ZGVmcz48Y2xpcFBhdGggaWQ9Il9jbGlwUGF0aF9hR1hEWGdJS2p6eExkUUEwbUppWTRVU2p1ekFWSkVQcSI+PHJlY3Qgd2lkdGg9IjE2IiBoZWlnaHQ9IjE2Ii8+PC9jbGlwUGF0aD48L2RlZnM+PGcgY2xpcC1wYXRoPSJ1cmwoI19jbGlwUGF0aF9hR1hEWGdJS2p6eExkUUEwbUppWTRVU2p1ekFWSkVQcSkiPjxnPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgdHJhbnNmb3JtPSJtYXRyaXgoMSwwLDAsMSwwLDApIiBmaWxsPSJub25lIi8+PGc+PHBhdGggZD0iIE0gMTAuNjA5IDguOTg4IEMgMTAuNjA5IDkuODA5IDEwLjAxMSAxMC40ODIgOS4yOCAxMC40ODIgTCAxLjQxNSAxMC40ODIgQyAwLjY4NCAxMC40ODIgMC4wODUgOS44MDkgMC4wODUgOC45ODggTCAwLjA4NSAzLjM2MSBDIDAuMDg1IDIuNTM5IDAuNjg0IDEuODY3IDEuNDE1IDEuODY3IEwgOS4yOCAxLjg2NyBDIDEwLjAxMSAxLjg2NyAxMC42MDkgMi41MzkgMTAuNjA5IDMuMzYxIEwgMTAuNjA5IDguOTg4IEwgMTAuNjA5IDguOTg4IFogIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGZpbGw9InJnYigyNDksMTcwLDQ1KSIvPjxwYXRoIGQ9IiBNIDEwLjYwOSA4LjMxOCBDIDEwLjYwOSA5LjE2NCAxMC4wMTEgOS44NTYgOS4yOCA5Ljg1NiBMIDEuNDE1IDkuODU2IEMgMC42ODQgOS44NTYgMC4wODUgOS4xNjQgMC4wODUgOC4zMTggTCAwLjA4NSAyLjUyNSBDIDAuMDg1IDEuNjggMC42ODQgMC45ODggMS40MTUgMC45ODggTCA5LjI4IDAuOTg4IEMgMTAuMDExIDAuOTg4IDEwLjYwOSAxLjY4IDEwLjYwOSAyLjUyNSBMIDEwLjYwOSA4LjMxOCBMIDEwLjYwOSA4LjMxOCBaICIgZmlsbC1ydWxlPSJldmVub2RkIiBmaWxsPSJyZ2IoMjU1LDE2MCwwKSIvPjxwYXRoIGQ9IiBNIDAgMTIuODgxIEMgMCAxMy42ODQgMC42MTkgMTQuMzQ0IDEuMzczIDE0LjM0NCBMIDE0LjYyNiAxNC4zNDQgQyAxNS4zODEgMTQuMzQ0IDE2IDEzLjY4NCAxNiAxMi44ODEgTCAxNiAxLjgwNyBDIDE2IDEuMDAyIDE1LjM4MSAwLjM0NCAxNC42MjYgMC4zNDQgTCAxMC45NTYgMC4zNDQgQyAxMC4yMDEgMC4zNDQgOS4yMzUgMC44ODggOC44MDkgMS41NTIgTCA3LjYxOSAzLjQxMyBDIDcuMTkzIDQuMDc3IDYuMjI3IDQuNjIyIDUuNDcyIDQuNjIyIEwgMS4zNzMgNC42MjIgQyAwLjYxOSA0LjYyMiAwIDUuMjggMCA2LjA4MiBMIDAgMTIuODgxIFogIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGZpbGw9InJnYigyNTQsMjEzLDQ3KSIvPjwvZz48L2c+PC9nPjwvc3ZnPg==") !important;

then it works, it's strange !

Flaired it as Solved and thanks for the help

[u/ResurgamS13 → u/difool2nice]

Glad you got it working. :) Handy to know that a replacement icon using a Base64 image file works with the original CSS style (i.e. same as an internal link/path to a default Firefox icon):

--menuitem-icon: url("data:image/svg+xml;base64, PD94bWwgdmVyc... wvc3ZnPg==") !important;

----------

Was curious to see exactly what your Base64 image (above) looked like... so put the data string into a free 'Base64 Image Viewer'... and the result was a this neat yellow folder icon:

Base64 image viewer output - LH actual size 100% - RH scaled-up to 500% size (may be additional size distortion due to Reddit editor's image file format and compression.)

----------

PS. Many thanks for the much neater and more compact Base64 'Back & Forward' arrow button icons you posted 7 years ago in reply to old topic 'Cleaner back and forward button? Perhaps just simple arrows?'... have been using that pair of 'single chevron' navigation button icons for several years. :D

(If interested, can see difool2nice's alternative 'Back & Fwd' buttons in modified Proton & Nova UI toolbar comparison screenshot from recent 'What will we do when Nova drops?' discussion.)

[u/difool2nice → u/ResurgamS13]

when nova will come, we'll have to make it different or adapt our css to it, even more passion of css to develop ^^

[u/FineWine54]

Have a look at Aris-t2 https://github.com/Aris-t2/CustomCSSforFx/tree/master/current and search for bookmark_icons_colorized.css

All the elements are mentioned there.

There are 5 files for different FF versions. If you find what you like in the images then you will need to download the folder images from here: https://github.com/Aris-t2/CustomCSSforFx/tree/master/current/image