搜尋 Mozilla 技術支援網站

防止技術支援詐騙。我們絕對不會要求您撥打電話或發送簡訊,或是提供個人資訊。請用「回報濫用」功能回報可疑的行為。

Learn More

Change the bookmark colors in FF92

  • 6 回覆
  • 1 有這個問題
  • 23 次檢視
  • 最近回覆由 jscher2000

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

附加的畫面擷圖

由 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

所有回覆 (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.

有幫助嗎?

問個問題

如果您還沒有帳號,您必須先 登入您的帳號 來回覆文章。請 開始一個新問題