Search Support

Avoid support scams. We will never ask you to call or text a phone number or share personal information. Please report suspicious activity using the “Report Abuse” option.

Learn More

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!

  • 9 replies
  • 1 has this problem
  • 63 views
  • Last reply by cor-el

more options

How Do I Make Bookmark Folders in the Sidebar Solid and Not Translucent or "See Through"? - Mac OS; FF 89

How to fill in these outlines of bookmark folders in the sidebar? (See image posted with this).

These folders were a solid light blue until FF89 - I'm sure there is something in usersChrome.css I can modify, but no clue as to what.

Any directions, please make them step-by-step!

Attached screenshots

Modified by pcbjr

All Replies (9)

more options

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

more options

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;}

more options

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!!!

more options

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

Seems it should be so simple ...

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

Modified by cor-el

more options

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?

more options

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.


@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;
}

Modified by cor-el

more options

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!

Modified by pcbjr

more options

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;

Modified by cor-el