This site will have limited functionality while we undergo maintenance to improve your experience. If an article doesn't solve your issue and you want to ask a question, we have our support community waiting to help you at @FirefoxSupport on Twitter and/r/firefox on Reddit.

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--still no solution

  • 16 replies
  • 2 have this problem
  • 3 views
  • Last reply by Mal Owen

more options

I've tried the solutions recommended in other threads, which have now been closed, removed the @namespace, tabs still on top.

Edited: I realized all the garbage in the address bar was back, so I moved the tabs on bottom code to its own file, then used the userChrome.css to make the tweaks for the address bar. Those aren't working either.

This is the code in my tabs_on_bottom.css file.

/* 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;
display: block !important;

}

  1. tabbrowser-tabs {
 top: 300 !important;
 width: 100vw !important;

}

  1. main-window:not([chromehidden*="toolbar"]) #navigator-toolbox {

padding-bottom: calc(1px + var(--tab-min-height_tnot)) !important; }

/* TABS: height */

root {
--tab-toolbar-navbar-overlap: 0px !important;
--tab-min-height: 33px !important; /* adjust to suit your needs */
--tab-min-height_tnot: 32px;

}

root #tabbrowser-tabs {
--tab-min-height: 33px !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; background-color: var(--toolbar-bgcolor) !important; } /* hide windows-controls */

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

/* move caption buttons to right of Tab bar */

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

  1. toolbar-menubar[autohide="true"] ~ #TabsToolbar {padding-right: 100px !important;}

Whether I import this file or put the code in the userChrome.css file, it makes no difference. I'm running FF 72.0.2.

I've tried the solutions recommended in other threads, which have now been closed, removed the @namespace, tabs still on top. Edited: I realized all the garbage in the address bar was back, so I moved the tabs on bottom code to its own file, then used the userChrome.css to make the tweaks for the address bar. Those aren't working either. This is the code in my tabs_on_bottom.css file. /* 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; display: block !important; } #tabbrowser-tabs { top: 300 !important; width: 100vw !important; } #main-window:not([chromehidden*="toolbar"]) #navigator-toolbox { padding-bottom: calc(1px + var(--tab-min-height_tnot)) !important; } /* TABS: height */ :root { --tab-toolbar-navbar-overlap: 0px !important; --tab-min-height: 33px !important; /* adjust to suit your needs */ --tab-min-height_tnot: 32px; } :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; background-color: var(--toolbar-bgcolor) !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;} Whether I import this file or put the code in the userChrome.css file, it makes no difference. I'm running FF 72.0.2.
Attached screenshots

Modified by rosawood

All Replies (16)

more options

Had you done this yet? Type about:config in the address bar and Enter. Find the preference toolkit.legacyUserProfileCustomizations.stylesheets and set it to "true".

This site keeps up with changes to the code: https://www.userchrome.org/what-is-userchrome-css.html#movetabbar

more options

I changed the value to TRUE and restarted FF, but it's still the same.

I looked at the file you linked to. Wow! I'm not sure I really understand everything that's in there.

I'm beginning to think I should just go back to 71 and stay there. The more FF is "improved", the more frustrating it gets.

Modified by rosawood

more options

Try the code I posted in this reply


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

/* TABS: on bottom - code for Firefox 66-73 */
#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;
  display: block !important;
}

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

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

/* 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) - 22px) !important; /*adjust*/
}

/* TABS: height */
*|*:root {
 --tab-toolbar-navbar-overlap: 0px !important;
 --tab-min-height: 33px !important; /* adjust to suit your needs */
 --tab-min-width:  80px !important; /* adjust to suit your needs */
}

#TabsToolbar {
  height: var(--tab-min-height) !important;
  margin-bottom: 0px !important;
  box-shadow: ThreeDShadow 0 -1px inset, -moz-dialog 0 1px !important; /* omit */
  background-color: var(--toolbar-bgcolor) !important;
  color: var(--toolbar-color) !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 window-controls */
#TabsToolbar #window-controls {display:none!important;}

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

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

Modified by cor-el

more options

Tried just about everything on the web for userChrome.css but nothing works. Bloody Mozilla have to come up with a simple solutions or make the default as tabs on bottom.

more options

Hi malaus1

Is userChrome.css working at all?

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

See:

The above posted code should at least move the Tab bar to the down position.

more options

Yep. Tried everything suggested including the reset to true. Nothing changes so have no idea if it even knows if userChrome.css exists.

more options

Can you post the full file path to userChrome.css to verify that the file is in the correct location (chrome folder in the profile folder) ?

Did you verify that the file is a CSS file and not a text file with a possible hidden .txt file extension (userChrome.css.css or userChrome.css.txt) ?

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

Modified by cor-el

more options

The bloody thing was working fine until the last update to FF so all should be good. Heres the path C:\Users\Mal\AppData\Roaming\Mozilla\Firefox\Profiles\chrome and the image is what is in the Chrome folder showing some older files renamed to exclude them.

more options

That is the wrong location:

  • C:\Users\Mal\AppData\Roaming\Mozilla\Firefox\Profiles\chrome

You should create the chrome folder within the actual profile folder with the random name (xxxxxxxx.default-release).

  • C:\Users\<user>\AppData\Roaming\Mozilla\Firefox\Profiles\<profile>\chrome
more options

What is the extra <profile> supposed to be? I assume it's the (xxxxxxxx.default-release) you refer to which just confused me, and why did it work before? The Chrome folder is definitaly in the Profile folder so do I create another folder of some sort? Excuse my delayed replies - I'm travelling at the moment.

more options

The <profile> indeed refers to an actual profile folder inside \Profiles with a name like xxxxxxxx.default-release

Your mentioning C:\Users\Mal\AppData\Roaming\Mozilla\Firefox\Profiles\chrome suggests \chrome is in the wrong directory.

So, C:\Users\<user>\AppData\Roaming\Mozilla\Firefox\Profiles\xxxxxxxx.default-release\chrome\userChrome.css.

Further, it must be in the correct user profile folder, the one which you actually use, which is loaded by default when Firefox starts.

Typing about:profiles in the address bar and Enter will show which is currently the default profile in use.

more options

That worked. You're legends Corel & cranky goat. Many thanks. Now all that needs gto be done is to pressure Mozilla to develop a simple fix for the next update ballsup.

more options

Fantastic!

Just be aware that FF 73 is out soon, and that the chrome code does frequently change while Firefox is yet going through a fairly major changes.

more options

The code I posted above still works for me in 73 (beta RC; about to be released) and 74 (Nightly build) with and without @namespace line.

Modified by cor-el

more options

Good to know in advance. Thanks, cor-el.

more options

Probably won't update for a long while. Not until Mozilla provides a fix. Have to spend too much time restoring my preferences.