EDIT: I've updated the code to work with recent Firefox builds (tested with Fx 65-71).

You can adjust the two --tab-min-height definition under the Height section to suit your needs (default:33px; compact:29px; touch:43px). There are a few more variables that may need adjustment.

Add code to the userChrome.css file below the default @namespace line.

• http://kb.mozillazine.org/userChrome.css
• https://www.userchrome.org/how-create-userchrome-css.html
• https://www.userchrome.org/what-is-userchrome-css.html

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

/* TABS: bottom - Firefox 65 and newer; should for now work again with XUL @namespace */

#navigator-toolbox toolbar:not(#nav-bar):not(#toolbar-menubar) {
  -moz-box-ordinal-group: 10 !important;
}

#TabsToolbar {
  -moz-box-ordinal-group: 1000 !important;
  display: block !important;
  position: absolute !important;
  bottom: 0 !important;
  width: 100vw !important;
}

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

*|*:root:not([chromehidden*="toolbar"]) #navigator-toolbox {
  padding-bottom: calc(var(--tab-min-height) + 1px) !important; /*adjust*/
}

/* position Tab bar with Menu bar and Title bar hidden for Firefox 65-73 - omit in Firefox 74 (Nightly) */
*|*:root[tabsintitlebar]:not([inFullscreen="true"]):not([sizemode="maximized"])
 #toolbar-menubar[autohide="true"] ~ #xTabsToolbar{
  bottom: var(--tab-min-height) !important;
  padding-top: calc(var(--tab-min-height) - 20px) !important; /*adjust*/
}

/* TABS: height */
*|*:root {
  --tab-toolbar-navbar-overlap: 0px !important;
  --tab-min-height: 25px !important; /*adjust to set height or omit to use density*/
  --tab-min-width:  80px !important; /*adjust to set width or omit to use default*/
}

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

/* indicators - hide  */
.private-browsing-indicator {display: none !important;}
.accessibility-indicator    {display: none !important;}

/* window controls hide*/
#TabsToolbar #window-controls {display: none !important;}

/* caption buttons - hide */
*|*:root[tabsintitlebar]:not([inFullscreen="true"])
 #toolbar-menubar[autohide="true"] ~ #TabsToolbar
 .titlebar-buttonbox-container {display: none !important;}

If you want to have the caption buttons visible on the Tab bar with the Menu bar and Title bar hidden then use this code as a start to replace the above posted "caption buttons - hide" rule. The caption button are positioned absolutely via a top property, so this is affected by the Bookmarks Toolbar (PersonalToolbar) being visible or hidden. Use either of the two --personal-toolbar-height settings that apply to the state (collapsed/hidden) of the Bookmarks Toolbar.

/* caption buttons - PersonalToolbar hidden/visible */
*|*:root {--personal-toolbar-height:  0px !important}  /*PersonalToolbar collapsed*/
*|*:root {--personal-toolbar-height: 24px !important}  /*PersonalToolbar visible*/
*|*:root {--caption-buttons-adjust: -12px !important}  /*caption buttons - adjustment*/

*|*:root[tabsintitlebar]:not([inFullscreen="true"]) #toolbar-menubar[autohide="true"]
 ~ #TabsToolbar .titlebar-buttonbox-container {
  position: fixed !important;
  display: block !important;
  right: 0 !important;
  top: calc(var(--tab-min-height) + var(--personal-toolbar-height) + var(--caption-buttons-adjust));
  visibility: visible !important;
  height: var(--tab-min-height) !important;
}

/* Caption Buttons - HEIGHT */
.titlebar-buttonbox-container toolbarbutton {
  height: var(--tab-min-height) !important;
  margin: 0px -5px 0px -5px !important; /*adjust margin-left and margin-right*/
  padding: 0 !important;
}

/* Caption Buttons - PADDING */
*|*:root[tabsintitlebar]:not([inFullscreen="true"])
 #toolbar-menubar[autohide="true"] ~
  #TabsToolbar {
   padding-right: 100px !important; /*adjust*/
}

Thank you so much for the fast response. This works perfectly.

I removed the entire /* TABS: height */ section of cor-el's code because it made the tabs... well, too small. But otherwise, it worked flawlessly. Kinda wish this was possible with less code.

Works perfectly from:

carrotwaffle Posted 1/29/19, 7:36 PM

Thank You!

This worked for me too.

