ابحث في الدعم

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

HERE is the answer to put "TABS BELOW" which will work with Firefox V90 using the - userChrome.css - file

  • 59 ردًا
  • 4 have this problem
  • 2565 views
  • آخر ردّ كتبه Chris Ilias

more options

HERE IS THE ANSWER Here is the answer to get TABS BELOW with Firefox V90 . . copy all of this code below the broken line into your - userChrome.css - file and save it. You can modify the 45px in this line if you wish to get an appropriate height . . just experiment with different numbers till you get it right --menubar-height: 45px; /*30px|41px=11px; caption buttons on menubar*/

Also to make the tabs wider or narrower, modify the line which is coded width: 50vw !important;

Finally you must enable - css - in Firefox, by typing about:config into your address bar, and search for toolkit. When all the toolkit options appear change the one which says toolkit.legacyUserProfileCustomizations.stylesheets to TRUE by click the icon in the right hand column. Than close Firefox and reopen, and check how it looks This will enable your - css - file to be read, and interpreted and accepted by the Firefox browser.

-------------------------------------------------------------------
@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");

/* TABS: bottom - Firefox 65 and later - updated for 89+ */
/* https://searchfox.org/mozilla-release/source/browser/themes/shared/tabs.inc.css */
/* https://raw.githubusercontent.com/Aris-t2/CustomCSSforFx/master/classic/css/tabs/tabs_below_navigation_toolbar_fx89.css */
/* https://developer.mozilla.org/en-US/docs/Tools/Browser_Toolbox */

/* ROOT - VARS */
/* you can adjust the CSS variables until it looks correct */
/* you can use the Browser Toolbox to get the toolbar heights */

*|*:root {
  --tab-toolbar-navbar-overlap: 0px !important;

  --tab-min-height: 40px !important;
  --tab-min-width:  60px !important;

  --tab-adjust:  0px; /* adjust tab bar - only for 68-73 */
  --tab-caption: 5px; /* caption buttons on tab bar */
}

/* TAB BAR - below nav-bar */
#navigator-toolbox toolbar:not(#nav-bar):not(#toolbar-menubar) {-moz-box-ordinal-group:10 !important;}
#TabsToolbar {-moz-box-ordinal-group:1000 !important;}

#TabsToolbar {
  display: block !important;
  position: absolute !important;
  bottom: 0 !important;
  width: 50vw !important;
}

#tabbrowser-tabs {
  width: 100vw !important;
}

/* navigator-toolbox - PADDING */
*|*:root:not([chromehidden*="toolbar"]) #navigator-toolbox {
  position: relative !important; /*89+*/
  padding-bottom: calc(var(--tab-min-height) + 1px) !important; /*ADJUST*/
  background-color: var(--toolbar-bgcolor) !important;
}

/* TabsToolbar with menubar and titlebar hidden - rules for Firefox 65-73 */
*|*:root[tabsintitlebar]:not([inFullscreen="true"]):not([sizemode="maximized"]) #toolbar-menubar[autohide="true"] ~
 #TabsToolbar{
  bottom: var(--tab-adjust); /*ADJUST*/
}

/* TABS: height */
#tabbrowser-tabs,
#tabbrowser-tabs > .tabbrowser-arrowscrollbox,
.tabbrowser-tabs[positionpinnedtabs] > .tabbrowser-tab[pinned] {
  min-height: var(--tab-min-height) !important;
  max-height: var(--tab-min-height) !important;
}

#TabsToolbar {
  height: var(--tab-min-height) !important;
  margin-bottom: 1px !important;
  box-shadow: ThreeDShadow 0 -1px inset, -moz-dialog 0 1px !important; /*OPTIONAL*/
  background-color: var(--toolbar-bgcolor) !important;
  color:            var(--toolbar-color) !important;
/*  z-index: 1 !important; */
}

/* indicators *//*
*|*:root[privatebrowsingmode=temporary] .private-browsing-indicator {
  position: absolute !important;
  display: block !important;
  right: 0px !important;
  bottom: 0px !important;
  width: 14px !important;
  pointer-events: none !important;
}
*/
.private-browsing-indicator {display: none !important;}
.accessibility-indicator    {display: none !important;}

