I'm posting this in all the threads I can find since all the solutions are leaving out important information, like where to find userChrome.css.

• Click 'Help' from the menu at the top of Firefox.
• Click 'Troubleshooting Information'.
• Look for an option that says 'Open Folder' next to 'Profile Folder'. This will open a new explorer window.
• There should be a folder there called 'Chrome'.
• In this folder, you might find userChrome.css. If not, hold down the shift key, right click in the empty space, and select 'Open command window here'. You will get a black window with white text. Type the following command and hit enter:

type nul > userChrome.css

• Now open the userChrome.css file, paste the following code over anything in there already and save the file:

@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;
 background-color: var(--toolbar-bgcolor) !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;}

Although this was immensely helpful and thank you for that, is there any way to add to the above code so that i can have in addition to tabs on bottom the bookmarks toolbar above the navigation toolbar (i.e. menu toolbar-bookmarks toolbar- address toolbar- tabs toolbar). Thanks in advance.

A way to have the Bookmarks Toolbar above the Navigation Toolbar is to give each toolbar its own -moz-box-ordinal-group setting. I have what code because I had issues with it that the position of the Bookmarks Toolbar wasn't always stable after using customize mode. Replace this line:

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

With:

#toolbar-menubar {-moz-box-ordinal-group: 1 !important}
#PersonalToolbar {-moz-box-ordinal-group: 2 !important}
#nav-bar {-moz-box-ordinal-group: 3 !important}

The supplied code fixed my tab problem, but the tabs have the same background as the toolbar, making the text in the tab hard to see and also difficult to tell where tabs start and stop. Used to be able to have active tab one color and inactive ones another. Can this be done now?

cor-el said

A way to have the Bookmarks Toolbar above the Navigation Toolbar is to give each toolbar its own -moz-box-ordinal-group setting. I have what code because I had issues with it that the position of the Bookmarks Toolbar wasn't always stable after using customize mode. Replace this line:

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

With:

#toolbar-menubar {-moz-box-ordinal-group: 1 !important}
#PersonalToolbar {-moz-box-ordinal-group: 2 !important}
#nav-bar {-moz-box-ordinal-group: 3 !important}

That was was it worked like a charm, Thank you very much.

I don't understand your reply. I used the code to move tabs to below the bookmark bar, just above the open web page. My problem is tab color.

Karmalynda said

I pasted the code in my chrome file and the tabs now appear on the bottom. The problem is that the tab text title is blank, unless it is the active tab. All the other open tabs are blank, except for the icon. Is there a solution? Thanks

This happens on some of my computers and not on others; it depends upon the custom userChrome.css that you copied. The cause is the setting of the background colour for the box in which the tabs sit being the same as the foreground colour of the inactive tab text.

You can override the text colour of the inactive tabs by adding "color: grey !important;" (or whatever colour you prefer) to the #TabsToolbar section of your custom userChrome.css:

#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;
 color: grey !important;
}

You can also use this code for that section:

#TabsToolbar {

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

}

You may end up with a background colour in the tabs box that you do not like, with the second snippet. However, on machines that have the entire userChrome.css from which that snippet originates, everything follows my preferred system preferences, nicely.

If those code changes do not work for you, I suggest that you try different userChrome.css files (there are at least three linked from this thread, alone!) until you find one that you like.

Good luck!

Apologies for asking a slightly off topic but relevant question.

When my Firefox updated to version 65 on the 31st Jan (UK time) and messed up my Tabs, I started searching online for a/the solution, and tried a number of them including downloading and sticking reams of Aris css into my UserChrome.css file. Yuk!

I ended up here on Moz communty support and found a more concise solution, so now all four of the Firefox installs in this house are back working as we (Family) require.

One thing that did boggle me somewhat, doing a lot of searching online in Newsgroups and Forums etc, was the very large number of Firefox user who wanted their Tabs back below the toolbars.

So I have this simple question. Why is there not a config option to allow this MUCH wanted facility in Firefox?

Dz

I have never seen an explanation from someone actually involved in the decision, but the "phase out" of the option to move the tabs was coincidental with the introduction of Quantum, which eliminated the ability for add-ons (and, therefore, "add-on-like" configuration options) to directly change the UI.

From Firefox 57, the only way to modify the UI is by using userChrome.css; modifying actual functionality remains the domain of extensions. With Firefox 65, major changes were made to the organisation (if that is the correct word) of the UI components / elements; hence, there is a new flurry of questions as people sort out what pieces need to be styled in the userChrome.css.

If you are interested, this separation of UI and function was leveraged in Firefox 54, when a process separate from the one used to manage web pages was used to manage the UI. With Firefox 57 (Quantum), multi-process capabilities were introduced.

We pay for this approach with poor userChrome.css tools. However, you can actually navigate to the browser "XUL" at chrome://browser/content/browser.xul and use the built-in Inspector to see what elements you need to style in userChrome.css, if you were wondering how all the smart people on the Internet figure this stuff out.

And, of course, some elements of the UI can still, mysteriously, be controlled without diving into editing userChrome.css, despite the "only via userChrome.css" assertion, above. So, maybe if one of the developers wanted tabs in a different place, it would still be possible to change it without using the keyboard.

It would be nice if we could just drag the masthead bars around where we want them, even side by side, then lock it all in place.

