搜索 | 用户支持

防范以用户支持为名的诈骗。我们绝对不会要求您拨打电话或发送短信,及提供任何个人信息。请使用“举报滥用”选项报告涉及违规的行为。

详细了解

userChrome.css code for changing active tab colour

  • 5 个回答
  • 1 人有此问题
  • 1 次查看
  • 最后回复者为 cor-el

more options

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.

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.

被采纳的解决方案

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.

定位到答案原位置 👍 0

所有回复 (5)

more options

What have you tried so far? Maybe this will do what you want:

.tabbrowser-tab[selected="true"] .tab-background {
  background: #369 none !important;
}
more options

By the way, if you aren't using the Browser Toolbox to "inspect" the toolbar area, it's very helpful:

https://developer.mozilla.org/docs/Tools/Browser_Toolbox

more options

选择的解决方案

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.

more options

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.

more options

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.