How Do I Make Bookmark Folders in the Sidebar Solid and Not Translucent or "See Through"? - Mac OS; FF 89 - Partial Solution Discovered - Now Need Help With Color!

If it assists in getting directions or a solution, I am attaching a screenshot of what I'd like to get back to.

OK - half way there ...

found this code and it works when pasted into userChrome.css, except it makes the folders an awful yellow/gold.

Anyone know what to modify in this to make the folders blue or preferably, light blue?

Please!!!!

The code:

treechildren::-moz-tree-image(container), .bookmark-item[container], .folder-icon { list-style-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0iI2U4YmIwMCIgZmlsbC1vcGFjaXR5PSJjb250ZXh0LWZpbGwtb3BhY2l0eSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICA8cGF0aCBkPSJNMTQuNSAzSDYuOTE0YS41LjUgMCAwIDEtLjM1NC0uMTQ2TDUuMTQ2IDEuNDM5QTEuNDkxIDEuNDkxIDAgMCAwIDQuMDg2IDFIMS41QTEuNSAxLjUgMCAwIDAgMCAyLjV2MTFBMS41IDEuNSAwIDAgMCAxLjUgMTVoMTNhMS41IDEuNSAwIDAgMCAxLjUtMS41di05QTEuNSAxLjUgMCAwIDAgMTQuNSAzem0uNSAxMC41YS41LjUgMCAwIDEtLjUuNWgtMTNhLjUuNSAwIDAgMS0uNS0uNVY2aDE0ek0xIDVWMi41YS41LjUgMCAwIDEgLjUtLjVoMi41ODZhLjUuNSAwIDAgMSAuMzU0LjE0NmwxLjQxNCAxLjQxNUExLjQ5MSAxLjQ5MSAwIDAgMCA2LjkxNCA0SDE0LjVhLjUuNSAwIDAgMSAuNS41VjV6Ii8+CiAgPHBhdGggZD0iTTE1IDEzLjVhLjUuNSAwIDAgMS0uNS41aC0xM2EuNS41IDAgMCAxLS41LS41VjZoMTR6IiBmaWxsLW9wYWNpdHk9Ii4yIi8+CiAgPHBhdGggZD0iTTEgNVYyLjVhLjUuNSAwIDAgMSAuNS0uNWgyLjU4NmEuNS41IDAgMCAxIC4zNTQuMTQ2bDEuNDE0IDEuNDE1QTEuNDkxIDEuNDkxIDAgMCAwIDYuOTE0IDRIMTQuNWEuNS41IDAgMCAxIC41LjVWNXoiIGZpbGwtb3BhY2l0eT0iLjEiLz4KICA8cGF0aCBkPSJNMTUgMTMuNWEuNS41IDAgMCAxLS41LjVoLTEzYS41LjUgMCAwIDEtLjUtLjVWMTNoMTR6IiBmaWxsLW9wYWNpdHk9Ii4wNSIvPgo8L3N2Zz4=") !important;}

By the way, if someone knows how to modify that code, please do so and paste in the entire modified code in a reply!

Thanks!!!

Is this in need of a prayer to St. Jude? ... Lost cause and hopeless case?

Seems it should be so simple ...

list-style-image:  url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0iYmx1ZSIgZmlsbC1vcGFjaXR5PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgogIDxwYXRoIGQ9Ik0xNC41IDNINi45MTRhLjUuNSAwIDAgMS0uMzU0LS4xNDZMNS4xNDYgMS40MzlBMS40OTEgMS40OTEgMCAwIDAgNC4wODYgMUgxLjVBMS41IDEuNSAwIDAgMCAwIDIuNXYxMUExLjUgMS41IDAgMCAwIDEuNSAxNWgxM2ExLjUgMS41IDAgMCAwIDEuNS0xLjV2LTlBMS41IDEuNSAwIDAgMCAxNC41IDN6bS41IDEwLjVhLjUuNSAwIDAgMS0uNS41aC0xM2EuNS41IDAgMCAxLS41LS41VjZoMTR6TTEgNVYyLjVhLjUuNSAwIDAgMSAuNS0uNWgyLjU4NmEuNS41IDAgMCAxIC4zNTQuMTQ2bDEuNDE0IDEuNDE1QTEuNDkxIDEuNDkxIDAgMCAwIDYuOTE0IDRIMTQuNWEuNS41IDAgMCAxIC41LjVWNXoiLz4KICA8cGF0aCBkPSJNMTUgMTMuNWEuNS41IDAgMCAxLS41LjVoLTEzYS41LjUgMCAwIDEtLjUtLjVWNmgxNHoiIGZpbGwtb3BhY2l0eT0iLjIiLz4KICA8cGF0aCBkPSJNMSA1VjIuNWEuNS41IDAgMCAxIC41LS41aDIuNTg2YS41LjUgMCAwIDEgLjM1NC4xNDZsMS40MTQgMS40MTVBMS40OTEgMS40OTEgMCAwIDAgNi45MTQgNEgxNC41YS41LjUgMCAwIDEgLjUuNVY1eiIgZmlsbC1vcGFjaXR5PSIuMSIvPgogIDxwYXRoIGQ9Ik0xNSAxMy41YS41LjUgMCAwIDEtLjUuNWgtMTNhLjUuNSAwIDAgMS0uNS0uNVYxM2gxNHoiIGZpbGwtb3BhY2l0eT0iLjA1Ii8+Cjwvc3ZnPg==") !important;

That dadgum near does it ... Thanks so much!!! ... still a little "purple" ... any way to soften it and make it lighter blue?

fill:blue !important

Anything that will do it? Light blue?

You would have to decode the the base64 code with atob("...") in the console to modify fill color. You can use bota("...") to re-encode to base64.

• https://developer.mozilla.org/en-US/docs/Glossary/Base64

@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");

/*https://searchfox.org/mozilla-release/source/browser/themes/shared/places/tree-icons.css*/

.bookmark-item[container][query] {
 fill:blue !important;
 fill-opacity: 1 !important;
}

.bookmark-item[container]:not([query]),
treechildren::-moz-tree-image(container) {
 fill:blue !important;
 list-style-image:  url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0iYmx1ZSIgZmlsbC1vcGFjaXR5PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgogIDxwYXRoIGQ9Ik0xNC41IDNINi45MTRhLjUuNSAwIDAgMS0uMzU0LS4xNDZMNS4xNDYgMS40MzlBMS40OTEgMS40OTEgMCAwIDAgNC4wODYgMUgxLjVBMS41IDEuNSAwIDAgMCAwIDIuNXYxMUExLjUgMS41IDAgMCAwIDEuNSAxNWgxM2ExLjUgMS41IDAgMCAwIDEuNS0xLjV2LTlBMS41IDEuNSAwIDAgMCAxNC41IDN6bS41IDEwLjVhLjUuNSAwIDAgMS0uNS41aC0xM2EuNS41IDAgMCAxLS41LS41VjZoMTR6TTEgNVYyLjVhLjUuNSAwIDAgMSAuNS0uNWgyLjU4NmEuNS41IDAgMCAxIC4zNTQuMTQ2bDEuNDE0IDEuNDE1QTEuNDkxIDEuNDkxIDAgMCAwIDYuOTE0IDRIMTQuNWEuNS41IDAgMCAxIC41LjVWNXoiLz4KICA8cGF0aCBkPSJNMTUgMTMuNWEuNS41IDAgMCAxLS41LjVoLTEzYS41LjUgMCAwIDEtLjUtLjVWNmgxNHoiIGZpbGwtb3BhY2l0eT0iLjIiLz4KICA8cGF0aCBkPSJNMSA1VjIuNWEuNS41IDAgMCAxIC41LS41aDIuNTg2YS41LjUgMCAwIDEgLjM1NC4xNDZsMS40MTQgMS40MTVBMS40OTEgMS40OTEgMCAwIDAgNi45MTQgNEgxNC41YS41LjUgMCAwIDEgLjUuNVY1eiIgZmlsbC1vcGFjaXR5PSIuMSIvPgogIDxwYXRoIGQ9Ik0xNSAxMy41YS41LjUgMCAwIDEtLjUuNWgtMTNhLjUuNSAwIDAgMS0uNS0uNVYxM2gxNHoiIGZpbGwtb3BhY2l0eT0iLjA1Ii8+Cjwvc3ZnPg==") !important;
}

treechildren::-moz-tree-image(container, queryFolder_menu________) {
 fill: blue !important;
 fill-opacity: 1 !important;
 list-style-image: url("chrome://browser/skin/places/bookmarksMenu.svg") !important;
}

treechildren::-moz-tree-image(container, queryFolder_toolbar_____) {
 fill: blue !important;
 fill-opacity: 1 !important;
 list-style-image: url("chrome://browser/skin/places/bookmarksToolbar.svg") !important;
}

treechildren::-moz-tree-image(query) {
 fill: blue !important;
 fill-opacity: 1 !important;
 list-style-image: url("chrome://browser/skin/places/folder-smart.svg") !important;
}

treechildren::-moz-tree-image(title, query, tagContainer),
treechildren::-moz-tree-image(query, OrganizerQuery_tags_______v) {
 fill: blue !important;
 fill-opacity: 1 !important;
 list-style-image: url("chrome://browser/skin/places/tag.svg") !important;
}

treechildren::-moz-tree-image(query, OrganizerQuery_allbms_____v) {
 fill: blue !important;
 fill-opacity: 1 !important;
 list-style-image: url("chrome://browser/skin/bookmark.svg") !important;
}

treechildren::-moz-tree-image(query, OrganizerQuery_downloads__v) {
 fill: blue !important;
 fill-opacity: 1 !important;
 list-style-image: url("chrome://browser/skin/downloads/downloads.svg") !important;
}

treechildren::-moz-tree-image(query, OrganizerQuery_history____v) {
 fill: blue !important;
 fill-opacity: 1 !important;
 list-style-image: url("chrome://browser/skin/places/history.svg") !important;
}

/* calendar icon for folders grouping items by date */
treechildren::-moz-tree-image(title, query, dayContainer) {
 fill: blue !important;
 fill-opacity: 1 !important;
 list-style-image: url("chrome://browser/skin/places/history.svg") !important;
}

treechildren::-moz-tree-image(title, query, hostContainer),
treechildren::-moz-tree-image(title, query, folder) {
 fill: blue !important;
 fill-opacity: 1 !important;
 list-style-image:  url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0iYmx1ZSIgZmlsbC1vcGFjaXR5PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgogIDxwYXRoIGQ9Ik0xNC41IDNINi45MTRhLjUuNSAwIDAgMS0uMzU0LS4xNDZMNS4xNDYgMS40MzlBMS40OTEgMS40OTEgMCAwIDAgNC4wODYgMUgxLjVBMS41IDEuNSAwIDAgMCAwIDIuNXYxMUExLjUgMS41IDAgMCAwIDEuNSAxNWgxM2ExLjUgMS41IDAgMCAwIDEuNS0xLjV2LTlBMS41IDEuNSAwIDAgMCAxNC41IDN6bS41IDEwLjVhLjUuNSAwIDAgMS0uNS41aC0xM2EuNS41IDAgMCAxLS41LS41VjZoMTR6TTEgNVYyLjVhLjUuNSAwIDAgMSAuNS0uNWgyLjU4NmEuNS41IDAgMCAxIC4zNTQuMTQ2bDEuNDE0IDEuNDE1QTEuNDkxIDEuNDkxIDAgMCAwIDYuOTE0IDRIMTQuNWEuNS41IDAgMCAxIC41LjVWNXoiLz4KICA8cGF0aCBkPSJNMTUgMTMuNWEuNS41IDAgMCAxLS41LjVoLTEzYS41LjUgMCAwIDEtLjUtLjVWNmgxNHoiIGZpbGwtb3BhY2l0eT0iLjIiLz4KICA8cGF0aCBkPSJNMSA1VjIuNWEuNS41IDAgMCAxIC41LS41aDIuNTg2YS41LjUgMCAwIDEgLjM1NC4xNDZsMS40MTQgMS40MTVBMS40OTEgMS40OTEgMCAwIDAgNi45MTQgNEgxNC41YS41LjUgMCAwIDEgLjUuNVY1eiIgZmlsbC1vcGFjaXR5PSIuMSIvPgogIDxwYXRoIGQ9Ik0xNSAxMy41YS41LjUgMCAwIDEtLjUuNWgtMTNhLjUuNSAwIDAgMS0uNS0uNVYxM2gxNHoiIGZpbGwtb3BhY2l0eT0iLjA1Ii8+Cjwvc3ZnPg==") !important;
}

cor-el,

Can I simply take the code you sent a couple posts up, change the "fill: blue !important" segment to "fill: XXX !important" and designate the XXX with a recognized color? I tried "light blue" but it did nothing. If I can do it this way, where can I find a list of colors that the code will accept and implement?

Thanks so much!

No, the fill color is hard coded.

You can use the plain text version instead.

list-style-image:  url("data:image/svg+xml,<svg width='16' height='16' viewBox='0 0 16 16' fill='blue' fill-opacity='1' xmlns='http://www.w3.org/2000/svg'>  <path d='M14.5 3H6.914a.5.5 0 0 1-.354-.146L5.146 1.439A1.491 1.491 0 0 0 4.086 1H1.5A1.5 1.5 0 0 0 0 2.5v11A1.5 1.5 0 0 0 1.5 15h13a1.5 1.5 0 0 0 1.5-1.5v-9A1.5 1.5 0 0 0 14.5 3zm.5 10.5a.5.5 0 0 1-.5.5h-13a.5.5 0 0 1-.5-.5V6h14zM1 5V2.5a.5.5 0 0 1 .5-.5h2.586a.5.5 0 0 1 .354.146l1.414 1.415A1.491 1.491 0 0 0 6.914 4H14.5a.5.5 0 0 1 .5.5V5z'/>  <path d='M15 13.5a.5.5 0 0 1-.5.5h-13a.5.5 0 0 1-.5-.5V6h14z' fill-opacity='.2'/>  <path d='M1 5V2.5a.5.5 0 0 1 .5-.5h2.586a.5.5 0 0 1 .354.146l1.414 1.415A1.491 1.491 0 0 0 6.914 4H14.5a.5.5 0 0 1 .5.5V5z' fill-opacity='.1'/>  <path d='M15 13.5a.5.5 0 0 1-.5.5h-13a.5.5 0 0 1-.5-.5V13h14z' fill-opacity='.05'/></svg>") !important;