For what we have, however, I am grateful to have the Reload button back on the left with the other buttons, and to have the continued ability to place tabs at bottom (convoluted code or not), and to otherwise order the masthead bars in the order I prefer, all without having to rely on any third party plugins. I am still able to set up Firefox exactly as I wish and this cannot be said about any other browser I've yet tried.

phumphries said

We pay for this approach with poor userChrome.css tools. However, you can actually navigate to the browser "XUL" at chrome://browser/content/browser.xul and use the built-in Inspector to see what elements you need to style in userChrome.css, if you were wondering how all the smart people on the Internet figure this stuff out.

To be honest, while I do understand a little of already written css I couldn't write any from scratch to save my life.

How does a chap access this...chrome://browser/content/browser.xul ?

I'm alway up for a bit o' learning.

Dz

Davezed said

How does a chap access this...chrome://browser/content/browser.xul ?

Type (or copy and paste) chrome://browser/content/browser.xul into the address bar and press the Enter key. You will then see your browser interface in the tab as though it were a web page.

You can select Tools / Web Developer / Inspector (CTRL-Shift-C in Firefox for Windows) and browse around to see the code behind the UI.

So armed, you are ready to start making things up to change your interface, if you also know some CSS.

carrotwaffle said

It would be nice if we could just drag the masthead bars around where we want them, even side by side, then lock it all in place.

As is evidenced by the way that the "customize" option / tab works, this is perfectly feasible; there are some elements that can be dragged around. However, it requires a programmer willing to submit some code, and lobbying to get it through the approval process.

Ok, this code puts the tabs on the bottom for me, but the tabs are all but blank - when Firefox is in focus. When something else is on top of Firefox the tabs display the content.

First pic is when Firefox is in focus, second is when something else is on top.

Any suggestions? I've monkeyed with some of the settings but nothing has helped. And I'm no coder, by any means. Thanks!

I don't directly know the answer to the errant tabs problem above, but having helped a friend with the new css, to move tabs, when he had problems, I thought it worth a mention.

Rename your existing userChrome.css Create a new blank file and obviously name it "userChrome.css"

Paste in the new code, Save it and see if that works when Firefox is run... It should... It ran okay here first time when I did it.

If it does the business then you can add back in the other stuff you had in your original/renamed userChrome file, piece by piece.

If you find the last piece you added messes with it, you can leave it out and move on the the next piece.

The obvious thing to leave out is the old code we were using to move the tabs pre 56. My friend still had it in his uC.css file.

Yes, using this clean file method is more time consuming than just dumping the new code somewhere in the file, but it does give a much better chance of success, particulary if you are less experienced in these matters.

Dz

Davezed said

I don't directly know the answer to the errant tabs problem above, but having helped a friend with the new css, to move tabs, when he had problems, I thought it worth a mention. Rename your existing userChrome.css Create a new blank file and obviously name it "userChrome.css" Paste in the new code, Save it and see if that works when Firefox is run... It should... It ran okay here first time when I did it. If it does the business then you can add back in the other stuff you had in your original/renamed userChrome file, piece by piece. If you find the last piece you added messes with it, you can leave it out and move on the the next piece. The obvious thing to leave out is the old code we were using to move the tabs pre 56. My friend still had it in his uC.css file. Yes, using this clean file method is more time consuming than just dumping the new code somewhere in the file, but it does give a much better chance of success, particulary if you are less experienced in these matters. Dz

Thanks for the quick reply, but I did actually use this code as the only code in the userchrome.css. It's the one line, "position: absolute !important;" that causes it. If I rem it out the tabs go back on top, but at least I can read them.

I think I'll just get used to the tabs on top, I've spent enough time struggling with it. But thanks Dave!

Yes that's correct the tabs will go back up top.

Is that section in your css complete, it's worth checking? Mine that works okay on four (Family members) Firefox istalls is:

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

}

My guess is, if that is complete, then maybe it's something else...

I do remember having to change the tab height to 35 px as the supplied figures were a bit small for my old eyes.

/* TABS: height */

root {

--tab-toolbar-navbar-overlap: 0px !important;
--tab-min-height: 35px !important;

}

root #tabbrowser-tabs {

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

}

Worth a look see methinks.

Dave

Doesn't work (64bit Win7 user running FFQuantum v65.0.)

I've tried editing the "userChrome.css" file (profile loaded via "about:support") and even tried replacing it entirely. Tabs refuse to move and I have no idea why.

I even tried using FF's "Safe Mode" with no addons.

If you look carefully, you will notice that Firefox marks all your tabs as inactive (not in focus) when you switch away to another application.

So, when all the tabs are inactive, the CSS is directing a certain colour. When one tab is active, it gets the active colour, and the rest of the tabs get the inactive colour, which is obviously the background colour.

Have you tried the "background-color" line, above? Try using purple or red so that you can really see the difference, and note which colour the text is when you are using Firefox and when you are in another application.

phumphries said

Have you tried the "background-color" line, above?

Is this reply intended for me? I'm not having an issue with "tab color". They simply refuse to move to above the window (which is the topic of this thread.)

And re: color, my own tabs don't change when losing focus. The active tab does get a blue line across the top. (But I don't have a problem with that.)