/* Indicators - HIDE *//*
*|*:root:not([accessibilitymode])             .accessibility-indicator    {display: none !important}
*|*:root:not([privatebrowsingmode=temporary]) .private-browsing-indicator {display: none !important}
*/

/* Drag Space */
.titlebar-spacer[type="pre-tabs"],
.titlebar-spacer[type="post-tabs"] {
  width: 20px !important;
}

/* Override vertical shifts when moving a tab */
#navigator-toolbox[movingtab] > #titlebar > #TabsToolbar {
  padding-bottom: unset !important;
}

#navigator-toolbox[movingtab] #tabbrowser-tabs {
  padding-bottom: unset !important;
  margin-bottom: unset !important;
}

#navigator-toolbox[movingtab] > #nav-bar {
  margin-top: unset !important;
}

/* Hide window-controls and caption buttons on Tab Bar */
#TabsToolbar #window-controls {display: none !important;}
#TabsToolbar .titlebar-buttonbox-container {display: none !important;}

Attached screenshots

Modified by cor-el

الحل المُختار

HERE IS THE ANSWER Here is the answer to get TABS BELOW with Firefox V90 . . copy all of this code below the broken line into your - userChrome.css - file and save it.

Finally you must enable - css - in Firefox, by typing about:config into your address bar, and search for toolkit. When all the toolkit options appear change the one which says toolkit.legacyUserProfileCustomizations.stylesheets to TRUE by click the icon in the right hand column. Than close Firefox and reopen, and check how it looks This will enable your - css - file to be read, and interpreted and accepted by the Firefox browser.


@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");

/* TABS: bottom - Firefox 65 and later - updated for 89+ */
/* https://searchfox.org/mozilla-release/source/browser/themes/shared/tabs.inc.css */
/* https://github.com/Aris-t2/CustomCSSforFx/blob/master/classic/css/tabs/tabs_below_navigation_toolbar_fx89.css */
/* https://developer.mozilla.org/en-US/docs/Tools/Browser_Toolbox */

/* ROOT - VARS */
/* you can adjust the CSS variables until it looks correct */

*|*:root {
  --tab-toolbar-navbar-overlap: 0px !important;

  --tab-min-height: 40px !important;
  --tab-min-width:  60px !important;

  --tab-adjust:  0px; /* adjust tab bar - only for 68-73 */
  --tab-caption: 5px; /* caption buttons on tab bar */
}

/* TAB BAR - below nav-bar */
#navigator-toolbox toolbar:not(#nav-bar):not(#toolbar-menubar) {-moz-box-ordinal-group:10 !important;}
#TabsToolbar {-moz-box-ordinal-group:1000 !important;}

#TabsToolbar {
  display: block !important;
  position: absolute !important;
  bottom: 0 !important;
  width: 100vw !important;
}

#tabbrowser-tabs {
  width: 100vw !important;
}

/* navigator-toolbox - PADDING */
*|*:root:not([chromehidden*="toolbar"]) #navigator-toolbox {
  position: relative !important; /*89+*/
  padding-bottom: calc(var(--tab-min-height) + 1px) !important; /*ADJUST*/
  background-color: var(--toolbar-bgcolor) !important;
}

/* TabsToolbar with menubar and titlebar hidden - rules for Firefox 65-73 */
*|*:root[tabsintitlebar]:not([inFullscreen="true"]):not([sizemode="maximized"]) #toolbar-menubar[autohide="true"] ~
 #TabsToolbar{
  bottom: var(--tab-adjust); /*ADJUST*/
}

/* TABS: height */
#tabbrowser-tabs,
#tabbrowser-tabs > .tabbrowser-arrowscrollbox,
.tabbrowser-tabs[positionpinnedtabs] > .tabbrowser-tab[pinned] {
  min-height: var(--tab-min-height) !important;
  max-height: var(--tab-min-height) !important;
}

