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

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.

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.

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

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 ?

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

• /questions/1305615 tabs below address bar - an ongoing problem not fixed !!!

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

There has got to be an easy way

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.

• https://support.mozilla.org/en-US/kb/use-troubleshooting-information-page-fix-firefox

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:

• https://www.userchrome.org/what-is-userchrome-css.html
• https://www.userchrome.org/how-create-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.

• toolkit.legacyUserProfileCustomizations.stylesheets = true

• https://www.userchrome.org/firefox-changes-userchrome-css.html

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.

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?

jscher2000 said

Have you tried:

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

Thanks for offering it

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.

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

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;}

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.

• Help -> More Troubleshooting Information -> Profile Folder/Directory:
  Windows: Open Folder; Linux: Open Directory; Mac: Show in Finder
• https://support.mozilla.org/en-US/kb/profiles-where-firefox-stores-user-data

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

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;}

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.

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

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.

• https://developer.mozilla.org/en-US/docs/Tools/Browser_Toolbox

To enable the Browser Toolbox, see:

• https://developer.mozilla.org/en-US/docs/Tools/Settings
• select "Enable remote debugging" in the Web Developer Tools settings

Here's how it looks right now

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.