[SOLVED] How to change active tab background color in css?
-
- Posts: 19
- Joined: December 19th, 2017, 5:07 am
[SOLVED] How to change active tab background color in css?
Hello,
I am trying to set custom colors for active tab in dark mode, in firefox 66.0.2 on windows 10 dark mode. Code below works for text color:
#main-window[lwthemetextcolor=bright] #tab{ -moz-appearance: none !important; } tab[selected="true"] {
color: yellow !important;
}
I have tried to add lines like:
background-attachment: none !important;
background: white !important;
background-image: none !important;
background-color: white !important;
in various combinations, but active tab background remains default black(ish). Only a thin line on the side of the tab gets colored, obviously some other firefox code draws over my css. White and yellow are just for example here.
How to get the tab body colored?
I am trying to set custom colors for active tab in dark mode, in firefox 66.0.2 on windows 10 dark mode. Code below works for text color:
#main-window[lwthemetextcolor=bright] #tab{ -moz-appearance: none !important; } tab[selected="true"] {
color: yellow !important;
}
I have tried to add lines like:
background-attachment: none !important;
background: white !important;
background-image: none !important;
background-color: white !important;
in various combinations, but active tab background remains default black(ish). Only a thin line on the side of the tab gets colored, obviously some other firefox code draws over my css. White and yellow are just for example here.
How to get the tab body colored?
Last edited by foormanek on April 6th, 2019, 10:14 am, edited 1 time in total.
- jscher2000
- Posts: 11742
- Joined: December 19th, 2004, 12:26 am
- Location: Silicon Valley, CA USA
- Contact:
Re: How to change active tab background color in css?
Have you discovered using the Browser Toolbox to poke around in the user interface? It lets you inspect chrome areas the way the Page Inspector allows inspecting web pages. https://developer.mozilla.org/docs/Tool ... er_Toolbox
One of the children of the tab.tabbrowser-tab element is .tab-background and that draws a background image. Because it appears later in the structure, that image appears in front of the background you were setting on its parent. So try:
I don't know what the other rule does (the one with #tab).
One of the children of the tab.tabbrowser-tab element is .tab-background and that draws a background image. Because it appears later in the structure, that image appears in front of the background you were setting on its parent. So try:
Code: Select all
#main-window[lwthemetextcolor=bright] tab[selected="true"] {
color: blue !important;
}
#main-window[lwthemetextcolor=bright] tab[selected="true"] .tab-background {
background-color: gold !important;
background-image: none !important;
}
-
- Posts: 19
- Joined: December 19th, 2017, 5:07 am
Re: How to change active tab background color in css?
@jscher2000: Your solution works, thank you! And next time I may force myself to use Browser Toolbox more. Thank you.
- RobertJ
- Moderator
- Posts: 10880
- Joined: October 15th, 2003, 7:40 pm
- Location: Chicago IL/Oconomowoc WI
Re: [SOLVED] How to change active tab background color in cs
.
I use this in the userChrome.css and it works just fine
.
I use this in the userChrome.css and it works just fine
Code: Select all
/* ACTIVE TAB BACKGROUND COLOR */
.tab-content[selected="true"] {
background: rgba(65, 85, 145, 0.4) !important;
}
FF 92.0 - TB 78.13 - Mac OSX 10.13.6
- therube
- Posts: 21703
- Joined: March 10th, 2004, 9:59 pm
- Location: Maryland USA
Re: [SOLVED] How to change active tab background color in cs
@jscher, @foormanek
Does that code still go in userChrome.css?
And is the sample code what worked for you?
Cause it didn't seem to make any change on my end, where what RobertJ worked just fine (though I just used, Yellow).
Does that code still go in userChrome.css?
And is the sample code what worked for you?
Cause it didn't seem to make any change on my end, where what RobertJ worked just fine (though I just used, Yellow).
Fire 750, bring back 250.
Mozilla/5.0 (Windows; U; Windows NT 6.1; en-US; rv:1.9.1.19) Gecko/20110420 SeaMonkey/2.0.14 Pinball CopyURL+ FetchTextURL FlashGot NoScript
Mozilla/5.0 (Windows; U; Windows NT 6.1; en-US; rv:1.9.1.19) Gecko/20110420 SeaMonkey/2.0.14 Pinball CopyURL+ FetchTextURL FlashGot NoScript
- Frank Lion
- Posts: 21173
- Joined: April 23rd, 2004, 6:59 pm
- Location: ... The Exorcist....United Kingdom
- Contact:
Re: [SOLVED] How to change active tab background color in cs
For people who are new to .css or prefer to steer clear of 'Browser Toolbox' (Mozilla's incredibly poor substitute for the DOM Inspector extension) then many 'internal' .css names may be found just by looking through the main internal .css file that codes the 'UI'.
Just put - chrome://browser/skin/browser.css in the addressbar and press Enter and you're done.
Hopefully, it should give you the idea of how this lot fits together, instead of random one line code snippets that don't make much sense. But, feel free to use the Browser Toolbox, if you prefer.
Just put - chrome://browser/skin/browser.css in the addressbar and press Enter and you're done.
Hopefully, it should give you the idea of how this lot fits together, instead of random one line code snippets that don't make much sense. But, feel free to use the Browser Toolbox, if you prefer.
"The only thing necessary for the triumph of evil, is for good men to do nothing." - Edmund Burke (attrib.)
.
.
- jscher2000
- Posts: 11742
- Joined: December 19th, 2004, 12:26 am
- Location: Silicon Valley, CA USA
- Contact:
Re: [SOLVED] How to change active tab background color in cs
When I tested, I switched from the dark theme limitation (text color bright) to the light theme limitation (text color dark) --therube wrote:Does that code still go in userChrome.css?
And is the sample code what worked for you?
Code: Select all
#main-window[lwthemetextcolor=dark] tab[selected="true"] {
color: blue !important;
}
#main-window[lwthemetextcolor=dark] tab[selected="true"] .tab-background {
background-color: gold !important;
background-image: none !important;
}
- therube
- Posts: 21703
- Joined: March 10th, 2004, 9:59 pm
- Location: Maryland USA
Re: [SOLVED] How to change active tab background color in cs
Oh, it must be the colors vs themes.
Once I changed your colors, & browser theme, I finally got some reaction.
So you change the text color (I guess 'lwthemetextcolor' might have clued me in), where Robert changes the tab background color (which for me is far more apparent).
As it is, I'm color blind, I see, & death, I hear, & dumb, well, that just come with the territory .
Once I changed your colors, & browser theme, I finally got some reaction.
So you change the text color (I guess 'lwthemetextcolor' might have clued me in), where Robert changes the tab background color (which for me is far more apparent).
As it is, I'm color blind, I see, & death, I hear, & dumb, well, that just come with the territory .
Fire 750, bring back 250.
Mozilla/5.0 (Windows; U; Windows NT 6.1; en-US; rv:1.9.1.19) Gecko/20110420 SeaMonkey/2.0.14 Pinball CopyURL+ FetchTextURL FlashGot NoScript
Mozilla/5.0 (Windows; U; Windows NT 6.1; en-US; rv:1.9.1.19) Gecko/20110420 SeaMonkey/2.0.14 Pinball CopyURL+ FetchTextURL FlashGot NoScript
- jscher2000
- Posts: 11742
- Joined: December 19th, 2004, 12:26 am
- Location: Silicon Valley, CA USA
- Contact:
Re: [SOLVED] How to change active tab background color in cs
The attribute selector between [ ] is meant to restrict the rule only to particular themes, or override built-in rules that apply only to particular themes. The effect of the rule is still what is between the { }.therube wrote:So you change the text color (I guess 'lwthemetextcolor' might have clued me in), where Robert changes the tab background color (which for me is far more apparent).
-
- Posts: 451
- Joined: July 30th, 2013, 9:05 am
Re: [SOLVED] How to change active tab background color in cs
I can confirm that the code by RobertJ works for the background active tab. Along with that, I would like to change the font color so I'll start a new thread.
-
- Posts: 87
- Joined: March 2nd, 2005, 2:47 am
Re: [SOLVED] How to change active tab background color in cs
Thanks @RobertJ
I searched for some time for a tab solution, your one is the only one which worked in FF Debian!
I searched for some time for a tab solution, your one is the only one which worked in FF Debian!
Everyone is becoming an expert within his own capabilities
- LIMPET235
- Moderator
- Posts: 39937
- Joined: October 19th, 2007, 1:53 am
- Location: The South Coast of N.S.W. Oz.
Re: [SOLVED] How to change active tab background color in cs
@Noig...
Please...check the date/s before posting.
This thread died in 2019.
Locking due to old age.
Please...check the date/s before posting.
This thread died in 2019.
Locking due to old age.
[Ancient Amateur Astronomer.]
Win-10-H/64 bit/500G SSD/16 Gig Ram/450Watt PSU/350WattUPS/Firefox-115.0.2/T-bird-115.3.2./SnagIt-v10.0.1/MWP-7.12.125.
(Always choose the "Custom" Install.)
Win-10-H/64 bit/500G SSD/16 Gig Ram/450Watt PSU/350WattUPS/Firefox-115.0.2/T-bird-115.3.2./SnagIt-v10.0.1/MWP-7.12.125.
(Always choose the "Custom" Install.)