Why don't they simply give an option to do so on the setup? I just wasted an hour finding out how to do this. This is at least the second time they've desupported the previous method.

To say I'm angry and frustrated is an understatement.

I don't know what percentage of users want their tabs on the bottom, but there seems to be a lot. I would prefer it as the default.

slcosta said

Why don't they simply give an option to do so on the setup?

That "option" has been gone for many years now! Disappeared with Firefox 29 Australis as I recall. And the extensions that "restored that option" disappeared with Firefox 57 Quantum in Nov 2017.

Yep, I know; it irritated me then, and I fixed it. Changing it again required me to spend a fair amount of time and trouble fixing it yet again. Enough time had passed that I no longer remembered where and how (generally speaking - the .css file) to fix it.

I don't know why they took the option away. What problem were they trying to solve?

I find tabs at the bottom both more convenient and more logical: the content is part of the tab.

slcosta said

This worked for me too.

That bit of code sorted my problem and the tabs were back where they belong, below the toolbars. I did need to tweak the tab sizes a bit as they were a wee bit small for us old folks here with our old folks eyes.  ;-)

When I was somewhere else searching for the answer, It was the-edmeister who pointed me here. So thanks the-edmeister, appreciated.

Davez

Works for me. Thanks very much.

carrotwaffle said

Can anyone supply updated code for the userChrome.css for restoring Tabs to below Menu bar, Location bar, and Personal Toolbar? The code below was working until I upgraded to 65.0. /* tabs on bottom */

1. navigator-toolbox toolbar:not(#nav-bar):not(#toolbar-menubar) {-moz-box-ordinal-group:10}
2. TabsToolbar {-moz-box-ordinal-group:1000!important}

Thank you for the help.

cor-el said

This code is working for me in Firefox 65. You can adjust the two --tab-min-height definitions under the Height section to suit your needs (give them both the same value). Add code to the userChrome.css file below the default @namespace line.

• http://kb.mozillazine.org/userChrome.css
• https://www.userchrome.org/how-create-userchrome-css.html
• https://www.userchrome.org/what-is-userchrome-css.html

---

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

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

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

#tabbrowser-tabs {
  width: 100vw !important;
}
#main-window:not([chromehidden*="toolbar"]) #navigator-toolbox {padding-bottom: var(--tab-min-height) !important;}

/* TABS: height */
:root {
 --tab-toolbar-navbar-overlap: 0px !important;
 --tab-min-height: 27px !important; /* adjust to suit your needs */
}
:root #tabbrowser-tabs {
 --tab-min-height: 27px !important; /* needs to be the same as above under :root */
 --tab-min-width: 80px !important;
}

#TabsToolbar {
 height: var(--tab-min-height) !important;
 margin-bottom: 1px !important;
 box-shadow: ThreeDShadow 0 -1px inset, -moz-dialog 0 1px !important;
}

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

/* drag space */
.titlebar-spacer[type="pre-tabs"],
.titlebar-spacer[type="post-tabs"] {
  width: 40px;
}

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

This does not work correctly in MacOS because it moves the three colored buttons (red/yellow/green) that are supposed to go up at the very top left down into the page display area! Please see my question at https://support.mozilla.org/en-US/questions/1248595 for more information.

EDIT: I found that if I added

.titlebar-buttonbox-container{
  position: fixed;
  top:0;
  left:0;
  height: 0px;
}

at the very bottom it sort of fixes the problem, although I have to add some spacers at the start of that line to keep them from overlapping the browser's back/forward buttons. I have no idea if the above is actually a correct fix, but at least it gets the buttons out of the page display area on my Mac.

FURTHER EDIT: If using the addition above, one thing to be aware of is if you are in the habit of double clicking in the top bar to increase the window size to full screen, it only works now if you double click in the area directly over where the three colored buttons appear. That's also the "grab area" if the window is less than full size and you want to reposition it on the screen.

Thanks , it worked. Now I have the tabs at the bottom again.

i really appreciate all the individuals trying to help but i am still so frustrated that this keeps happening. Does anyone know who we can actually complain to?

Anyway, I am confused by the directions. Am I supposed to copy the whole set of code above or just the part below the first line? I.e., is the @namespace line part of the code I am pasting or not?

And is there a simple explanation of how to find the CSS file or do I need to read all 3 of those help pages above?

