I love Firefox. I love the privacy work they're doing, I love the community support, and I love the customization options. Which is why it drives me insane that there isn't an option to put those goddamn tabs on the bottom, AND that every big update breaks the workaround scripts the community made.

I suppose it will take time for people to figure out how to unfuck the scripts, and that work will be greatly appreciated.

See:

• https://support.mozilla.org/en-US/kb/forum-response-tabs-below-url-bar

In Firefox 69 and later you need this pref set 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

cor-el said

See:

• https://support.mozilla.org/en-US/kb/forum-response-tabs-below-url-bar

In Firefox 69 and later you need this pref set 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

yeah that doesn't work though as I already tried this from another thread I found later and it just leaves the tabs where they are and the config is already marked true as this was working fine up until yesterday

cor-el said

See:

• https://support.mozilla.org/en-US/kb/forum-response-tabs-below-url-bar

In Firefox 69 and later you need this pref set 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

This worked pre-71. Doesn't work now.

You can add this rule to your userChrome.css or edit an existing rule for #TabsToolbar and add display: block !important;

#TabsToolbar {
 display: block !important;
}

cor-el said

You can add this rule to your userChrome.css or edit an existing rule for #TabsToolbar and add display: block !important; #TabsToolbar { display: block !important; }

That didn't change anything tabs still on top.

Did you check that the userChrome.css file doesn't have a hidden .txt or .css file extension appended ?

Can you post all details (userChrome.css file path and content), so we can check for errors ?

AGAIN! Tabs on bottom GONE! I am so tired of having to find another solution every time Firefox is updated. Updated this morning, and broken immediately. How do I go back to the last version, where I will STAY so I'm not constantly fixing this.

To the developers: Every other browser has tabs on top. Isn't Firefox supposed to be an alternative? GIVE US BACK A SETTING TO PUT THEM ON THE BOTTOM. EASILY. PLEASE!

rosawood said

AGAIN! Tabs on bottom GONE! I am so tired of having to find another solution every time Firefox is updated. Updated this morning, and broken immediately. How do I go back to the last version, where I will STAY so I'm not constantly fixing this. To the developers: Every other browser has tabs on top. Isn't Firefox supposed to be an alternative? GIVE US BACK A SETTING TO PUT THEM ON THE BOTTOM. EASILY. PLEASE!

Agreed and sadly they don't even make it easy to downgrade even though I suspect if you had a recent back up of the profile that would work fine but that's just a guess and you would have to turn off auo updates which I am about to do if this stuff continues! I don't use most the new tools anyways just a waste of browser space.

https://support.mozilla.org/en-US/kb/install-older-version-of-firefox

cor-el said

Did you check that the userChrome.css file doesn't have a hidden .txt or .css file extension appended ? Can you post all details (userChrome.css file path and content), so we can check for errors ?

let me try something first I might have updated something wrong let me test it out have to go back and find the new code.

cor-el said

Did you check that the userChrome.css file doesn't have a hidden .txt or .css file extension appended ? Can you post all details (userChrome.css file path and content), so we can check for errors ?

OK good news. One thing no one mentioned in all these posts is it had to be in the ROAMING folder not the LOCAL folder so I had been updating the wrong user css file but this morning when I was looking at About:Profiles I noticed roaming and thought perhaps I had updated the wrong file and that was the case so with some tweaks I managed to adjust the old code that jscher2000 helped me with.

I'll post the answer in a separate response

OK for those in this thread needed it here is the full resolution to this.

First for all file and folder names note the Cap and Lower Case as these are case sensitive so they must be proper for them to work.

chrome userChrome.css

First open a new tab and in the address-bar type the below and hit enter

about:profiles

there will be two folder locations select the one for the ROAMING folder this will open up windows file explorer

This will open the root roaming folder. In this you may and may not see a chrome folder if you do then go into it and skip the next section

If you DO NOT see the chrome folder then right click somewhere on the right side of the screen in a white area and select new and then select folder. This will pop a new folder on the right simple name it chrome. If it does not let you set the name (It should by default but in case you click somewhere by mistake) just right click the NEW FOLDER and select rename and rename it chrome. one named go into the chrome folder

If you already have a userChrome.css file then skip this step!

If you chrome folder is empty then right click on the right like you did for the above step and select NEW and then in this drop down menu select text document and again name it as below making sure to remove all the old text first!

userChrome.css

when you click elsewhere to confirm the new name it's going to ask you if you want to change the extension just confirm yes!

Now for the code. Copy all the code below and then in there open the userChrome.css file then past the code below into the file and close and save it.

Restart your browser and the tabs should be on the bottom.

This code will also color the folders in your bookmark toolbar to a yellowish folder color. I found it better then the default grey. You can adjust the folder colors there also if you so chose in this code. NOTE this only changes the bookmark toolbar folder color I could not get the main bookmark menu to change to yellow but for me was never an issue so if you need to change the bookmark menu also you will need to ask a separate question in this to see if someone can help you with the menu.

