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

Lolu chungechunge lwabekwa kunqolobane. Uyacelwa ubuze umbuzo omusha uma udinga usizo.

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

  • 28 uphendule
  • 1 inale nkinga
  • 67 views
  • Igcine ukuphendulwa ngu 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.

Ama-screenshot ananyekiwe

Okulungisiwe ngu mail226

All Replies (8)

more options

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

more options

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

more options

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

more options

What code do you use to get the rounded tabs ?

more options

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

more options

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

more options

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!

more options

Sorry, posted in haste.

Okulungisiwe ngu mail226

  1. 1
  2. 2