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

Change the bookmark colors in FF92

more options

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

I have modified userChrome.css with <pre><nowiki>#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; }</nowiki></pre><br> 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
Attached screenshots

Modified by cor-el

Chosen solution

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.

Ref. https://www.reddit.com/r/FirefoxCSS/comments/ggmwkh/how_to_change_the_color_of_liststyleimage_urlsvg/fq4ou2g/

Read this answer in context 👍 0

All Replies (6)

more options

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.

more options

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;

more options

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;
more options

Chosen Solution

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.

Ref. https://www.reddit.com/r/FirefoxCSS/comments/ggmwkh/how_to_change_the_color_of_liststyleimage_urlsvg/fq4ou2g/

more options

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

Modified by cor-el

more options

Hi Norbert, you can surround code with the preformatting tags -- <pre> and </pre> -- to avoid having it interpreted as wiki coding.