[SOLVED] How to change active tab background color in css?

User Help for Mozilla Firefox
Locked
foormanek
Posts: 19
Joined: December 19th, 2017, 5:07 am

[SOLVED] How to change active tab background color in css?

Post by foormanek »

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?
Last edited by foormanek on April 6th, 2019, 10:14 am, edited 1 time in total.
User avatar
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?

Post by jscher2000 »

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:

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;
}
I don't know what the other rule does (the one with #tab).
foormanek
Posts: 19
Joined: December 19th, 2017, 5:07 am

Re: How to change active tab background color in css?

Post by foormanek »

@jscher2000: Your solution works, thank you! And next time I may force myself to use Browser Toolbox more. Thank you.
User avatar
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

Post by RobertJ »

.
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
User avatar
therube
Posts: 21703
Joined: March 10th, 2004, 9:59 pm
Location: Maryland USA

Re: [SOLVED] How to change active tab background color in cs

Post by therube »

@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).
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
User avatar
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

Post by Frank Lion »

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.
"The only thing necessary for the triumph of evil, is for good men to do nothing." - Edmund Burke (attrib.)
.
User avatar
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

Post by jscher2000 »

therube wrote:Does that code still go in userChrome.css?
And is the sample code what worked for you?
When I tested, I switched from the dark theme limitation (text color bright) to the light theme limitation (text color dark) --

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;
}
-- because I use the Light theme.
User avatar
therube
Posts: 21703
Joined: March 10th, 2004, 9:59 pm
Location: Maryland USA

Re: [SOLVED] How to change active tab background color in cs

Post by therube »

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 ;-).
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
User avatar
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

Post by jscher2000 »

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).
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 { }.
Wiggam72
Posts: 451
Joined: July 30th, 2013, 9:05 am

Re: [SOLVED] How to change active tab background color in cs

Post by Wiggam72 »

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.
Noig
Posts: 87
Joined: March 2nd, 2005, 2:47 am

Re: [SOLVED] How to change active tab background color in cs

Post by Noig »

Thanks @RobertJ
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
User avatar
LIMPET235
Moderator
Posts: 39936
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

Post by LIMPET235 »

@Noig...
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.)
Locked