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!
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!
Modified
All Replies (9)
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;
Modified
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.
@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
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
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