#TabsToolbar {
  height: var(--tab-min-height) !important;
  margin-bottom: 1px !important;
  box-shadow: ThreeDShadow 0 -1px inset, -moz-dialog 0 1px !important; /*OPTIONAL*/
  background-color: var(--toolbar-bgcolor) !important;
  color:            var(--toolbar-color) !important;
}

/* indicators *//*
*|*:root[privatebrowsingmode=temporary] .private-browsing-indicator {
  position: absolute !important;
  display: block !important;
  right: 0px !important;
  bottom: 0px !important;
  width: 14px !important;
  pointer-events: none !important;
}
*/
.private-browsing-indicator {display: none !important;}
.accessibility-indicator    {display: none !important;}

/* Indicators - HIDE *//*
*|*:root:not([accessibilitymode])             .accessibility-indicator    {display: none !important}
*|*:root:not([privatebrowsingmode=temporary]) .private-browsing-indicator {display: none !important}
*/

/* Drag Space */
.titlebar-spacer[type="pre-tabs"],
.titlebar-spacer[type="post-tabs"] {
  width: 20px !important;
}

/* Override vertical shifts when moving a tab */
#navigator-toolbox[movingtab] > #titlebar > #TabsToolbar {
  padding-bottom: unset !important;
}

#navigator-toolbox[movingtab] #tabbrowser-tabs {
  padding-bottom: unset !important;
  margin-bottom: unset !important;
}

#navigator-toolbox[movingtab] > #nav-bar {
  margin-top: unset !important;
}

/* Hide window-controls and caption buttons on Tab Bar */
#TabsToolbar #window-controls {display: none !important;}
#TabsToolbar .titlebar-buttonbox-container {display: none !important;}
Read this answer in context 👍 0

All Replies (20)

more options

