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

This comment has been minimized.

Copy link

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

This comment has been minimized.

Copy link
Owner Author

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

This comment has been minimized.

Copy link

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

This comment has been minimized.

Copy link

@jpoppe jpoppe commented Mar 22, 2018

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

@moedigart

This comment has been minimized.

Copy link

@moedigart moedigart commented Apr 10, 2018

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

@cebzab

This comment has been minimized.

Copy link

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

This comment has been minimized.

Copy link
Owner Author

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

This comment has been minimized.

Copy link

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

This comment has been minimized.

Copy link

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

This comment has been minimized.

Copy link

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

This comment has been minimized.

Copy link

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

This comment has been minimized.

Copy link
Owner Author

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

This comment has been minimized.

Copy link

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

This comment has been minimized.

Copy link
Owner Author

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

This comment has been minimized.

Copy link

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

This comment has been minimized.

Copy link
Owner Author

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

This comment has been minimized.

Copy link

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

This comment has been minimized.

Copy link
Owner Author

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

This comment has been minimized.

Copy link

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.