Join the AMA (Ask Me Anything) with Firefox leadership team to talk about Firefox priorities in 2024. Mark your calendar! Thursday, June 13, 17:00 - 19:00 UTC.

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

tab deliminators

  • 19 replies
  • 0 have this problem
  • 72 views
  • Last reply by cor-el

more options

I am currently on version 110 of firefox. It is driving me crazy how there is no physical object or deliminator between tabs. they all just blend in. Is there any way to add the "|" (pipe command) between the tabs so they have some sort of separation?

thanks

I am currently on version 110 of firefox. It is driving me crazy how there is no physical object or deliminator between tabs. they all just blend in. Is there any way to add the "|" (pipe command) between the tabs so they have some sort of separation? thanks

All Replies (19)

more options

You can use CSS code in userChrome.css to add delimiters to the tabs.


 *|*:root {
  --panel-font-size: 1em !important;
  --tab-min-height: 30px !important;
  --tab-border-radius: 4px !important;  /*4px*/
  --tab-block-margin: 0px !important; /*4px*/
 }

 .tab-background:is([multiselected],[selected]) {
   border-top-color: var(--tabs-border-color) !important;
   border-top-style: solid !important;
   border-bottom-color: transparent !important;
 }

 .tab-background:not([selected],[multiselected]) {
   border: 1px solid rgba(0,0,0,.20) !important;
   border-top-color: transparent !important;
   border-bottom-color: transparent !important;
   background-color: color-mix(in srgb, currentColor 5%, transparent) !important;
 }

 .tab-background {
  border-radius: var(--tab-border-radius) !important;
  margin-block: var(--tab-block-margin) !important;
 }


More info about userChrome.css/userContent.css in case you are not familiar: *https://www.userchrome.org/what-is-userchrome-css.html

In Firefox 69 and later you need to set this pref to true on the about:config page to enable userChrome.css and userContent.css in the chrome folder.

more options

Dropa said

My Tab windows are clearly defined with borders. So you need to provide screenshot of what you mean tab issues are at.

interesting, i wonder why mine does not. here is the default install

more options

cor-el said

You can use CSS code in userChrome.css to add delimiters to the tabs.
 *|*:root {
  --panel-font-size: 1em !important;
  --tab-min-height: 30px !important;
  --tab-border-radius: 4px !important;  /*4px*/
  --tab-block-margin: 0px !important; /*4px*/
 }

 .tab-background:is([multiselected],[selected]) {
   border-top-color: var(--tabs-border-color) !important;
   border-top-style: solid !important;
   border-bottom-color: transparent !important;
 }

 .tab-background:not([selected],[multiselected]) {
   border: 1px solid rgba(0,0,0,.20) !important;
   border-top-color: transparent !important;
   border-bottom-color: transparent !important;
   background-color: color-mix(in srgb, currentColor 5%, transparent) !important;
 }

 .tab-background {
  border-radius: var(--tab-border-radius) !important;
  margin-block: var(--tab-block-margin) !important;
 }


More info about userChrome.css/userContent.css in case you are not familiar: *https://www.userchrome.org/what-is-userchrome-css.html

In Firefox 69 and later you need to set this pref to true on the about:config page to enable userChrome.css and userContent.css in the chrome folder.

i will give that a shot. The attached image is my goal. just simple. i have also attached what it currently looks like

thanks

Modified by LT72884

more options

cor-el said

You can use CSS code in userChrome.css to add delimiters to the tabs.
 *|*:root {
  --panel-font-size: 1em !important;
  --tab-min-height: 30px !important;
  --tab-border-radius: 4px !important;  /*4px*/
  --tab-block-margin: 0px !important; /*4px*/
 }

 .tab-background:is([multiselected],[selected]) {
   border-top-color: var(--tabs-border-color) !important;
   border-top-style: solid !important;
   border-bottom-color: transparent !important;
 }

 .tab-background:not([selected],[multiselected]) {
   border: 1px solid rgba(0,0,0,.20) !important;
   border-top-color: transparent !important;
   border-bottom-color: transparent !important;
   background-color: color-mix(in srgb, currentColor 5%, transparent) !important;
 }

 .tab-background {
  border-radius: var(--tab-border-radius) !important;
  margin-block: var(--tab-block-margin) !important;
 }


More info about userChrome.css/userContent.css in case you are not familiar: *https://www.userchrome.org/what-is-userchrome-css.html