I hate this new format and would like an answer too! =(

more options

Trevor George, Bristol, UK said

Hi all . . up till now I've been able to keep my TABS BELOW the Bookmarks Toolbar as some kind person has always supplied the - userChrome.css - file code to keep TABS BELOW, but once again Firefox has overcome that code with their V90 version upgrade, and Tabs have irritatingly returned to the TOP of my Browser.

Have you tried:

https://www.reddit.com/r/FirefoxCSS/comments/nq2d0q/tabs_on_bottom_for_firefox_89/

Although, you are on beta?? I don't know if the person who posted that has tested in beta.

Either way, r/FirefoxCSS is the best place for updated userChrome.css code. That's their raison d'être.

more options

ca said

I hate this new format and would like an answer too! =(

I'm not sure whether you have the same issue or a different issue.

more options

jscher2000 said

Have you tried: https://www.reddit.com/r/FirefoxCSS/comments/nq2d0q/tabs_on_bottom_for_firefox_89

Yes I've just tried it and it doesn't work with V90.0b3 of Firefox unfortunately

more options

jscher2000 said

Either way, r/FirefoxCSS is the best place for updated userChrome.css code.

Hiya . . . what is r/FirefoxCSS ? and where do I find it to try it ?

Modified by Trevor George, Bristol, UK

more options

You can try the code in the solution in this reply that I've edited for Firefox 89+:

more options

cor-el said

You can try the code in the solution in this reply that I've edited for Firefox 89+:
Hi COR-EL . . . I've just tried it just copying the upper part of the code down to the line "If you want to experiment with the Window Controls try this code: " and pasted it into my - userChrome.css - file, and when I close Firefox and reopen it the TABS are still ABOVE with Version 90.0b3

There has got to be an easy way

Modified by Trevor George, Bristol, UK

more options

The code works for me with the current 90.0b3 beta and in Nightly, so double check that you did make a mistake.


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.

You can find this button 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 this folder (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.

See also:

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.

  • toolkit.legacyUserProfileCustomizations.stylesheets = true
more options

cor-el said

The code works for me with the current 90.0b3 beta and in Nightly, so double check that you did make a mistake.
It is not that difficult to create userChrome.css if you have never used it.

IT IS DIFFICULT . . which is why I'm looking for a simple answer, and so are many others. I already have a chrome folder and a file named - userChrome.css - saved within it which worked fine with all previous versions of Firefox, with occasional updates. I appreciate you are trying to help, but providing masses of links does not help. I just would like a simple answer posted in this thread please, for myself and for the benefit of others, not having to follow links to other questions and trying to find the answer after hours of trying. Why is it not possible to post the - userChrome.css - code for TABS BELOW in this thread? Thank you.

Modified by Trevor George, Bristol, UK

more options

cor-el said

The code works for me with the current 90.0b3 beta and in Nightly, so double check that you did make a mistake.

Hi cor-el . . . I have copied-&-pasted the lines beginning @namespace url("[http://www.mozilla.org/keymaster/gate.../there.is.only.xul]");

and ending #TabsToolbar .titlebar-buttonbox-container {display: none !important;} from your code, and have saved it as I have many times before, but it is still putting TABS ABOVE.

I have also changed the toolkit.legacyUserProfileCustomizations.stylesheets to TRUE but I'm still getting TABS ABOVE, and it squeezed up my Broswer menu, and lost my address-bar, so I have changed it back to FALSE as it still didn't work.

Why is doing this so difficult?

Modified by Trevor George, Bristol, UK

more options

jscher2000 said

Have you tried:

https://www.reddit.com/r/FirefoxCSS/comments/nq2d0q/tabs_on_bottom_for_firefox_89/

Yes, I just tried it, and that doesn't work either.

Thanks for offering it

Modified by Trevor George, Bristol, UK

more options

Were you previously already using userChrome.css as it is possible that you have older code that is causing problems ?

Can you post the content of your userChrome.css ?

You can also try the code in a new profile.

more options

Hi cor-el . . .this is the code I used copied exactly from your link you supplied, and I followed all your other instructions how to locate the current folder using - about:support - link I've done it all exactly as you described, but TABS are still ON TOP


cor-el said

Were you previously already using userChrome.css as it is possible that you have older code that is causing problems ? Can you post the content of your userChrome.css ?
@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");

/* TABS: bottom - Firefox 65 and later - updated for 89+ */
/* https://searchfox.org/mozilla-release/source/browser/themes/shared/tabs.inc.css */
/* https://developer.mozilla.org/en-US/docs/Tools/Browser_Toolbox */

/* ROOT - VARS */
/* you can adjust the CSS variables until it looks correct */

*|*:root {
  --tab-toolbar-navbar-overlap: 0px !important;

  --tab-min-height: 25px !important;
  --tab-min-width:  60px !important;

  --tab-caption: -5px; /* caption buttons on tab bar */
  --tab-adjust:   3px; /* adjust tab bar */
}

/* TAB BAR - below nav-bar */
#navigator-toolbox toolbar:not(#nav-bar):not(#toolbar-menubar) {-moz-box-ordinal-group:10 !important}
#TabsToolbar {-moz-box-ordinal-group:1000 !important}

#TabsToolbar {
  display: block !important;
  position: absolute !important;
  bottom: 0 !important;
  width: 100vw !important;
}

#tabbrowser-tabs {
  width: 100vw !important;
}

/* navigator-toolbox - PADDING */
*|*:root:not([chromehidden*="toolbar"]) #navigator-toolbox {
  position: relative !important;  /*89+*/
  padding-bottom: calc(var(--tab-min-height) + 1px) !important; /*ADJUST*/
  background-color: var(--toolbar-bgcolor) !important;
}

/* TabsToolbar with menubar and titlebar hidden - adjust bottom - Firefox 65-73 *//*
*|*:root[tabsintitlebar]:not([inFullscreen="true"]):not([sizemode="maximized"])
 #toolbar-menubar[autohide="true"] ~ #TabsToolbar{
  bottom: var(--tab-adjust);
} */

/* TABS: height */
#tabbrowser-tabs,
#tabbrowser-tabs > .tabbrowser-arrowscrollbox,
.tabbrowser-tabs[positionpinnedtabs] > .tabbrowser-tab[pinned] {
  min-height: var(--tab-min-height) !important;
  max-height: var(--tab-min-height) !important;
}

