Mozilla サポートの検索

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.

詳しく学ぶ

このスレッドはアーカイブに保管されました。 必要であれば新たに質問してください。

How do I change the toolbar icons?

  • 5 件の返信
  • 1 人がこの問題に困っています
  • 1 回表示
  • 最後の返信者: fnordbric

more options

Hi!

I find the flat, low-contrast, grey toolbar icons boring and a bit difficult to recognize. Most applications offer some form of relieve,for example with gimp it is just one click in the preferences to change to a colourful icon theme, intellij IDEA has a plugin to get rid of those bland, boring, dull grey things. Is there a way to install a different icon set in firefox quantum? As I understand it, complete themes have been abolished and there i not a word about how to replace them on the customization page.

Hi! I find the flat, low-contrast, grey toolbar icons boring and a bit difficult to recognize. Most applications offer some form of relieve,for example with gimp it is just one click in the preferences to change to a colourful icon theme, intellij IDEA has a plugin to get rid of those bland, boring, dull grey things. Is there a way to install a different icon set in firefox quantum? As I understand it, complete themes have been abolished and there i not a word about how to replace them on the customization page.

選ばれた解決策

Update 2: Now it works.... (see picture)

the icon ids are from the toolbarbutton-icons.inc.css file.

The !important flags seem to be important...

この回答をすべて読む 👍 0

すべての返信 (5)

more options

Hi, I do not have my notes tonight so no long list of sites for you.

About 230 million ways to customize Firefox with userChrome

Place to ask questions and get code for usserChrome : https://www.reddit.com/r/firefox/ A extension :

At this time those sort of Extensions that modified Firefox Controls are not allowed due to security and stop those things from crashing Firefox. Maybe in the near future as there is a new standard people are writing code for it to make new extensions that are compatible.

more options

Update: It looks like the icons and their animations are svg vector graphics files defining the shapes , located in the source repository at browser/themes/shared/icons, with the css for icons and fill colours probably defined in browser/themes/shared/toolbarbutton-icons.inc.css. It does not seem to work to change them from a userChrome.css file (tried replacing forward.svg with back.svg in #forward-button) . I guess I leave it there. It is not that important, just a minor nuisance.

more options

選ばれた解決策

Update 2: Now it works.... (see picture)

the icon ids are from the toolbarbutton-icons.inc.css file.

The !important flags seem to be important...

この投稿は fnordbric により に変更されました

more options

Note that fill-opacity is not a color value, but a number between 0 and 1.

You should always use the important flag when you want to override a defined property, but I think that using only the fill property to set the (text) color would be sufficient (why override the forward button with the icon of the back button??)


#back-button {
 fill: #ff3010 ! important;
/*  list-style-image: url("chrome://browser/skin/back.svg"); */
}

#forward-button {
 fill: #ff3010 ! important;
/* list-style-image: url("chrome://browser/skin/forward.svg"); */
}
more options

I did not know exactly what fill-opacity was for, so I just tried to set a different color there to see if there was any effect. Overriding the forward button with the back button was just to find out if I could override the icon there. At the end, I just changed the forward/back buttons to blue, reload to green and stop to red for now, without changing the shapes.