Changing the appearance (not the position!) of the tabs
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.
Okulungisiwe ngu mail226
All Replies (8)
Unfortunately no, it doesn't: the effect is exactly the same as my effort: screenshot attached.
Thanks for the reminder about the !important flag: there's a fair bit of tidying up to do but I really should be in the habit of adding them as I go, I know.
Okulungisiwe ngu mail226
What part of the tab do you want to be colored ?
I think that only the .tab-content selector is possible.
Does the new tab button code work ?
Okulungisiwe ngu cor-el
I want the hover-colour to fill only the tab itself, the cyan area. It seems odd that there might not be a way of doing it.
The only effect I noticed from the new tab button code was that the + sign in the tab bar turned red. The new tab I opened looked exactly the same as one did with my simpler code, or with yours with the new tab button section removed.
Okulungisiwe ngu mail226
What code do you use to get the rounded tabs ?
Cor-el, this is the coding for the tabs:
#TabsToolbar .tab-background {
border-top-left-radius: 5px;
border-top-right-radius: 5px;
margin-top: 3px;
margin-right: 1px;
margin-left: 1px;
background-color: aqua !important;
}
I know I could streamline it a little but at this stage I find it useful to lay out individual formatting lines like that.
Okulungisiwe ngu mail226
Almost solved it, with this code for the hovered-over tab:
#TabsToolbar:not(:-moz-lwtheme)
.tabbrowser-tab:not([selected="true"]):hover
.tab-background {
background-color: yellow !important;
}
This applied the hover colour to just the tab and not the background. Unfortunately it also generated a line at the top of the tab, but adding this cured that:
.tab-line {
opacity: 0 !important;
}
Screenshot attached. Now all I have to do is change that vivid yellow for something a bit more tasteful and I'm there.
Okulungisiwe ngu mail226
Done. Huge thanks to everyone, especially Cor-el and Jscher200 for your splendid help and your endless patience.
A very Merry Christmas to all here!
Sorry, posted in haste.
Okulungisiwe ngu mail226