What I did is quite simple. In the default user directory (/home/'YOUR USER NAME'/.mozilla/firefox/xxxxx.default-xxx) make sure you have the directory /chrome with the file userChrome.css. If you don't have it, you can to make it easy, you can download chrome.zip from http://franklion.co.uk/GEN-LINKS/chrome.zip and extract it to the default directory. Once you have the userChrome.css file, copy the proposed text in. The whole content of my file is (and that worked for me): /* Frank edited file - you are good to go...*/

/*

* Do not remove the @namespace line -- it's required for correct functioning
*/

@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); /* set default namespace to XUL */ /* TABS: on bottom */

1. navigator-toolbox toolbar:not(#nav-bar):not(#toolbar-menubar) {-moz-box-ordinal-group:10}
2. TabsToolbar {-moz-box-ordinal-group:1000!important}

1. TabsToolbar {

position: absolute !important;
bottom: 0 !important;
width: 100vw !important;

}

1. tabbrowser-tabs {

 width: 100vw !important;

}

1. main-window:not([chromehidden*="toolbar"]) #navigator-toolbox {padding-bottom: var(--tab-min-height) !important;}

/* TABS: height */

root {

--tab-toolbar-navbar-overlap: 0px !important;
--tab-min-height: 27px !important; /* adjust to suit your needs */

}

root #tabbrowser-tabs {

--tab-min-height: 27px !important; /* needs to be the same as above under :root */
--tab-min-width: 80px !important;

}

1. TabsToolbar {

height: var(--tab-min-height) !important;
margin-bottom: 1px !important;
box-shadow: ThreeDShadow 0 -1px inset, -moz-dialog 0 1px !important;

}

1. tabbrowser-tabs,
2. tabbrowser-tabs > .tabbrowser-arrowscrollbox,

.tabbrowser-tabs[positionpinnedtabs] > .tabbrowser-tab[pinned] {

 min-height: var(--tab-min-height) !important;
 max-height: var(--tab-min-height) !important;

}

/* drag space */ .titlebar-spacer[type="pre-tabs"], .titlebar-spacer[type="post-tabs"] {

 width: 40px;

}

/* Override vertical shifts when moving a tab */

1. navigator-toolbox[movingtab] > #titlebar > #TabsToolbar {

 padding-bottom: unset !important;

}

1. navigator-toolbox[movingtab] #tabbrowser-tabs {

 padding-bottom: unset !important;
 margin-bottom: unset !important;

}

1. navigator-toolbox[movingtab] > #nav-bar {

 margin-top: unset !important;

}

thorbjornw, dude, what ? First of all your reply is a mess and you also directly people to download a file from an external site. That's a big no-no.

I get it you're trying to help, but you're doing the opposite.

OK. Forget it. Just trying to help as it worked for me. Then give the poor guy the right answer then.

thorbjornw said

OK. Forget it. Just trying to help as it worked for me. Then give the poor guy the right answer then.

OP already got his answer.

Anaya said

Anyway, I am confused by the directions. Am I supposed to copy the whole set of code above or just the part below the first line? I.e., is the @namespace line part of the code I am pasting or not?

Anaya,

1) Copy/paste the entire thing to the userChrome.css file.

2) For creating the css file, follow the instructions included at the head of the solution posted by cor-el, the second post in this thread. Unless you want help modifying the tabs, there is no need to read any of the subsequent posts.

My userChrome.css file is located here: C:\Users\UserName\AppData\Roaming\Mozilla\Firefox\Profiles\xxxxxxxx.default\chrome\userChrome.css

It is good for you to know the location of the C:\Users\UserName\AppData\Roaming\ folder as this is where personal and/or settings data for many applications is kept. I routinely backup my Mozilla and Thunderbird folders from here. This is facilitated by creating a shortcut or by pinning the "roaming" folder to your start menu.

With the old code I was using it also included code to move the "Find On This Page" bar from below of page to above page. Is there a way to add code to do this?

cor-el said

This code is working for me in Firefox 65. You can adjust the two --tab-min-height definitions under the Height section to suit your needs (give them both the same value; default:33px; compact:29px; touch:43px). Add code to the userChrome.css file below the default @namespace line.

• http://kb.mozillazine.org/userChrome.css
• https://www.userchrome.org/how-create-userchrome-css.html
• https://www.userchrome.org/what-is-userchrome-css.html

---

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

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

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

