Search Support

Avoid support scams. We will never ask you to call or text a phone number or share personal information. Please report suspicious activity using the “Report Abuse” option.

Learn More

Changing the appearance (not the position!) of the tabs

  • 28 replies
  • 1 has this problem
  • 79 views
  • Last reply by mail226

more options

I raised this (and it was off-topic, so my apologies) in the recent thread about getting the tabs back to below the address bar following the update to 71.0. Having successfully done the move - and thanks to everyone for the help - I'd now like to restore the appearance of the tabs and the tab bar to what I had before the update. I suspect that that was thanks to installing a theme, but I'm afraid I no longer have the details.

I'm attaching a pic of what I'd like to achieve.

Cor-el kindly gave me this for my UserChrome.css file:

.tabbrowser-tab:not([selected]) .tab-content { background-color: #99EEFF !important; }

and that goes some way. But I'd still like to generate a vertical gap between the tabs, round off their top corners, and change the background colour. Despite searching around I haven't yet found the specific coding to do this: if anyone can point me in the right direction I'd be very grateful. Many thanks.

Attached screenshots

Modified by mail226

All Replies (20)

more options

Do you still have a copy of your previous userChrome.css because it is likely that you lost the code for the rounded tabs and other appearance changes you had made ?

It is possible that you still have the previous code in userChrome.css, but that this code is no longer compatible with the current Firefox release.

more options

Cor-el, thanks for that. I still have several earlier versions of the userChrome.css file. I haven't had time yet to go through them properly and determine which of them was the latest, but a quick glance at one revealed this:

/* Generates white horizontal lines between toolbars: */

toolbar {

 -moz-appearance: none !important;
 border-left: 0px !important;
 border-right: 0px !important;
 border-bottom: 0px !important;
 border-top: 1px solid white !important;

}

which is definitely one of the effects I want to restore. Interesting that the label "toolbar" seems to relate to the tabs rather than the bar as a whole.

I'm now going to paste that code into my current css file and see what happens.

LATER...

Sadly, it had no effect. I know that css can be tricky about precedence so I tried inserting it in different places in the file, but the location made no difference. I'll keep trying. .

Modified by mail226

more options

Code for the Tab bar usually begins with #tab or .tab, so maybe look for such a selector.

more options

Cor-el, as a quick test I tried prefacing "toolbar {" first with . and then with # but neither had any effect.

I'll experiment more tomorrow. Good night.

more options

An update. I've made a small advance with this, but one particular css code is still eluding me: how to change the colour of the tabs themselves, as opposed to the tab bar background. Adding background: aqua !important; to #TabsToolbar makes both the tabs and the background that colour. And curiously, adding the same command to #tabbrowser-tabs has exactly the same effect.

Modified by mail226

more options

toolbar is the name of an element and not an Id or ClassName, so you shouldn't use a prefix in this case (i.e. only use toolbar for the selector). The selector for a toolbar in the navigator toolbox could be:

    1. navigator-toolbox toolbar

A selector for a specific toolbar would be:

  • #toolbar-menubar
  • #TabsToolbar
  • #nav-bar
  • #PersonalToolbar

Code for the Tab bar:

#TabsToolbar {
 border-top: 1px dotted #444 !important;
}

Modified by cor-el

more options

Cor-el, many thanks. I'll try again.

Later:

Interesting results so far: inserting the relevant line of your sample code into the existing #TabToolbar codes had no effect at all, and neither did adding the whole thing as a separate item. But putting it into the #tabbrowser-tabs codes did work. Which has given me a good line on how to proceed. Thanks. .

Modified by mail226

more options

Hi mail226, if you aren't already using the Browser Toolbox to "inspect" your toolbars to find selectors, and to edit your userChrome.css code in real time, you could give it a try. It can be slow to load and unload (especially if you have a lot of bookmarks), but it's probably faster than restarting Firefox over and over.

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

more options

Jscher2000, thanks. I've never used the Browser Toobox even back when I was confident enough with css to write a couple of websites from scratch; I'll take a look at it.

more options

Hi mail226, it's similar to the Page Inspector, which you can experiment with by right-clicking something in a page and using Inspect Element.