#TabsToolbar {
  height: var(--tab-min-height) !important;
  margin-bottom: 1px !important;
  box-shadow: ThreeDShadow 0 -1px inset, -moz-dialog 0 1px !important; /*OPTIONAL*/
  background-color: var(--toolbar-bgcolor) !important;
  color:            var(--toolbar-color) !important;
/*  z-index: 1 !important; */
}

/* indicators *//*
*|*:root[privatebrowsingmode=temporary] .private-browsing-indicator {
  position: absolute !important;
  display: block !important;
  right: 0px !important;
  bottom: 0px !important;
  width: 14px !important;
  pointer-events: none !important;
}*/

.private-browsing-indicator {display: none !important;}
.accessibility-indicator    {display: none !important;}

/* Indicators - HIDE *//*
*|*:root:not([accessibilitymode])             .accessibility-indicator    {display: none !important}
*|*:root:not([privatebrowsingmode=temporary]) .private-browsing-indicator {display: none !important}
*/

/* Drag Space */
.titlebar-spacer[type="pre-tabs"],
.titlebar-spacer[type="post-tabs"] {
  width: 20px !important;
}

/* Override vertical shifts when moving a tab */
#navigator-toolbox[movingtab] > #titlebar > #TabsToolbar {
  padding-bottom: unset !important;
}

#navigator-toolbox[movingtab] #tabbrowser-tabs {
  padding-bottom: unset !important;
  margin-bottom: unset !important;
}

#navigator-toolbox[movingtab] > #nav-bar {
  margin-top: unset !important;
}

/* Hide window-controls and caption buttons on Tab Bar */
#TabsToolbar #window-controls {display: none !important;}
#TabsToolbar .titlebar-buttonbox-container {display: none !important;}

Modified by cor-el

more options

You are sure you created userChrome.css in the chrome folder in the correct profile folder ?

You can use the button on the "Help -> More Troubleshooting Information" (about:support) page to go to the current Firefox profile folder or use the about:profiles page.

more options

Hi cor-el . . .this is the code I used copied exactly from your link you supplied, and I followed all your other instructions how to locate the current folder using - about:support - link I've done it all exactly as you described, but TABS are still ON TOP


cor-el said

Were you previously already using userChrome.css as it is possible that you have older code that is causing problems ? Can you post the content of your userChrome.css ?
@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");

/* TABS: bottom - Firefox 65 and later - updated for 89+ */
/* https://searchfox.org/mozilla-release/source/browser/themes/shared/tabs.inc.css */
/* https://developer.mozilla.org/en-US/docs/Tools/Browser_Toolbox */

/* ROOT - VARS */
/* you can adjust the CSS variables until it looks correct */

*|*:root {
  --tab-toolbar-navbar-overlap: 0px !important;

  --tab-min-height: 25px !important;
  --tab-min-width:  60px !important;

  --tab-caption: -5px; /* caption buttons on tab bar */
  --tab-adjust:   3px; /* adjust tab bar */
}

/* TAB BAR - below nav-bar */
#navigator-toolbox toolbar:not(#nav-bar):not(#toolbar-menubar) {-moz-box-ordinal-group:10 !important}
#TabsToolbar {-moz-box-ordinal-group:1000 !important}

#TabsToolbar {
  display: block !important;
  position: absolute !important;
  bottom: 0 !important;
  width: 100vw !important;
}

#tabbrowser-tabs {
  width: 100vw !important;
}

/* navigator-toolbox - PADDING */
*|*:root:not([chromehidden*="toolbar"]) #navigator-toolbox {
  position: relative !important; /*89+*/
  padding-bottom: calc(var(--tab-min-height) + 1px) !important; /*ADJUST*/
  background-color: var(--toolbar-bgcolor) !important;
}

/* TabsToolbar with menubar and titlebar hidden - adjust bottom - Firefox 65-73 *//*
*|*:root[tabsintitlebar]:not([inFullscreen="true"]):not([sizemode="maximized"])
 #toolbar-menubar[autohide="true"] ~ #TabsToolbar{
  bottom: var(--tab-adjust);
} */