I am sure if you need additional tweaks there are others here that can help you customize this code further but this will get you past the tabs on top issue for FF71

Copy everything below the bar until end of post

@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 {
 display: block !important; /*required for 71+*/
 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;
}

/* Colored bookmark sidebar, toolbar, menu button containers */
  /* Standard folder */
  #bookmarks-view treechildren::-moz-tree-image(container),
  #PlacesToolbarItems toolbarbutton[container="true"] .toolbarbutton-icon,
  #PlacesToolbarItems menu[container="true"] .menu-iconic-left,
  #BMB_bookmarksPopup menu[container="true"] .menu-iconic-icon {
    fill: gold !important;
  }
  /* Live Bookmark (RSS Feed) */
  #bookmarks-view treechildren::-moz-tree-image(container, livemark),
  #PlacesToolbarItems toolbarbutton[container="true"][livemark="true"] .toolbarbutton-icon,
  #PlacesToolbarItems menu[container="true"][livemark="true"] .menu-iconic-left,
  #BMB_bookmarksPopup menu[container="true"][livemark="true"] .menu-iconic-icon {
    fill: orange !important;
  }
  /* Smart bookmark folder */
  #bookmarks-view treechildren::-moz-tree-image(container, query),
  #PlacesToolbarItems toolbarbutton[container="true"][query="true"] .toolbarbutton-icon,
  #PlacesToolbarItems menu[container="true"][query="true"] .menu-iconic-left,
  #BMB_bookmarksPopup menu[container="true"][query="true"] .menu-iconic-icon {
    fill: dimtan !important;
  }
  /* These "containers" are SVG in the sidebar, not yet on the menu */
  #bookmarks-view treechildren::-moz-tree-image(container, OrganizerQuery_BookmarksMenu) {
    fill: tan !important;
  }
  #bookmarks-view treechildren::-moz-tree-image(container, OrganizerQuery_BookmarksToolbar) {
    fill: tan !important;
  }
  #bookmarks-view treechildren::-moz-tree-image(container, OrganizerQuery_UnfiledBookmarks) {
    fill: tan !important;
  }

I finally have tabs on bottom. Thank you for the code; it was very helpful. I tried using v. 71 with tabs on top, and it's just non-intuitive, so it's nice to have them back where I want them.

rosawood said

I finally have tabs on bottom. Thank you for the code; it was very helpful. I tried using v. 71 with tabs on top, and it's just non-intuitive, so it's nice to have them back where I want them.

No problem and while I posted what I had is really the code created here but several people putting it together over the years!

Thank you kindly, worked like a charm!

And now with 72... it's broken again.

Hi.

You can move the CSS code for tabs on bottom that works in Firefox71 to its own file (e.g. tabs-on-bottom.css). Do NOT place the default @namespace line at the top of this tabs-on-bottom.css file. Add a line above the @namespace line in userChrome.css to import this file. If you do not have other CSS code in userChrome.css then you can consider to keep the code in userChrome.css and only remove the @namespace line.

See also:

• https://support.mozilla.org/en-US/kb/forum-response-tabs-below-url-bar

You need to remove this line in Firefox 108 and newer.

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

userChrome.css:

@import url("tabs-on-bottom.css");
@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); /* only needed once */

Place this code in tabs-on-bottom.css code updated for for Firefox 108+.

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

/* TABS: below navbar - Firefox 65-89+,95+,106+,108+ */

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

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

  --tab-min-height: 26px !important;
  --tab-min-width:  60px !important; /*minimum:50px*/
/*  --tab-overflow-pinned-tabs-width: 175px */

  --tabbar-adjust:  0px;
  --tabbar-caption: 0px;

  --tabbar-caption-padding:  90px;
  --tabbar-controls-padding: 90px;
}

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

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

/* Firefox 107 and older *//* #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;
}

/* TABS: menubar,titlebar hidden - 65-73 *//*
*|*:root[tabsintitlebar]:not([inFullscreen="true"]):not([sizemode="maximized"])
 #toolbar-menubar[autohide="true"] ~ #TabsToolbar{
  bottom: var(--tabbar-adjust) !important; /*ADJUST*/
}
*/

/* TABS: HEIGHT */
#tabbrowser-tabs,
#xtabbrowser-arrowscrollbox,
#xtabbrowser-tabs .tabbrowser-tab {
  min-height: var(--tab-min-height) !important;
  max-height: var(--tab-min-height) !important;
}

#tabbrowser-tabs,
.tab-stack,
.tab-content {
  height: var(--tab-min-height) !important;
}

/* TABS: APPEARANCE */
#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;
}

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

/* TABS: movingtab - vertical shifts */
#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;
}

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

