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

Cuireadh an snáithe seo sa chartlann. Cuir ceist nua má tá cabhair uait.

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

  • 28 freagra
  • 1 leis an bhfadhb seo
  • 75 views
  • Freagra is déanaí ó 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

Athraithe ag mail226 ar

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.

Athraithe ag mail226 ar

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 ?

Athraithe ag cor-el ar

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.

Athraithe ag mail226 ar

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.

Athraithe ag mail226 ar

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.

Athraithe ag mail226 ar

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.

Athraithe ag mail226 ar

  1. 1
  2. 2