Funkcjonalność tej witryny będzie ograniczona w czasie konserwacji. Jeśli artykuł nie rozwiązuje twojego problemu i chcesz zadać pytanie, to nasza społeczność wsparcia jest dostępna na @FirefoxSupport na Twitterze i /r/firefox na Reddicie.

Przeszukaj pomoc

Unikaj oszustw związanych z pomocą.Nigdy nie będziemy prosić Cię o dzwonienie na numer telefonu, wysyłanie SMS-ów ani o udostępnianie danych osobowych. Zgłoś podejrzaną aktywność, korzystając z opcji „Zgłoś nadużycie”.

Więcej informacji

userChrome.css - Changeing the color of the download-button

  • 3 odpowiedzi
  • 4 osoby mają ten problem
  • 42 wyświetlenia
  • Ostatnia odpowiedź od Napos

more options

Hi,

I am trying to use the userChrome.css file to change the color of the download button.

During the normal state I can do that with:

  1. downloads-button {
  color: #E86110 !important; 

}

But I can't seem to find what to specify when I want to change the color of the download button, when it indicates that something are done downloading. I dont know how to change it from the current blue color.

If someone know how to change the color of each different states that the download button have, I would appreciate the help.

Hi, I am trying to use the userChrome.css file to change the color of the download button. During the normal state I can do that with: #downloads-button { color: #E86110 !important; } But I can't seem to find what to specify when I want to change the color of the download button, when it indicates that something are done downloading. I dont know how to change it from the current blue color. If someone know how to change the color of each different states that the download button have, I would appreciate the help.

Wybrane rozwiązanie

Looks like this code is used currently:

  • chrome://browser/skin/browser.css

You can try to override the current fill color and make sure to add the !important flag.

  • fill: #xxxxxx !important;
#downloads-button[attention="success"] > #downloads-indicator-anchor > #downloads-indicator-icon,
#downloads-button[attention="success"] > #downloads-indicator-anchor > #downloads-indicator-progress-outer {
  -moz-context-properties: fill, fill-opacity;
  fill: var(--toolbarbutton-icon-fill-attention);
  fill-opacity: 1;
}
Przeczytaj tę odpowiedź w całym kontekście 👍 1

Wszystkie odpowiedzi (3)

more options

Not sure, you will have to browse through it. Or even pinch some code out. https://github.com/Aris-t2/CustomCSSforFx/issues/2

more options

Wybrane rozwiązanie

Looks like this code is used currently:

  • chrome://browser/skin/browser.css

You can try to override the current fill color and make sure to add the !important flag.

  • fill: #xxxxxx !important;
#downloads-button[attention="success"] > #downloads-indicator-anchor > #downloads-indicator-icon,
#downloads-button[attention="success"] > #downloads-indicator-anchor > #downloads-indicator-progress-outer {
  -moz-context-properties: fill, fill-opacity;
  fill: var(--toolbarbutton-icon-fill-attention);
  fill-opacity: 1;
}
more options

Thanks for your help and directions, I will try and see if I can come up with something.


Edit:

After some trying, I was finally able to get pretty much what I wanted, tanks to the help I got and direction :)

I will share the code, if someone else want to do the same in the future. The current colors are just for prototyping, and should be changed :)

I have currently not updated the colors for when an error occurs during the downloading, but it should be possible to do using the links provided by the other messages.

There might be some unnecessary parts, but it works, so I will keep it.

#downloads-button[attention="success"] #downloads-indicator-icon {
  display: visible !important;
}

/* During a download, force display of progress bar */
#downloads-button[attention="success"] #downloads-indicator-progress-area 
{
  display: -moz-box !important;
  visibility: visible !important;
}

/* After something have successfully completed downloading, set the color of the download icon*/
#downloads-button[attention="success"] > #downloads-indicator-anchor > #downloads-indicator-icon,
#downloads-button[attention="success"] > #downloads-indicator-anchor > #downloads-indicator-progress-outer
{
  fill: #D200FF !important;
}

/* Sets the color of the animated arrow that appears when a download is starting*/
#downloads-button[notification="start"] > #downloads-indicator-anchor > #downloads-indicator-icon,
#downloads-notification-anchor[notification="start"] > #downloads-indicator-notification {
   fill: #557508 !important;
}

/*Set the color of the download icon as something is downloading*/
#downloads-button[progress] > #downloads-indicator-anchor > #downloads-indicator-icon,
#downloads-button[progress] > #downloads-indicator-anchor > #downloads-indicator-progress-outer {
  fill: #557508 !important;
}

/* Set the color for the progress bar as something is downloading */
#downloads-button > #downloads-indicator-anchor > #downloads-indicator-progress-outer > #downloads-indicator-progress-inner {
  fill: yellow !important;
}

/* The default color of the download button */
#downloads-button,
#downloads-button[indicator="true"]:not([attention="success"]) #downloads-indicator-icon
{
  display: -moz-box !important;
  visibility: visible !important;
  fill: #E86110 !important;
}

Zmodyfikowany przez Napos w dniu