/* INDICATORS - HIDE */
*|*:root:not([accessibilitymode])             .accessibility-indicator    {display: none !important}
*|*:root:not([privatebrowsingmode=temporary]) .private-browsing-indicator {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 hidden*/
 --personal-toolbar-height: 24px !important;  /*PersonalToolbar visible*/
 --caption-buttons-adjust: -12px !important;  /*caption buttons - vertical 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 and WIDTH */
.titlebar-buttonbox-container toolbarbutton {
  height: var(--tab-min-height) !important;
  margin: 0px -5px 0px -5px !important;
  padding: 0 !important;
}

/* caption buttons - PADDING - reserve space on Tab bar */
*|*:root[tabsintitlebar]:not([inFullscreen="true"])
 #toolbar-menubar[autohide="true"] ~
  #TabsToolbar {
   padding-right: 100px !important; /*adjust*/
}

cor-el said

Hi. You can move the CSS code for tabs on bottom that works in Firefox71 to its own file (e.g. tabs-on-bottom.css). Do NOT place the default @namespace line at the top of this tabs-on-bottom.css file. Add a line above the @namespace line in userChrome.css to import this file. If you do not have other CSS code in userChrome.css then you can consider to keep the code in userChrome.css and only remove the @namespace line. userChrome.css: @import url("tabs-on-bottom.css"); @namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); /* only needed once */ tabs-on-bottom.css working code for Firefox 71 posted in this thread.

/* no @namespace line in tabs-on-bottom.css */

/* 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 {
 display: block !important; /*71+*/
 position: absolute !important;
 bottom: 0 !important;
 width: 100vw !important;
}

/* Firefox 107 and earlier- not for 108+ */
#tabbrowser-tabs {
  width: 100vw !important;
}

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

/* TABS: height */
/* remainder of CSS code from userChrome.css */

Thank you! This appears to have worked. I just copied the part you said into a new css as mentioned then put the import part in the userChrome.css as mentioned while leaving the old section I had for the tabs commented out. Appears to have worked!

Hi All

OK So looks like we been messed with again. My CSS code is close the tabs are still on the bottom, but instead of being at the very bottom then now overlap the bookmark bar. I assume it's just a matter of height but being I have to go out shortly to catch a flight I don't have time to deal with fiddling with the coding so was hoping someone might be able to take a look at my code and see what needs to be adjusted so that when I reach the hotel later today I might have a solution I can just plunk in. Below is my code Thanks in Advance for any help given!!

@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 { 
 display: block !important; /*required for 71+*/
 position: absolute !important;
 bottom: 0 !important;
 width: 100vw !important;
}

/* do not use this rule in Firefox 108 and newer */
#tabbrowser-tabs {
  width: 100vw !important;
}

/* reserve space for the Tab bar */
#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;
}




/* Colored bookmark sidebar, toolbar, menu button containers */
  /* Standard folder */
  #bookmarks-view treechildren::-moz-tree-image(container),
  #PlacesToolbarItems toolbarbutton[container="true"] .toolbarbutton-icon,
  #PlacesToolbarItems menu[container="true"] .menu-iconic-left,
  #BMB_bookmarksPopup menu[container="true"] .menu-iconic-icon {
    fill: gold !important;
  }
  /* Live Bookmark (RSS Feed) */
  #bookmarks-view treechildren::-moz-tree-image(container, livemark),
  #PlacesToolbarItems toolbarbutton[container="true"][livemark="true"] .toolbarbutton-icon,
  #PlacesToolbarItems menu[container="true"][livemark="true"] .menu-iconic-left,
  #BMB_bookmarksPopup menu[container="true"][livemark="true"] .menu-iconic-icon {
    fill: orange !important;
  }
  /* Smart bookmark folder */
  #bookmarks-view treechildren::-moz-tree-image(container, query),
  #PlacesToolbarItems toolbarbutton[container="true"][query="true"] .toolbarbutton-icon,
  #PlacesToolbarItems menu[container="true"][query="true"] .menu-iconic-left,
  #BMB_bookmarksPopup menu[container="true"][query="true"] .menu-iconic-icon {
    fill: dimtan !important;
  }
  /* These "containers" are SVG in the sidebar, not yet on the menu */
  #bookmarks-view treechildren::-moz-tree-image(container, OrganizerQuery_BookmarksMenu) {
    fill: tan !important;
  }
  #bookmarks-view treechildren::-moz-tree-image(container, OrganizerQuery_BookmarksToolbar) {
    fill: tan !important;
  }
  #bookmarks-view treechildren::-moz-tree-image(container, OrganizerQuery_UnfiledBookmarks) {
    fill: tan !important;
  }

olds97_lss said

And now with 72... it's broken again.

You'd think that with being a continual irritant to so many people, this would be checked before a release. Does Mozilla do any integration testing? Or do the developers just figure eventually they'll wear us down? I just don't get why this has to be an issue with every release.

That said, I do appreciate those who jump in to tell us how to get back the feature we all want.