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.

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

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

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.

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.

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;
}

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

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

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.

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

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.

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

To enable the Browser Toolbox:

• select "Enable remote debugging" in the developer tools settings
• https://developer.mozilla.org/en-US/Tools/Settings

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.

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.

• https://developer.mozilla.org/en-US/Tools/Settings

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.

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

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)

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.

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.

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;
}