Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Firefox CSS to move tabs and adress bar to bottom of window. Use with userChrome.css (works with Firefox 71+)
This script has moved to https://github.com/Arty2/userstyles
@FirefoxSurvivor
Copy link

FirefoxSurvivor commented Feb 19, 2018

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!

@Arty2
Copy link
Author

Arty2 commented Mar 16, 2018

@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.

@FirefoxSurvivor
Copy link

FirefoxSurvivor commented Mar 17, 2018

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!

@jpoppe
Copy link

jpoppe commented Mar 22, 2018

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

@moedigart
Copy link

moedigart commented Apr 10, 2018

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

@cebzab
Copy link

cebzab commented Apr 29, 2018

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?

@Arty2
Copy link
Author

Arty2 commented May 10, 2018

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

@samboa86
Copy link

samboa86 commented Jun 20, 2018

@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

@sparxnet000
Copy link

sparxnet000 commented Sep 5, 2018

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

@bitbiter
Copy link

bitbiter commented Sep 5, 2018

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.

@FirefoxSurvivor
Copy link

FirefoxSurvivor commented Feb 5, 2019

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

@Arty2
Copy link
Author

Arty2 commented Apr 8, 2019

@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.

@FirefoxSurvivor
Copy link

FirefoxSurvivor commented May 6, 2019

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

@Arty2
Copy link
Author

Arty2 commented May 8, 2019

@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 :/

@FirefoxSurvivor
Copy link

FirefoxSurvivor commented May 15, 2019

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! :)

@Arty2
Copy link
Author

Arty2 commented Dec 29, 2019

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.

@J053Fabi0
Copy link

J053Fabi0 commented Jan 3, 2020

@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?

@Arty2
Copy link
Author

Arty2 commented Jan 6, 2020

@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

@FirefoxSurvivor
Copy link

FirefoxSurvivor commented Jan 10, 2020

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

@lizc1
Copy link

lizc1 commented Apr 11, 2021

Hi
I've been looking everywhere for something to move my tabs to the bottom and finally I found it! Only problem is, I'd like to have my browser bar and bookmarks toolbar at the top. Can you help please?
Cheers
Liz

@Arty2
Copy link
Author

Arty2 commented Apr 20, 2021

Hi @lizc1, I believe that requires some significant tweaks that I am not even sure if possible. Unfortunately I cannot look into it for the time being.

@jrmoulton
Copy link

jrmoulton commented Jan 2, 2022

Hi @Arty2 your script worked great for me except for that the rich pop up menu would flow downwards and I couldn't see it. But I did find another userChrome.css that also moves the tabs and address bar to the bottom but the rich pop up when you type in the menu bar now is visible and flows upwards. If anyone would like to reference it, it is in Jon Gjengsets configs https://github.com/jonhoo/configs/blob/master/gui/.mozilla/firefox/chrome/userChrome.css

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment