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

Èròjà atẹ̀lélànà yii ni a ti fi pamọ́ fọ́jọ́ pípẹ́. Jọ̀wọ́ béèrè ìbéèrè titun bí o bá nílò ìrànwọ́.

Can I disable the blue light when a pinned tab updates?

  • 4 àwọn èsì
  • 11 ní àwọn ìṣòro yìí
  • 4 views
  • Èsì tí ó kẹ́hìn lọ́wọ́ cor-el

more options

When I receive a message in Slack or Messenger or Gmail, my pinned tab shows a cute blue dot to let me know that something happened. However, these sites' favicons already change to show the notification—and, in the case of Gmail, it's especially distracting because I don't *want* my immediately eye drawn to every single new email I get.

I'd like to be able to disable this light, or maybe have it only appear when the site doesn't change its own favicon.

When I receive a message in Slack or Messenger or Gmail, my pinned tab shows a cute blue dot to let me know that something happened. However, these sites' favicons already change to show the notification—and, in the case of Gmail, it's especially distracting because I don't *want* my immediately eye drawn to every single new email I get. I'd like to be able to disable this light, or maybe have it only appear when the site doesn't change its own favicon.

Ọ̀nà àbáyọ tí a yàn

You can use custom style rules to modify many aspects of Firefox's interface. To do that, you'll need to create a file named userChrome.css in a folder named chrome in a particular place. It should only take a few minutes, but you will need to quit/restart Firefox at least once, so you might not want to interrupt what you're doing right now.

The dot effect is added using a background image on the pinned tab. You can shrink the dot or hide it completely. Here are custom style rules for each of those possibilities:

/* Make the "title changed" notification dot on pinned tabs tiny */
  .tabbrowser-tab > .tab-stack > .tab-content[pinned][titlechanged] {
    background-position: center bottom !important;
    background-size: 4px !important;
  }
/* Completely hide the "title changed" notification dot on pinned tabs */
  .tabbrowser-tab > .tab-stack > .tab-content[pinned][titlechanged] {
    background-image: none !important;
  }

I've got the steps for creating a userChrome.css file on Windows in another thread, but I think Finder works a bit differently, so you might need to improvise a bit. cor-el also posted useful information:

https://support.mozilla.org/questions/1180489

Ka ìdáhùn ni ìṣètò kíkà 👍 6

All Replies (4)

more options

Ọ̀nà àbáyọ Tí a Yàn

You can use custom style rules to modify many aspects of Firefox's interface. To do that, you'll need to create a file named userChrome.css in a folder named chrome in a particular place. It should only take a few minutes, but you will need to quit/restart Firefox at least once, so you might not want to interrupt what you're doing right now.

The dot effect is added using a background image on the pinned tab. You can shrink the dot or hide it completely. Here are custom style rules for each of those possibilities:

/* Make the "title changed" notification dot on pinned tabs tiny */
  .tabbrowser-tab > .tab-stack > .tab-content[pinned][titlechanged] {
    background-position: center bottom !important;
    background-size: 4px !important;
  }
/* Completely hide the "title changed" notification dot on pinned tabs */
  .tabbrowser-tab > .tab-stack > .tab-content[pinned][titlechanged] {
    background-image: none !important;
  }

I've got the steps for creating a userChrome.css file on Windows in another thread, but I think Finder works a bit differently, so you might need to improvise a bit. cor-el also posted useful information:

https://support.mozilla.org/questions/1180489

more options

I should note that those examples are global. If you want to create a rule specific to a particular website, you can create a separate rule for it, and include an unchanging and relatively unique part of its title (the one that appears when you hover the tab) in the selector as illustrated here:

.tabbrowser-tab[label*="gmail.com"] > .tab-stack > .tab-content[pinned][titlechanged] {

So for example if you wanted a tiny dot on sites other than Gmail:

/* Make the "title changed" notification dot on pinned tabs tiny */
  .tabbrowser-tab > .tab-stack > .tab-content[pinned][titlechanged] {
    background-position: center bottom !important;
    background-size: 4px !important;
  }

/* Completely hide the "title changed" notification dot on pinned Gmail tabs */
  .tabbrowser-tab[label*="gmail.com"] > .tab-stack > .tab-content[pinned][titlechanged] {
    background-image: none !important;
  }
more options

Yay, thank you! It looks like this selector is a bit out of date (there's some additional conditions on it now), so I added a `!important` and everything worked great :)

I didn't realize there was this much customization power in Firefox! Today I learned how to use the Browser Toolbox to inspect things myself, which opens up some really neat possibilities :) Thanks for your help!!

more options