userChrome.css code for changing active tab colour
I've just been customising Firefox's look by selecting the dark theme (which appears to be the only way to get some things like the dark NTP), then using userChrome.css to alter various elements to what I want. I don't actually 'know' CSS but searching has found the code to copy into my userChrome.css and then edit the colour values for almost everything. I've changed the toolbar, tabs toolbar, url bar, bookmark bar, menus, context menus, everything I wanted ... except one thing. The background colour of the active tab (just the actual tab in the tabs bar) is stubbornly staying the colour it gets from the Mozilla Dark theme, and I want to change it to the (slightly different) shade of grey that I've changed the toolbar to. Can somebody please tell me what the lines are to put in userChrome.css to change the background colour of the active tab? Thanks.
Chosen solution
Thanks for answering. I'd been trying lots of things I found in different places Googling, with the last not working one being:
.tab-background[selected="true"] {
background-color: #3B3B3B !important;
}
which puzzled me as the:
.tab-line[selected="true"] {
background-color: red !important;
}
from the same source DID work (not helpful to me as that line was one of the few things I didn't want to change!)
However, more Googling eventually came up with a thread on Reddit from someone about a year ago saying that last one I tried had previously worked but had just then stopped working, and there was a reply saying actually it does work but there's a background-image being drawn over it so adding a line to make it this works:
.tab-background[selected="true"] {
background-color: #3B3B3B !important;
background-image: none !important;
}
And indeed that has finally given me what I want. (Basically I've made Firefox look like the chromium Edge's Dark mode, which I like, including all the menus and panels - and a few extensions altered to match - along with dark mode about: pages and NTP. It was driving me nuts that I'd got everything else, just that one tab the wrong shade of grey to match the toolbar.)
As I say I've now got a working solution, but I'll have a look at what you suggested, and the Browser Toolbox, to help me to actually understand this. At the moment I'm blundering around, able to see from names what bits are affecting what, where the colour parameters etc are, but with no understanding of the syntax etc to be able to write sections rather than just copy from some post, paste, edit a colour value, then scratch my head as to why something's not working.
Read this answer in context 👍 0All Replies (5)
What have you tried so far? Maybe this will do what you want:
.tabbrowser-tab[selected="true"] .tab-background {
background: #369 none !important;
}
By the way, if you aren't using the Browser Toolbox to "inspect" the toolbar area, it's very helpful:
Chosen Solution
Thanks for answering. I'd been trying lots of things I found in different places Googling, with the last not working one being:
.tab-background[selected="true"] {
background-color: #3B3B3B !important;
}
which puzzled me as the:
.tab-line[selected="true"] {
background-color: red !important;
}
from the same source DID work (not helpful to me as that line was one of the few things I didn't want to change!)
However, more Googling eventually came up with a thread on Reddit from someone about a year ago saying that last one I tried had previously worked but had just then stopped working, and there was a reply saying actually it does work but there's a background-image being drawn over it so adding a line to make it this works:
.tab-background[selected="true"] {
background-color: #3B3B3B !important;
background-image: none !important;
}
And indeed that has finally given me what I want. (Basically I've made Firefox look like the chromium Edge's Dark mode, which I like, including all the menus and panels - and a few extensions altered to match - along with dark mode about: pages and NTP. It was driving me nuts that I'd got everything else, just that one tab the wrong shade of grey to match the toolbar.)
As I say I've now got a working solution, but I'll have a look at what you suggested, and the Browser Toolbox, to help me to actually understand this. At the moment I'm blundering around, able to see from names what bits are affecting what, where the colour parameters etc are, but with no understanding of the syntax etc to be able to write sections rather than just copy from some post, paste, edit a colour value, then scratch my head as to why something's not working.
Hi DavidBE, you see the difference between old and new rules --
.tab-background[selected="true"] {
background-color: #3B3B3B !important;
background-image: none !important;
}
-- the new one knocks out the background image which Firefox shows in front of the background color.
In mine, I used the short-hand method of doing that, but it is clearer when everything is spelled out.
With the background shorthand properly you can set several properties at once, so you do not need to set (override) some properties like color and image separately.