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

tabs on bottom release 72.0.1

  • 25 replies
  • 4 have this problem
  • 6783 views
  • Last reply by oldtraveler

more options

New release has put the tabs over top of the bookmarks toolbar. Is there an updated .css file for this.

Chosen solution

If your userChrome.css file contains only the following, it should put your tabs on the bottom (as of Firefox 72.0.1, January 10, 2020):


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

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

*|*:root: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 */
 --tab-min-width: 80px !important;
 --tabstoolbar-adjust: 0px; /* menubar and titlebar hidden */
}

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

/* TabsToolbar with menubar and titlebar hidden */
*|*:root[tabsintitlebar]:not([inFullscreen="true"]):not([sizemode="maximized"])
 #toolbar-menubar[autohide="true"] ~ #TabsToolbar{
  bottom: var(--tab-min-height) !important;
  padding-top: calc(var(--tab-min-height) + var(--tabstoolbar-adjust)) !important; /*adjust var*/
}

*|*:root[tabsintitlebar]:not([inFullscreen="true"]) #toolbar-menubar[autohide="true"]
 ~ #TabsToolbar .titlebar-buttonbox-container {
  visibility: hidden !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 indicators */
.private-browsing-indicator {display: none !important;}
.accessibility-indicator    {display: none !important;}

There are a lot of versions of this code depending upon whether or not you want colours on your tabs, prefer a different colour for the empty tab area and various other tweaks, but this is pretty standard, from what I can tell.

The last two lines, the "hide indicators" section, helps with compatibility with Private Browsing mode, although it turns off the indicators, obviously. You can leave those lines out if the rest of the code works for you without them.

No-one can guarantee that the developers' next XUL / HTML change will not break any of this code. The idea about putting the "Tabs on Bottom" code into its own file is to keep it separate from anything else that you have in userChrome.css, but, if this is the only code that you have in userChrome.css, that is an unnecessary step.

Read this answer in context 👍 1

All Replies (5)

more options

Helium2 said

I have tried all of the codes posted in this thread.

Did you try your code with the "XUL" namespace line removed?

more options

I've updated the code that is set as the solution and it should work with and without the @namespace line

more options

Removing the XUL namespace line solved my problem Using the updated "solution" code also works.

Thank you all very much!

more options

Glad to have been of help.

more options

The code that I am using follows. Tabs are on the bottom and do not overlay the bookmarks bar.

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

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

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

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

Modified by cor-el

  1. 1
  2. 2