unable to change background of selected tab in userChrome.css
I've followed several instructions online. Here is my current attempt in userChrome.css: tab[selected="true"] {
-moz-appearance:none !important; background-color:lime !important; color:indigo !important; font-weight:bold !important;
} tab:not([selected="true"]) {
background:darkcyan !important; color:black !important;
} tab:hover {
background:lime !important; color:red !important;
} I can change the background color or background or text color or font in any area but whatever changes I make to background or background-color in selected tab doesn't work. The rest works: I've changed the text color and style of the selected tab but I just can't seem to change the background no matter what I try. I've tried it with an without the -moz-appearance directive, I've tried several different colors expressed as names or rgb values with or without alpha channel. The color of the active tab remains the color of the window which is the same as the other windows on my desktop. I'm using Firefox 61.0.1 (64-bit) on Linux Mint 19 fresh install a few days ago. Is this a Linux Mint thing? Am I doing something wrongly? Is there a reference for all the items that can be styled in userChrome.css? thanks, in advance
Chosen solution
Thank you. I used only part of your solution. I set a separate section just for the background because I couldn't seem to set the font weight and color in that .tab-background section. Here is my final solution:
.tab-background[selected="true"] {
background-color:darkturquoise !important;
} tab[selected="true"] {
color:indigo !important; font-weight:bold !important;
} tab:not([selected="true"]) {
background:darkcyan !important; color:black !important;
} tab:hover {
background:lime !important; color:red !important;
}
I appreciate your help cor-el. {p.s. Any relation to Kal-El?}
Read this answer in context 👍 0All Replies (2)
The tab background is set on the element with this class name: .tab-background Some selectors can be quite long depending on the them you use.
See this file for some rules (as a start, search for .tab-background).
- chrome://browser/skin/browser.css
There is this main rule and a few more further down Line #3922 :
.tab-background[selected=true] {
border-top-color: var(--tabs-border-color);
background-color: var(--toolbar-bgcolor);
background-image: var(--toolbar-bgimage);
background-repeat: repeat-x;
}
Further down there is this line with a rather long selector that has a quite high [developer.mozilla.org/Web/CSS/Specificity Specifity]. Line #3938 :
/* Lightweight theme on tabs */
#tabbrowser-tabs:not([movingtab]) > .tabbrowser-tab > .tab-stack > .tab-background[selected=true]:-moz-lwtheme {
background-attachment: scroll, scroll, fixed;
background-color: transparent;
background-image: linear-gradient(var(--lwt-selected-tab-background-color, transparent), var(--lwt-selected-tab-background-color, transparent)),
linear-gradient(var(--toolbar-bgcolor), var(--toolbar-bgcolor)),
var(--lwt-header-image, none);
background-position: 0 0, 0 0, right top;
background-repeat: repeat-x, repeat-x, no-repeat;
background-size: auto 100%, auto 100%, auto auto;
}
Chosen Solution
Thank you. I used only part of your solution. I set a separate section just for the background because I couldn't seem to set the font weight and color in that .tab-background section. Here is my final solution:
.tab-background[selected="true"] {
background-color:darkturquoise !important;
} tab[selected="true"] {
color:indigo !important; font-weight:bold !important;
} tab:not([selected="true"]) {
background:darkcyan !important; color:black !important;
} tab:hover {
background:lime !important; color:red !important;
}
I appreciate your help cor-el. {p.s. Any relation to Kal-El?}