Firefox CSS to move tabs and adress bar to bottom of window. Use with userChrome.css (works with Firefox 71+)

tabs_to_bottom.css

This script has moved to https://github.com/Arty2/userstyles

Hello, Arty!

I really want to say thank you very much for this amazing add-on for firefox 57! I’m using a 23” size touch monitor, so tabs and address/url bar now on bottom of the screen help me so much in controlling firefox with extreme comfort. I thought I would never found an extension like this one. It’s exactly what I was looking for.

Again a thousand of thanks!

@FirefoxSurvivor I'm glad it's been of use, after many-many hours spent on undocumented areas for the making of this :)
Recently, FF 59 seems to break it, but I've updated the code with the alternative solution.

Dear Arty,

Thanks for the message! I’m currently running Firefox 59.0.1 and your extension is back to work after updating the code. I love it!

Thanks again for your great work!

Thanks for sharing! This lessens the pain a little after Mozilla killed all our awesome plugins ;)

Thank you so much! It makes a big difference in my browsing!

Wonderful stuff you did there, firefox looks sparkly fresh now.
One question though.
I wanted to have close,maximize,minimize buttons displayed so I deleted this part of the code from the css file:
/* hide titlebar */ #titlebar { display: none !important;
The problem is buttons are still on the top of the window in their default position.
Is there a way to put them in the bottom of the window?

@cebzab Not sure if that would work, but you could try different values of -moz-box-ordinal-group for #titlebar, eg:

#tillebar { -moz-box-ordinal-group:  2; }

@Arty2 that last code actually worked having the titlebar in the bottom, looks sweet! I have 1 bug (i just discovered while logging inhere) and 2 questions:
Bug: LastPass, being at the bottom , when I click it, the pop up loads downwards (meaning I cannot see it) instead of up. Odd because most other things pop upwards.

Is it possible to have just the tabs at the bottom, while keeping address bar at top? This was the code I found when trying to bring my tabs back to the bottom, not sure how I feel about address bar. I tried hiding the address bar code, or changing the number, but it brings the tabs with it.

Also, if you have a theme, the theme doesnt "come with it" to the bottom either. Do you know what code I would put to move the theme to the bottom as well? I dont know the # for the theme. thank you

How would one move only the tab bar to the bottom of the window? The following code worked up to Firefox v60. Haven't found a code block that works in 61 or 62 yet? All help would be greatly appreciated.
`
{
:root:not([tabsintitlebar]) #navigator-toolbox {
display: contents !important;
}

:root:not([tabsintitlebar]) #toolbar-menubar          { -moz-box-ordinal-group: 1 !important; }
:root:not([tabsintitlebar]) #nav-bar                  { -moz-box-ordinal-group: 2 !important; }
:root:not([tabsintitlebar]) #PersonalToolbar          { -moz-box-ordinal-group: 3 !important; }
:root:not([tabsintitlebar]) #navigator-toolbox::after { -moz-box-ordinal-group: 4 !important; }
:root:not([tabsintitlebar]) #content-deck             { -moz-box-ordinal-group: 5 !important; }
:root:not([tabsintitlebar]) #TabsToolbar              { -moz-box-ordinal-group: 6 !important; }

}

#TabsToolbar {
position: fixed;
bottom: -0.5em;
width: 100%;

}
#tabbrowser-tabs { width: 96%; }
#content-deck { margin-bottom: 2.5em; }
`

I just found this and it works great, after a little tweaking to get the min,max and x back. What I was hoping is that someone could help me put the menu bar back on the top. Everything I've tried doesn't seem to work.

Hello Arty,

There are troubles with Firefox 65 that brokes your great extension. At the moment I went back to the 64 version. Please help!

Thank you so much in advance, as always

@FirefoxSurvivor Could you confirm whether your edits are still in userChrome.css?

Somehow, I never noticed any change / break on the Developer Edition which I use daily, but on a second computer where I have a “plain” Firefox installed, this exact code block surprisingly disappeared from userChrome.css, leaving other custom code intact. Just confirmed that it works on Nightly, so it wasn’t any browser change that triggered it.

Hello Arty,

Sorry for the late answer. I confirm that the edits are still in the userChrome.css file.

Today I was forced to move to Firefox 66.0.4 because they messed up almost every extension. Unfortunately I confirm that something is wrong: the address bar is still on bottom but the tabs bar disappeared and I can't figure out how to get it back… So at the moment I don't know how to open other tabs. Please, help!

Thank you so much in advance

@FirefoxSurvivor Removing all code from userChrome.css should reset any modifications to Firefox UI and return your tabs. I’m afraid I can't replicate that issue to look into it :/

Dear Arty,

I am happy to inform you that your extension is back in action almost perfectly.
I really don´t know how the story is, but after deleting and adding a few times the code into the css file, tabs and tabs bar reappeared.

For some reason, when the tablet mode is enabled (I'm on Widows 10) the tabs are higher than their bar; when I skip to desktop mode they are the same size ...

EDIT
I'm now in tablet mode and both tabs and bar size are just perfect... who knows what's happening?!

All the best! :)

Firefox 71 (already on the Developer channel) once again broke the code here, but it is amended and working as of today.

Some other solutions for previous versions are also available here: https://support.mozilla.org/en-US/kb/forum-response-tabs-below-url-bar
The code in the otherwise excellent collection at https://github.com/Aris-t2/CustomCSSforFx claims ot get the job done, but it too redundant and tried to fix many other small things.

@Arty2 that last code actually worked having the titlebar in the bottom, looks sweet! I have 1 bug (i just discovered while logging inhere) and 2 questions:
Bug: LastPass, being at the bottom , when I click it, the pop up loads downwards (meaning I cannot see it) instead of up. Odd because most other things pop upwards.

Is it possible to have just the tabs at the bottom, while keeping address bar at top? This was the code I found when trying to bring my tabs back to the bottom, not sure how I feel about address bar. I tried hiding the address bar code, or changing the number, but it brings the tabs with it.

Also, if you have a theme, the theme doesnt "come with it" to the bottom either. Do you know what code I would put to move the theme to the bottom as well? I dont know the # for the theme. thank you

No solution found yet for this problems?

@J053Fabi0 @samboa86

LastPass seems to be following a different approach in how the place their pop-up. Unfortunately I am not familiar with LastPass and it's not possible for me to investigate. What is more, moving the tabs to the bottom while keeping the URL bar at the top is beyond the scope of this script. Perhaps https://github.com/Aris-t2/CustomCSSforFx has something that works along these lines.

Regarding themes, if I understand correct, it's not possible to alter this behavior without changing the theme itself. A starting point into making a custom theme: https://developer.mozilla.org/en-US/docs/Archive/Themes/Create_Your_Own_Firefox_Background_Theme

Hello to everyone,

I just want to say thank You very much Arty for making this great addon compatible with the putrid Firefox 72, which seems to be really slower than the previous version.

Before knowing of the above update by Arty, once Firefox broke the code I tried to skip back to the v71. Unfortunately I accidentally DELETED my entire profile in the operation. Ouch! Never happened before. Damned Firefox!!!

Sincerely