MozillaZine

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

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

Post Posted April 6th, 2019, 5:18 am

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.

jscher2000

User avatar
 
Posts: 10701
Joined: December 19th, 2004, 12:26 am
Location: Silicon Valley, CA USA

Post Posted April 6th, 2019, 7:42 am

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/Tools/Browser_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: 14
Joined: December 19th, 2017, 5:07 am

Post Posted April 6th, 2019, 9:34 am

@jscher2000: Your solution works, thank you! And next time I may force myself to use Browser Toolbox more. Thank you.

RobertJ
Moderator

User avatar
 
Posts: 10823
Joined: October 15th, 2003, 7:40 pm
Location: Chicago IL/Oconomowoc WI

Post Posted April 6th, 2019, 10:21 am

.
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 69.0.1 - FF 70b6 - FF 71a - TB 60.8 - Mac OSX 10.13.6
Computers I've used: IBM 7094/UNIVAC 1108/IBM 360/DEC PDP11/DEC VAX-11 780/DEC VAXstation 8000/Sun SPARCstation 2/Mac from 1984 to 2019

therube

User avatar
 
Posts: 19959
Joined: March 10th, 2004, 9:59 pm
Location: Maryland USA

Post Posted April 7th, 2019, 9:17 am

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

User avatar
 
Posts: 20387
Joined: April 23rd, 2004, 6:59 pm
Location: ... The Exorcist....United Kingdom

Post Posted April 7th, 2019, 9:39 am

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.
Metal Lion latest SeaMonkey & Thunderbird Themes - Sea Monkey and Silver Sea Monkey
"The only thing necessary for the triumph of evil, is for good men to do nothing." - Edmund Burke (attrib.)

jscher2000

User avatar
 
Posts: 10701
Joined: December 19th, 2004, 12:26 am
Location: Silicon Valley, CA USA

Post Posted April 7th, 2019, 2:11 pm

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.

therube

User avatar
 
Posts: 19959
Joined: March 10th, 2004, 9:59 pm
Location: Maryland USA

Post Posted April 7th, 2019, 2:59 pm

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

User avatar
 
Posts: 10701
Joined: December 19th, 2004, 12:26 am
Location: Silicon Valley, CA USA

Post Posted April 7th, 2019, 5:25 pm

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: 380
Joined: July 30th, 2013, 9:05 am

Post Posted April 11th, 2019, 3:30 am

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.

Return to Firefox Support


Who is online

Users browsing this forum: Bing [Bot] and 6 guests