Thanks for that link. I'll have to subscribe to Reddit and take a look at the discussion.

Sorry: question posted in error. Apologies.

I'm happy to report that I'm almost there, with the layout and most of the colour choices now working in version 127.0 running on Windows 10.

There's one thing I can't sort out: I'd like to have a tab change background colour when hovered over. This is the code, inherited from the previous PC:

[hash] TabsToolbar:not(:-moz-lwtheme) { [hash] tabbrowser-tab:not([selected="true"]):hover [hash] tab-background

  background-color: red !important;

}

I don't know if giving that in isolation is actually helpful or not, since it could be being overridden by something else that I'm not recognising, but just in case the problem is in these lines I thought it might be worth posting them. Am I overlooking something obvious?

Many thanks.

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

That isn't legal CSS. I think they meant for it to be this:

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

jscher2000, thanks for that; I'll give it a go.

jscher2000, unfortunately it didn't work: the problem must lie elsewhere. I think I might start again from scratch with a newly-created profile, checking at each stage. I have the current one safely stored in duplicate and I can always revert to it if I don't get anywhere with a new one.

Actually, that earlier CSS had a hash (meaning id="") where it should have had a dot (meaning class=""). So if I had tested it, I would have known that it can't work.

In Firefox 133, the style rule for hover color for background tabs is written in a new way:

.tab-background {
  .tabbrowser-tab:hover > .tab-stack > &:not([selected], [multiselected]) {
    background-color: var(--tab-hover-background-color);
    outline-color: var(--tab-hover-outline-color);
  }
}
 

I never learned the proper use of the & references to write inside-out CSS. However, I do know how to copy and replace. Try this:

/* Background tab hover colors for Fx133 */
.tab-background {
  .tabbrowser-tab:hover > .tab-stack > &:not([selected], [multiselected]) {
    background-color: red !important;
    outline-color: black !important;
  }
}

Thanks for that; I'll try it as soon as I can. In 133 has anything changed in the coding to set overall colours for the tabs, and a colour for the selected tab? I'd also like to change the background colours for the tab bar and the File, Edit, View... bar: I'll try my existing codes for that and see what happens.

Looking into this, it's clear that the tabs-below-the-address-bar issue is a long-standing moan. And I see that people are complaining that each new FF update tends to break any css code for doing the move. I really don't understand why the option hasn't long since been included as a simple choice in Settings.

I gave up trying to stay on top of changes a few years ago. There are always little changes, occasionally big changes, and the popular Github repositories and r/FirefoxCSS are the go-to resources for updated code.

I saw a stern warning that versions of FF earlier than the current one would no longer function correctly after some date in January. Assuming that's true and not just scare-mongering, I suppose I must update to 133 and try to make my previous layout- and colour changes work, and since the principal one is placing the tabs below the address bar I'm looking for a 133-friendly version of the coding. Cor-el also recommended Reddit and I plan to check that out, as well as the Github resources.

Thanks again.

jscher2000, I installed v133 and tried your hover coding. At first it didn't have any effect but then I remembered to alter the toolkit.legacyUserProfileCustomizations.stylesheets setting to true and now it works perfectly. Hopefully that first successful tweak will pave the way for some more.

Thanks again.