সহায়তা খুঁজুন

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.

আরও জানুন

Change the bookmark colors in FF92

  • 6 উত্তরসমূহ
  • 1 এই সমস্যাটি আছে
  • 1 দেখুন
  • শেষ জবাব দ্বারা jscher2000 - Support Volunteer

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
স্ক্রিনশটসমূহ সংযুক্ত হয়েছে

cor-el দ্বারা পরিমিত

সমাধান চয়ন করুন

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/

প্রেক্ষাপটে এই উত্তরটি পড়ুন। 👍 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

চয়ন করা সমাধান

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

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.