#tabbrowser-tabs {
  width: 100vw !important;
}
#main-window:not([chromehidden*="toolbar"]) #navigator-toolbox {padding-bottom: var(--tab-min-height) !important;}

/* TABS: height */
:root {
 --tab-toolbar-navbar-overlap: 0px !important;
 --tab-min-height: 33px !important; /* adjust to suit your needs */
}
:root #tabbrowser-tabs {
 --tab-min-height: 33px !important; /* needs to be the same as above under :root */
 --tab-min-width: 80px !important;
}

#TabsToolbar {
 height: var(--tab-min-height) !important;
 margin-bottom: 1px !important;
 box-shadow: ThreeDShadow 0 -1px inset, -moz-dialog 0 1px !important;
}

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

/* drag space */
.titlebar-spacer[type="pre-tabs"],
.titlebar-spacer[type="post-tabs"] {
  width: 40px;
}

/* 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 windows-controls */
#TabsToolbar #window-controls {display:none!important;}

/* move caption buttons to right of Tab bar */
#main-window[tabsintitlebar]:not([inFullscreen="true"]) #toolbar-menubar[autohide="true"] ~ #TabsToolbar .titlebar-buttonbox-container {
 position: fixed !important;
 right: 0 !important;
 top: calc(6px + var(--tab-min-height)) !important;
 display: block !important;
 visibility: visible !important;
}
#toolbar-menubar[autohide="true"] ~ #TabsToolbar {padding-right: 100px !important;}

MacOSuser said

carrotwaffle said

Can anyone supply updated code for the userChrome.css for restoring Tabs to below Menu bar, Location bar, and Personal Toolbar? The code below was working until I upgraded to 65.0. /* tabs on bottom */

1. navigator-toolbox toolbar:not(#nav-bar):not(#toolbar-menubar) {-moz-box-ordinal-group:10}
2. TabsToolbar {-moz-box-ordinal-group:1000!important}

Thank you for the help.

cor-el said

This code is working for me in Firefox 65. You can adjust the two --tab-min-height definitions under the Height section to suit your needs (give them both the same value). Add code to the userChrome.css file below the default @namespace line.

• http://kb.mozillazine.org/userChrome.css
• https://www.userchrome.org/how-create-userchrome-css.html
• https://www.userchrome.org/what-is-userchrome-css.html

---

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

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

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

#tabbrowser-tabs {
  width: 100vw !important;
}
#main-window:not([chromehidden*="toolbar"]) #navigator-toolbox {padding-bottom: var(--tab-min-height) !important;}

/* TABS: height */
:root {
 --tab-toolbar-navbar-overlap: 0px !important;
 --tab-min-height: 27px !important; /* adjust to suit your needs */
}
:root #tabbrowser-tabs {
 --tab-min-height: 27px !important; /* needs to be the same as above under :root */
 --tab-min-width: 80px !important;
}

#TabsToolbar {
 height: var(--tab-min-height) !important;
 margin-bottom: 1px !important;
 box-shadow: ThreeDShadow 0 -1px inset, -moz-dialog 0 1px !important;
}

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

/* drag space */
.titlebar-spacer[type="pre-tabs"],
.titlebar-spacer[type="post-tabs"] {
  width: 40px;
}

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

This does not work correctly in MacOS because it moves the three colored buttons (red/yellow/green) that are supposed to go up at the very top left down into the page display area! Please see my question at https://support.mozilla.org/en-US/questions/1248595 for more information.

EDIT: I found that if I added

.titlebar-buttonbox-container{
  position: fixed;
  top:0;
  left:0;
  height: 0px;
}

at the very bottom it sort of fixes the problem, although I have to add some spacers at the start of that line to keep them from overlapping the browser's back/forward buttons. I have no idea if the above is actually a correct fix, but at least it gets the buttons out of the page display area on my Mac.

I have Macs, and this did not help me. The three necessary buttons were still down in the display window.

Can someone familiar with Macs, please post the code that works with Macs. The code in this thread does not work for Macs.

Well, this might not be of much help, but this did work for me, on a Mac. I use OS10.14.3 on a MacBook Pro, with Firefox 65.0. I used exactly the text that was suggested, including the first line that starts w/ @namespace. The red/yellow/green buttons are in their normal position in the upper left corner. The text is in my userChrome.css file, which sits in ... Drive:Users:myname:Library:Application Support:Firefox:Profiles:goofynameDOTdefaultDASHmanynumbers:chrome:userChrome.css