See this thread for updated userChrome.css code for Firefox 65 to move the tabs to the lower position.

• [/questions/1248277] Reposition Tabs at bottom, directly above web page in Firefox 65.0?

See also:

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

neither of these solutions worked on 68.* which confuses me because my previous install evewrything was set up the way l liked it with tabs below my bookmarks toolbar, but the same edits l did before arent working.

In what way isn't the code working?

Did you check with a clean userChrome.css with only the @namespace line and the new code?

You did place userChrome.css in the chrome folder and made sure that the file is a plain text file and doesn't have a a hidden .txt or .css file extension ?

downloaded a clean version popped it into the chrome folder named as userChrome.css

and this is its content (tabs havent changed location and are still above my search bar rather than below my bookmarks toolbar):

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

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

}

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;

}

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;

}

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

sorry for the crappy formatting of the reply, dont know the code to get the post to format properly as code.

so, it turns out that l was editing the wrong profile.. or should l say the location this install was completely different than the last, you see my old files were still on my system, when l reinstalled it kept some of my appdata folders and when l navigated to them via the shortcut in the folde l kept the usercrome.css file with the edits.

l remembered serveral mins ago there was a way to go straight to my profile from help > troubleshooting and noticed there was a descrepancy of where my profile was, not to mention there wasnt a Chrome folder, so l created it then popped the *.css in there and its worked. my fault really, however l really wish this was an option rather than a css edit.

now l just need to find out where the seperators have gone in customisations, only thing l see is flexible space.

Firefox only comes with flexible spacer in the Customize palette. You will first have to place a flexible spacer and then edit the browser.uiCustomization.state pref. This pref is in JSON format, so be cautious not to break this JSON code ({"key":"value"} pairs). If you do it this way then Firefox takes care to add a unique ID number, so you only need to edit the type.

You should have the item(s) on the toolbar after you have restarted Firefox. Make sure to keep a backup of the current value of the browser.uiCustomization.state pref.

customizableui-special-separator## (separator)
customizableui-special-spacer##    (spacer)
customizableui-special-spring##    (spring)

thanks :)

Note that there is a change in Firefox 71 that requires to add a "display: block;" rule to the #TabsToolbar container to get the tab on bottom.

• https://www.reddit.com/r/FirefoxCSS/comments/da72wv/psa_for_nightly_users_potential_breakage_or_even/

/* required for Firefox 71+ */
#TabsToolbar {
 position: absolute !important;
 bottom: 0 !important;
 width: 100vw !important;
 display: block !important;
}

Thanks cor-el. You've saved my sanity! Went to check if there were any updates within Firefox and ended up with Firefox 71 without being asked.

And then found that my tabs were no long at at the bottom. Not a happy bunny!

For non-experts like me, I wonder if it would be good if someone could come up with a new .css file we can just copy, rather than dabbling in notebook changes to files we don't understand.

fyi I found you because of the "71" reference in your message.

And I'm echoing others in saying that I'd prefer Firefox to have a simple option to set tabs at the bottom, which is were they belong logically (imho!)

Thanks again

I've tried to add "col-el"'s solution adding the block of code to my_userChrome.css, but what happens is that it moves the tabs on top and in-line with the bookmark line. No mater what other options I activate in the custom userChrome.css, the tabs stay on top. They only go low when "display: block !important;" is active, but covers up the bookmark line.

Thanks!

If you have added the text below to Userchrome css

Then go to ' open Menu at right of Firefox screen > Customise > and at the bottom left click on ' Title Bar' that for me has sorted the half covering up of the tab bar, which for you might be the Bookmark line

/* required for Firefox 71+ */

1. TabsToolbar {

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

}

Thanks for the tip, however, all that unchecking the 'Title Bar' box does is remove the title bar, but has no other effect. I even went as far as removing Chrome from the profile, so FF 71 is loading defaults. Went to about:config, changed the "browser.tabs.onTop" to false (yes, a false hope), but has NO effect, as Mozilla has essentially disabled this feature.

Why can't they leave well enough alone?

Any help would be appreciated.

Thanks

Hi, I have an extensive userchrome.css file which has been added to over numerous versions of FF as I have sought to keep tabs on the bottom, Bookmarks in the middle and the address bar at the top. Ideally I would cull stuff in this file but sadly I hardly know what I am doing, .... just solving the latest problem. This time I added the code above posted by cor-el and then ticked ( Not unticked) the title bar on the customise page. I have just done the same on my MacBook Pro and like this morning on Mac Pro it has worked. Why I do not know!, it may well be due to other code in my Userchrome file, or things I altered some time ago in the 'about.config' page. Like you I wish FF would not keep causing tabs to move to the top, or have a simple way of selectingwhere we can have them.

i have now realised that by activating the title bar the web page is shifted downwards a nuber of pixels which stops the tabs being cut in half horizontally by the web page.

Hi willy6560, if you can disentangle the accumulated rules related to the tabs bar while keeping the other ones, try adding a fresh set:

https://www.userchrome.org/what-is-userchrome-css.html#movetabbar

Well, I seemed to have resolved the issue, sort of. Using the original coding suggested by 'cor-el' (display: block), it didn't seem to work. This was placed in 'my_userChrome.css'.

Up until FF71.x, myself, like many others, I have used the 'Custom CSS for Firefox 60+' userChrome/userContent scripts (found on GitHub - https://github.com/aris-t2/customcssforfx with good results. As mentioned, my first attempt didn't work, so I tried various settings within the latest 2.9.0 (and 2.9.2. v2), and still no joy. Just for S&G's, I reverted back to the one of the earlier versions of Custom CSS, ver 2.3.9, and viola, it works again!

I'm running Win7-64 on my desktop, but I'm also running Win10-64 on my laptop with the same results. Tabs on bottom.

Again, this is what works for me. Here's a link to that older version. https://github.com/Aris-t2/CustomCSSforFx/releases/tag/2.3.9

Good luck, and thanks for all the feedback!