Change the bookmark colors in FF92
I have modified userChrome.css with
#editBMPanel_folderMenuList {
/* Specify icon to override basic folder */
list-style-image: url("chrome://browser/skin/places/bookmarksToolbar.svg") !important;
/* list-style-image: url("file:///E:/FireFox%20ESR/App/Firefox64/browser/bookmarksToolbar.svg") */
}
/* One line fix This colours all bookmarks Blue */
.bookmark-item[container], treechildren::-moz-tree-image(container) { fill: #3336ff !important; }
/* Make Shop folder Red */
toolbarbutton.bookmark-item[label="Shop"] > .toolbarbutton-icon { fill: #e74c3c !important; }This colors all the bookmarks blue and changes the 'Shop' folder to red
I went into the omni.ja file and extracted bookmarksToolbar.svg and saved it in the above directory. When I change the url to the file: and comment out Chrome: then it loads the svg file but doesn't color it. It stays gray. What is the difference?
thanks Norbert
Ndryshuar nga cor-el
Zgjidhje e zgjedhur
I found a solution on r/FirefoxCSS: by default, Firefox does not apply fill to SVG's loaded from an external source. I'm not sure why this is restricted, but there might be some privacy/security reason for it. That said, if you really prefer a physical file over a data URI (see cor-el's previous reply), this is where you toggle a preference to enable it:
(1) In a new tab, type or paste about:config in the address bar and press Enter/Return. Click the button accepting the risk.
(2) In the search box in the page, type or paste svg.context-properties.content.enabled and pause while the list is filtered
(3) Double-click the preference to switch the value from false to true
More info on about:config: Configuration Editor for Firefox.
Lexojeni këtë përgjigje brenda kontekstit 👍 0Krejt Përgjigjet (6)
Note that you can open such a SVG image with a chrome:// URI in a Firefox tab and save this image in the usual way.
- chrome://browser/skin/places/bookmarksToolbar.svg
Fill only work for an SVG image and not for the favicon a website supplies. Best is to place custom images in the chrome folder and only specify the file name (no path). You can open the image in a tab to get the correct file:// URI.
You probably have to edit the SVG file and hard code the color values in the file to make Firefox use the colors.
- fill="context-fill" => fill="blue"
- https://searchfox.org/mozilla-release/source/browser/themes/shared/places/bookmarksToolbar.svg
Hi Norbert, there are restrictions on disk access from web pages, scripts, and CSS files. If I understand what you are trying to do, it works best to use the chrome folder as your root. Meaning:
- [profile folder]\chrome\userChrome.css
- [profile folder]\chrome\bookmarksToolbar.svg
In that case, the relative URL is:
list-style-image: url("bookmarksToolbar.svg") !important;
Or if you don't want to see as much clutter:
- [profile folder]\chrome\userChrome.css
- [profile folder]\chrome\images\bookmarksToolbar.svg
In that case:
list-style-image: url("images/bookmarksToolbar.svg") !important;
Note that you can also use a data URI with the preferred fill color directly coded..
list-style-image: url("data:image/svg+xml,<svg width='16' height='16' viewBox='0 0 16 16' fill='blue' fill-opacity='context-fill-opacity' xmlns='http://www.w3.org/2000/svg'>
<path fill-opacity='.15' d='M15,14H1c-0.6,0-1-0.4-1-1V3c0-0.5,0.4-1,1-1h14c0.6,0,1,0.5,1,1v10C16,13.6,15.6,14,15,14z'/>
<path d='M8.4,4.2l1,2.1l2.3,0.3c0.3,0,0.5,0.4,0.2,0.7l-1.7,1.7l0.4,2.4c0.1,0.3-0.3,0.6-0.6,0.4L8,10.8L6,12 c-0.3,0.1-0.6-0.1-0.6-0.4l0.4-2.4L4.1,7.4C3.9,7.2,4,6.8,4.3,6.7l2.3-0.3l1-2.1C7.8,3.9,8.2,3.9,8.4,4.2z'/>
<path d='M15,2H1C0.5,2,0,2.5,0,3v10c0,0.5,0.5,1,1,1h14c0.5,0,1-0.5,1-1V3C16,2.5,15.5,2,15,2z M15,12.5 c0,0.3-0.2,0.5-0.5,0.5h-13C1.2,13,1,12.8,1,12.5v-9C1,3.2,1.2,3,1.5,3h13C14.8,3,15,3.2,15,3.5V12.5z'/>
</svg>") !important;
Zgjidhja e Zgjedhur
I found a solution on r/FirefoxCSS: by default, Firefox does not apply fill to SVG's loaded from an external source. I'm not sure why this is restricted, but there might be some privacy/security reason for it. That said, if you really prefer a physical file over a data URI (see cor-el's previous reply), this is where you toggle a preference to enable it:
(1) In a new tab, type or paste about:config in the address bar and press Enter/Return. Click the button accepting the risk.
(2) In the search box in the page, type or paste svg.context-properties.content.enabled and pause while the list is filtered
(3) Double-click the preference to switch the value from false to true
More info on about:config: Configuration Editor for Firefox.
How do you stop #'s from being replaced by numbers??
/* Colored folders for Bookmark Menus. */ /* Standard folder -- on Toolbar and Menus */ #PlacesToolbarItems toolbarbutton[container="true"]:not([query="true"]) .toolbarbutton-icon, :-moz-any( #PlacesToolbarItems, #PlacesChevronPopup, #BMB_bookmarksPopup, #bookmarksMenu, s/b /*#bookmarksMenu,
thanks Norbert
Ndryshuar nga cor-el
Hi Norbert, you can surround code with the preformatting tags -- <pre> and </pre> -- to avoid having it interpreted as wiki coding.