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 57+)
/*
1. Navigate to `%APPDATA%\Mozilla\Firefox\Profiles ...` or locate the exact directory at `about:profiles`
2. Create a folder named `chrome` then create a file named userChrome.css inside it and paste this code
3. If userChrome.css doesn’t seem to work, open `about:config` and set `toolkit.legacyUserProfileCustomizations.stylesheets=true`
*/
@namespace url(http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul);
/* tabs to bottom */
#navigator-toolbox {
-moz-box-ordinal-group: 2;
}
#main-window[sizemode="maximized"] {
padding-top: 7px !important;
}
/* hide tab toolbar when fullscreen */
#nav-bar[inFullscreen],
#TabsToolbar[inFullscreen] {
display: none;
}
#TabsToolbar {
margin-top: -10px !important;
}
/* hide window controls, updated for Firefox 64 */
#TabsToolbar > .titlebar-buttonbox-container {
display: none!important;
}
/* put suggestions popup on top */
#PopupAutoCompleteRichResult {
opacity: 0.9;
margin-top: -332px;
margin-left: 10px;
height: 300px;
}
#PopupAutoCompleteRichResult .autocomplete-richlistbox > scrollbox {
overflow-y: auto !important;
}
/* or hide suggestions completely */
#PopupAutoCompleteRichResult { display: none; }
@FirefoxSurvivor

This comment has been minimized.

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

This comment has been minimized.

Copy link
Owner 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

This comment has been minimized.

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

This comment has been minimized.

Copy link

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

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.