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

Changing appearance of tabs.

  • 9 replies
  • 1 has this problem
  • 58 views
  • Last reply by jscher2000

more options

Please see image for question.

Attached screenshots

All Replies (9)

more options

I did not see any specific user styles for Stylish, an addon used to apply custom themes in Firefox. However, I did find the forum where you can ask for help with the right style if another contributor does not have an answer.

Try asking in https://discourse.mozilla.org/c/add-ons/themes

more options

Hi xode, I don't think the Australis design included bright white tabs on Windows XP. Do you have any extensions that could be modifying tab colors? Or existing custom style rules??

more options

jscher2000 said

Hi xode, I don't think the Australis design included bright white tabs on Windows XP. Do you have any extensions that could be modifying tab colors? Or existing custom style rules??

Some additional background: I can use either Windows XP or Windows 7 for internet access as I have a virtual machine setup for both WinXP and Win7. Currently, I'm using Firefox 52 on Windows XP to access the internet. Those are the tabs that I want. I'm having no problem with the tabs on Firefox 52 in Windows XP.

The tabs that I don't want are from Firefox 57 on Windows 7 with the default userChrome.css file from github that at least gives rounded tabs instead of the ugly blocky tabs that Firefox 57 gives by default. I took a screenshot of the tabs from Firefox 57 in Windows 7 and pasted it into the image that I originally posted.

My request is: what changes do I need to make to userChrome.css for Firefox 57 on Windows 7 in order to make the tabs look like those from Firefox 52 on Windows XP? Alternatively, is there a userChrome.css file available that will already do this?

more options

Since you are on Windows XP and Firefox 52 ESR you can use CTR.

more options

xode said

The tabs that I don't want are from Firefox 57 on Windows 7 with the default userChrome.css file from github that at least gives rounded tabs instead of the ugly blocky tabs that Firefox 57 gives by default.

What file is that?

more options

jscher2000 said

xode said
The tabs that I don't want are from Firefox 57 on Windows 7 with the default userChrome.css file from github that at least gives rounded tabs instead of the ugly blocky tabs that Firefox 57 gives by default.

What file is that?

Please see screenshot for answer. The zip file was downloaded from github.

more options

Okay, so you have userChrome-default.css from the Photon Australis developer, you used the rules in there in a userChrome.css file, and you got white tabs. You want the tabs to have the same color as the toolbar.

How did you get that toolbar color in Windows 7? Is that one of the system themes that Firefox is following, or something you installed? I didn't see an exact color match on the Add-ons site when I typed xp but I tested with one I found. As you can see in the attached screenshot, assigning the main part of the tab to match the toolbar color and assigning the curved parts to be 40% white/60% transparent is a reasonable match.

I'll paste that code here, but can't really test without matching your theme.

This replaces the first three rules under:

/* Color specific customizations */
:root {

--svg-selected-before: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' xmlns:svg='http://www.w3.org/2000/svg' width='30px' height='31px' preserveAspectRatio='none'><defs><svg:clipPath id='tab-curve-clip-path-start' clipPathUnits='objectBoundingBox'><svg:path d='m 1,0.0625 0.05,0 0,0.938 -1,0 0,-0.028 C 0.32082458,0.95840561 0.4353096,0.81970962 0.48499998,0.5625 0.51819998,0.3905 0.535,0.0659 1,0.0625 z'/></svg:clipPath><svg:clipPath id='tab-curve-clip-path-end' clipPathUnits='objectBoundingBox'><svg:path d='m 0,0.0625 -0.05,0 0,0.938 1,0 0,-0.028 C 0.67917542,0.95840561 0.56569036,0.81970962 0.51599998,0.5625 0.48279998,0.3905 0.465,0.0659 0,0.0625 z'/></svg:clipPath><svg:clipPath id='tab-hover-clip-path' clipPathUnits='objectBoundingBox'><svg:path d='M 0,0.2 0,1 1,1, 1,0.2 z'/></svg:clipPath></defs><foreignObject width='30' height='31' clip-path='url(%23tab-curve-clip-path-start)'><div id='tab-background-fill' style='background-color:rgba(255,255,255,0.4);background-repeat:no-repeat;height:100%;width:100%;' xmlns='http://www.w3.org/1999/xhtml'></div></foreignObject></svg>");

--svg-selected-after: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' xmlns:svg='http://www.w3.org/2000/svg' width='30px' height='31px' preserveAspectRatio='none'><defs><svg:clipPath id='tab-curve-clip-path-start' clipPathUnits='objectBoundingBox'><svg:path d='m 1,0.0625 0.05,0 0,0.938 -1,0 0,-0.028 C 0.32082458,0.95840561 0.4353096,0.81970962 0.48499998,0.5625 0.51819998,0.3905 0.535,0.0659 1,0.0625 z'/></svg:clipPath><svg:clipPath id='tab-curve-clip-path-end' clipPathUnits='objectBoundingBox'><svg:path d='m 0,0.0625 -0.05,0 0,0.938 1,0 0,-0.028 C 0.67917542,0.95840561 0.56569036,0.81970962 0.51599998,0.5625 0.48279998,0.3905 0.465,0.0659 0,0.0625 z'/></svg:clipPath><svg:clipPath id='tab-hover-clip-path' clipPathUnits='objectBoundingBox'><svg:path d='M 0,0.2 0,1 1,1, 1,0.2 z'/></svg:clipPath></defs><foreignObject width='30' height='31' clip-path='url(%23tab-curve-clip-path-end)'><div id='tab-background-fill' style='background-color:rgba(255,255,255,0.4);background-repeat:no-repeat;height:100%;width:100%;' xmlns='http://www.w3.org/1999/xhtml'></div></foreignObject></svg>");

  --background-selected-middle:
    linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0)),
    linear-gradient(
      transparent
      2px,
      var(--toolbar-bgcolor) 2px,
      var(--toolbar-bgcolor)
    ),
    none;

To eliminate the extra line through the bottom of the active tab, but this removes the line under the background tabs, too:

#nav-bar {
  box-shadow: none !important;
}
more options

jscher2000 said

Okay, so you have userChrome-default.css from the Photon Australis developer, you used the rules in there in a userChrome.css file, and you got white tabs. You want the tabs to have the same color as the toolbar.

I also want the border line around the top edge and the curves of the tab, just as my original screenshot shows for Firefox 52 under Windows XP, so that I can at a glance see what tabs are open.

jscher2000 said

How did you get that toolbar color in Windows 7? Is that one of the system themes that Firefox is following, or something you installed? ...

It would be the default system theme for Firefox, since all I did was follow the instructions in the zip file: create a "chrome" directory under the Firefox profile and copy the userChrome-default.css file from the zip file to userChrome.css in that chrome directory.

more options

Okay, maybe someone else can do that for you.