There's a little icon to activate click-to-select which you can use in either Inspector (you'll definitely need it in the Browser Toolbox to drill down on the tabs bar).

more options

I'm having a problem enabling the Browser Toolbox. The instructions in the link say

Beginning with Firefox 62, the icon to open Developer Tools settings has been moved into a menu accessed by clicking/touching ... (the elipsis) on the right of the tab. but which tab? Sorry to ask such a basic question but I'm obviously overlooking something obvious.

Modified by mail226

more options

You need to enable the Browser Toolbox via the developer tools settings page.

To enable the Browser Toolbox:

more options

Cor-el I think we overlapped. Where are the developer tools settings options? How do I get to them?

...the icon to open Developer Tools settings has been moved into a menu accessed by clicking/touching ... (the elipsis) on the right of the tab." I don't see an elipsis on the right of any tabs.

Modified by mail226

more options

You can open any of the developer tools (Inspector, Web Console) and press the F1 key or click the cogwheel button to open the settings page like explained in the linked MDN article. If you do not see the three-dot backup then try tp make the window wider.

Modified by cor-el

more options

Cor-el thanks. I'm already running Firefox at full screen width so I couldn't get to the elipsis that way, but opening the element inspector and then pressing F1 did the trick.

I have to break off now for a while but I'll get back to things later.

more options

OK, I've gone to Developer Tools Settings/Advanced settings and ticked Enable browser chrome and add-on debugging toolboxes and Enable remote debugging. But unfortunately I still can't open the Browser Toobox: "the menu button new fx menu" still isn't at all evident and the alternative Ctrl + Shift + Alt + 1 keypress still does nothing.

And to cap it all, when I closed the Developer Tools that tab went completely blank (to white) and froze. I couldn't back out of it or refresh it and had to close it and start again. .

Modified by mail226

more options

Hi mail226, it's Ctrl+Alt+Shift+i (i as in inspector).

I have a boring demo on how it is supposed to work in this older video:

https://vimeo.com/242513527#t=346s (starting at 5:46)

more options

Success! The crucial step, which I didn't know about, was Menu / Web Developer (I'd seen a reference to Developer but hadn't made the connection) - that took me to a menu which includes the Browser Toolbox. I haven't played around with it yet: I wanted to say thank you first.

Incidentally, it was Ctrl + Shift + Alt + i which I was pressing - the "1" in my earlier post was a typo. The correct combination didn't work then and it still doesn't work now.

Later...

Making changes to userChrome.css does indeed have an almost immediate effect without restarting Firefox: much better than what I'd been doing, so many thanks.

I've still not been able to determine the correct terms for the changes I'd like to make, though.

Modified by mail226

more options

Almost there. I've succeeded in getting back to very nearly the appearance I had before the latest update: screenshot attached. Many thanks to everyone, especially Cor-el and Jscher200.

One thing is still eluding me: I changed the colour of the "hovered over" tab but the change is applied not only to the tab but to its section of the tab bar background. I can't find any way of preventing this, and all the posted tab-hovering codes that I've tried all have the same effect.

This is the code I'm using:

#TabsToolbar:not(:-moz-lwtheme) .tabs-newtab-button:hover,
#TabsToolbar:not(:-moz-lwtheme) .tabbrowser-tab:hover 
.tab-content:not([selected="true"]) {
  background-color: yellow;
}

The yellow is just for testing purposes. I'd be grateful for any pointers in the right direction.

Modified by mail226

more options

Note that it is best to always use the !important flag.

Does this code what you want to achieve ?

#TabsToolbar:not(:-moz-lwtheme)
 .tabbrowser-tab:not([selected="true"]):hover
 .tab-content {
  background-color: yellow !important;
}

/* NEWTAB button */
#new-tab-button,
#tabs-newtab-button{
  fill:red !important;
}
#new-tab-button:hover,
#tabs-newtab-button:hover{
  fill: white !important;
  background-color: rgba(255,0,0,.7) !important;
  border-radius: 4px;
}

Modified by cor-el

  1. 1
  2. 2