/* TABS: height */
#tabbrowser-tabs,
#tabbrowser-tabs > .tabbrowser-arrowscrollbox,
.tabbrowser-tabs[positionpinnedtabs] > .tabbrowser-tab[pinned] {
  min-height: var(--tab-min-height) !important;
  max-height: var(--tab-min-height) !important;
}

#TabsToolbar {
  height: var(--tab-min-height) !important;
  margin-bottom: 1px !important;
  box-shadow: ThreeDShadow 0 -1px inset, -moz-dialog 0 1px !important; /*OPTIONAL*/
  background-color: var(--toolbar-bgcolor) !important;
  color:            var(--toolbar-color) !important;
/*  z-index: 1 !important; */
}

/* indicators *//*
*|*:root[privatebrowsingmode=temporary] .private-browsing-indicator {
  position: absolute !important;
  display: block !important;
  right: 0px !important;
  bottom: 0px !important;
  width: 14px !important;
  pointer-events: none !important;
}*/

.private-browsing-indicator {display: none !important;}
.accessibility-indicator    {display: none !important;}

/* Indicators - HIDE *//*
*|*:root:not([accessibilitymode])             .accessibility-indicator    {display: none !important}
*|*:root:not([privatebrowsingmode=temporary]) .private-browsing-indicator {display: none !important}
*/

/* Drag Space */
.titlebar-spacer[type="pre-tabs"],
.titlebar-spacer[type="post-tabs"] {
  width: 20px !important;
}

/* Override vertical shifts when moving a tab */
#navigator-toolbox[movingtab] > #titlebar > #TabsToolbar {
  padding-bottom: unset !important;
}

#navigator-toolbox[movingtab] #tabbrowser-tabs {
  padding-bottom: unset !important;
  margin-bottom: unset !important;
}

#navigator-toolbox[movingtab] > #nav-bar {
  margin-top: unset !important;
}

/* Hide window-controls and caption buttons on Tab Bar */
#TabsToolbar #window-controls {display: none !important;}
#TabsToolbar .titlebar-buttonbox-container {display: none !important;}

Modified by cor-el

more options

Sorry, my mistake. I appear to have forgotten to test the file after the latest update to fix some possible issues that might happen if the Tab bar isn't placed in the correct position like a black bar or only showing the selected tab and and shortened some variable names, but failed to update the variable used for "top:var(--tabbar-top);" (I had already fixed this in my code, but apparently pasted an older version). I've update the code you posted in your reply above and tested it this time, so hopefully it now works. Thanks for noticing this update failure.

more options

cor-el said

Sorry, my mistake. I appear to have forgotten to test the file after the latest update

Hi co-rel . . . I've just tested it again with the updated file you posted at -https://support.mozilla.org/en-US/questions/1305615 - and I even did the "Toolkit" change thing on -about:config - but it squishes up my menu badly, so I put it back to "False". TABS are still on TOP so I'm amazed it works for you. I only copied part of the file, as all I want to do is to put TABS BELOW so I ignored the "Windows Controls" part of the css / txt code. It's also been saved correctly in the Chrome folder, as I have done this a number of times before, so I am completly baffled if it works for you. This is on Windows 10

more options

Can you post a screenshot of how it shows with this latest version ?

Does the Tab bar overlap existing toolbars?

You can use the Browser Toolbox to inspect whether rules for #TabsToolbar are applied and its current top property value.

To enable the Browser Toolbox, see:

more options

Here's how it looks right now

more options

This looks that none of the code in userChrome.css is applied, so you first need to make sure that you have enabled userChrome.css (toolkit.legacyUserProfileCustomizations.stylesheets = TRUE) and secondly that the file is in the correct location (chrome folder in the profile folder) and that the file is a CSS file and not a text file with a hidden .txt file extension.


You can try userChrome.css with only this code in case other code in userChrome.css is causing problems.

  1. 1
  2. 2
  3. 3