In Firefox 69 and later you need to set this pref to true on the about:config page to enable userChrome.css and userContent.css in the chrome folder.

ok, thanks. i will give it a shot. I have attached 2 images. 1 is what it currently looks like and the other is my goal. just simple seperations. thanks

more options

Where do i put this css code at? how do i make a backup of the original incase i mess it up haha

more options

It is not that difficult to create userChrome.css if you have never used it.

The first step is to open the "Help -> Troubleshooting Information" page and find the button to access the profile folder with the random name (xxxxxxxx.default-release).

You can find the button to go to the profile folder under the "Application Basics" section as "Profile Folder -> Open Folder". If you click this button then you open the profile folder in the Windows File Explorer. You need to create a folder with the name chrome in the profile folder with the random name (name is all lowercase). In the chrome folder you need to create a plain text file with the name userChrome.css (name is case sensitive). In this userChrome.css text file you paste the text posted. On Mac you can use the TextEdit utility to create the userChrome.css file as a plain text file.

In Windows saving the file is usually the only time things get more complicated because Windows can silently add a .txt file extension and you end up with a file named userChrome.css.txt. To avoid this you need to make sure to select "All files" in the dialog to save the file in the text editor using "Save File as".

You need to close (Quit/Exit) and restart Firefox when you create or modify the userChrome.css file.

More info about userChrome.css/userContent.css in case you are not familiar: *https://www.userchrome.org/what-is-userchrome-css.html

In Firefox 69 and later you need to set this pref to true on the about:config page to enable userChrome.css and userContent.css in the chrome folder.

more options

ok, code is pasted and works. now, what parameters in the code control how thick the "line" or "space" is between tabs, and the color? maybe i want to mess with it a little bit and see what i can create?

thanks

Modified by LT72884

more options

let me answer a question .... firefox is shit please use a better browser.

more options

peteryoung20 said

let me answer a question .... firefox is shit please use a better browser.

It used to be great. Now it seems all browsers suck haha

more options

That would be about the border-left-width and the border-right-width (top and bottom colors are transparent)

Make sure to specify the !important flag to override existing rules.

 .tab-background:not([selected],[multiselected]) {
   border: 1px solid rgba(0,0,0,.20) !important;
   border-top-color: transparent !important;
   border-bottom-color: transparent !important;
   background-color: color-mix(in srgb, currentColor 5%, transparent) !important;
 }

more options

ok, i will give it a try and see what happens. thanks for tis. Does it matter what section of the css document it goes in?

more options

What I posted above is part of the first code I posted, so you need to modify that first code.

more options

cor-el said

What I posted above is part of the first code I posted, so you need to modify that first code.

ok, great. i will put it in the second section that matches the first line tab-background:not and see if it does what i want

Do you know why the devs changed it so there are no tab deliminations?

more options

Quote: Do you know why the devs changed it so there are no tab deliminations?

That is one of the changes that came with the Proton design in Firefox 89.

more options

Ok, i added the code and it did not change. Here is the code and a picture

.tab-background:not([selected],[multiselected]) {

  border: 1px solid rgba(0,0,0,.20) !important;
  border-left-width: thin !important;	
  border-right-width: thin !important;
  border-top-color: transparent !important;
  border-bottom-color: transparent !important;
  background-color: color-mix(in srgb, currentColor 5%, transparent) !important;
}

thanks, oh and if i can make the spacing or object grey rather than black, that would be cool too:)

Modified by LT72884

more options

Since you are using a dark theme then you should make the border color lighter.

  • rgba(0, 0, 0, .20) is black; rgba(255, 255, 255, .20) is white; 0.20 is the opacity/alpha channel (0-1)
more options

Note that best is to use 'px' values (1px, 2px; one word, no spaces) for the width then you can see what you get. See "Absolute length units":

more options

ok, still no change in the border widths at all

i used values of 1px, 2px, thin, thick, medium and no change hwatsoever

my goal is to make it as thin as the attached image with the light grey bars or similar. doesnt have to be exct

Modified by LT72884

more options

This CSS rule will only affect tabs that aren't selected (:not([selected])). You haven't changed the border color to make this easier to see, but not selected tabs should be further spaced if you increase the border-width. Border width for selected tabs are best left unchanged to avoid issues with multi-selected tabs or other rules applied to the selected tab in some cases.