
Can I disable the blue light when a pinned tab updates?
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.
Zgjidhje e zgjedhur
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
Lexojeni këtë përgjigje brenda kontekstit 👍 6Krejt Përgjigjet (4)
Zgjidhja e Zgjedhur
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:
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; }
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!!