X
Tap here to go to the mobile version of the site.
An updated version of Firefox is available to address the issues with Add-ons disabled or fail to install on Firefox. You can download the update for your OS here: https://www.mozilla.org/firefox/new/ For Known Issues and Workarounds, please check out the update at https://support.mozilla.org/kb/add-ons-disabled-or-fail-to-install-firefox

Support Forum

Reposition Tabs at bottom, directly above web page in Firefox 65.0? -- for Windows 10 - not for MacOSX

Posted

Can anyone supply updated code for the userChrome.css for restoring Tabs to below Menu bar, Location bar, and Personal Toolbar? The code below was working until I upgraded to 65.0.

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

Thank you for the help.


edited the title of this thread to include Windows 10 as the operating system the OP posted from

Can anyone supply updated code for the userChrome.css for restoring Tabs to below Menu bar, Location bar, and Personal Toolbar? The code below was working until I upgraded to 65.0. /* tabs on bottom */ #navigator-toolbox toolbar:not(#nav-bar):not(#toolbar-menubar) {-moz-box-ordinal-group:10} #TabsToolbar {-moz-box-ordinal-group:1000!important} Thank you for the help. ''edited the title of this thread to include Windows 10 as the operating system the OP posted from''

Modified by the-edmeister

Chosen solution

This code is working for me in Firefox 65. You can adjust the two --tab-min-height definitions under the Height section to suit your needs (give them both the same value; default:33px; compact:29px; touch:43px).

Add code to the userChrome.css file below the default @namespace line.


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

/* TABS: on bottom */
#navigator-toolbox toolbar:not(#nav-bar):not(#toolbar-menubar) {-moz-box-ordinal-group:10}
#TabsToolbar {-moz-box-ordinal-group:1000!important}

#TabsToolbar {
 position: absolute !important;
 bottom: 0 !important;
 width: 100vw !important;
}

#tabbrowser-tabs {
  width: 100vw !important;
}
#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;
}

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

#tabbrowser-tabs,
#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 */
#navigator-toolbox[movingtab] > #titlebar > #TabsToolbar {
  padding-bottom: unset !important;
}
#navigator-toolbox[movingtab] #tabbrowser-tabs {
  padding-bottom: unset !important;
  margin-bottom: unset !important;
}
#navigator-toolbox[movingtab] > #nav-bar {
  margin-top: unset !important;
}

/* hide windows-controls */
#TabsToolbar #window-controls {display:none!important;}

/* move caption buttons to right of Tab bar */
#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;
}
#toolbar-menubar[autohide="true"] ~ #TabsToolbar {padding-right: 100px !important;}
Read this answer in context 12

Additional System Details

Installed Plug-ins

  • Shockwave Flash 32.0 r0

Application

  • User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:65.0) Gecko/20100101 Firefox/65.0

More Information

cor-el
  • Top 10 Contributor
  • Moderator
17080 solutions 154280 answers

Chosen Solution

This code is working for me in Firefox 65. You can adjust the two --tab-min-height definitions under the Height section to suit your needs (give them both the same value; default:33px; compact:29px; touch:43px).

Add code to the userChrome.css file below the default @namespace line.


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

/* TABS: on bottom */
#navigator-toolbox toolbar:not(#nav-bar):not(#toolbar-menubar) {-moz-box-ordinal-group:10}
#TabsToolbar {-moz-box-ordinal-group:1000!important}

#TabsToolbar {
 position: absolute !important;
 bottom: 0 !important;
 width: 100vw !important;
}

#tabbrowser-tabs {
  width: 100vw !important;
}
#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;
}

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

#tabbrowser-tabs,
#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 */
#navigator-toolbox[movingtab] > #titlebar > #TabsToolbar {
  padding-bottom: unset !important;
}
#navigator-toolbox[movingtab] #tabbrowser-tabs {
  padding-bottom: unset !important;
  margin-bottom: unset !important;
}
#navigator-toolbox[movingtab] > #nav-bar {
  margin-top: unset !important;
}

/* hide windows-controls */
#TabsToolbar #window-controls {display:none!important;}

/* move caption buttons to right of Tab bar */
#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;
}
#toolbar-menubar[autohide="true"] ~ #TabsToolbar {padding-right: 100px !important;}
This code is working for me in Firefox 65. You can adjust the two <b>--tab-min-height</b> definitions under the Height section to suit your needs (give them both the same value; default:33px; compact:29px; touch:43px). Add code to the <b>userChrome.css</b> file below the default @namespace line. *http://kb.mozillazine.org/userChrome.css *https://www.userchrome.org/how-create-userchrome-css.html *https://www.userchrome.org/what-is-userchrome-css.html <hr> <pre><nowiki>@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); /* only needed once */ /* TABS: on bottom */ #navigator-toolbox toolbar:not(#nav-bar):not(#toolbar-menubar) {-moz-box-ordinal-group:10} #TabsToolbar {-moz-box-ordinal-group:1000!important} #TabsToolbar { position: absolute !important; bottom: 0 !important; width: 100vw !important; } #tabbrowser-tabs { width: 100vw !important; } #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; } #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; } #tabbrowser-tabs, #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 */ #navigator-toolbox[movingtab] > #titlebar > #TabsToolbar { padding-bottom: unset !important; } #navigator-toolbox[movingtab] #tabbrowser-tabs { padding-bottom: unset !important; margin-bottom: unset !important; } #navigator-toolbox[movingtab] > #nav-bar { margin-top: unset !important; } /* hide windows-controls */ #TabsToolbar #window-controls {display:none!important;} /* move caption buttons to right of Tab bar */ #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; } #toolbar-menubar[autohide="true"] ~ #TabsToolbar {padding-right: 100px !important;} </nowiki></pre>

Modified by cor-el

Question owner

Thank you so much for the fast response. This works perfectly.

Thank you so much for the fast response. This works perfectly.
MainGoldDragon 2 solutions 17 answers

I removed the entire /* TABS: height */ section of cor-el's code because it made the tabs... well, too small. But otherwise, it worked flawlessly. Kinda wish this was possible with less code.

I removed the entire /* TABS: height */ section of cor-el's code because it made the tabs... well, too small. But otherwise, it worked flawlessly. Kinda wish this was possible with less code.
PWeeks 0 solutions 2 answers

Works perfectly from:

carrotwaffle Posted 1/29/19, 7:36 PM

Thank You!

Works perfectly from: carrotwaffle Posted 1/29/19, 7:36 PM Thank You!
slcosta 0 solutions 2 answers

Helpful Reply

This worked for me too.

Why don't they simply give an option to do so on the setup? I just wasted an hour finding out how to do this. This is at least the second time they've desupported the previous method.

To say I'm angry and frustrated is an understatement.

I don't know what percentage of users want their tabs on the bottom, but there seems to be a lot. I would prefer it as the default.

This worked for me too. Why don't they simply give an option to do so on the setup? I just wasted an hour finding out how to do this. This is at least the second time they've desupported the previous method. To say I'm angry and frustrated is an understatement. I don't know what percentage of users want their tabs on the bottom, but there seems to be a lot. I would prefer it as the default.
the-edmeister
  • Top 25 Contributor
  • Moderator
5386 solutions 39975 answers

slcosta said

Why don't they simply give an option to do so on the setup?

That "option" has been gone for many years now! Disappeared with Firefox 29 Australis as I recall. And the extensions that "restored that option" disappeared with Firefox 57 Quantum in Nov 2017.

''slcosta [[#answer-1192549|said]]'' <blockquote> Why don't they simply give an option to do so on the setup? </blockquote> That "option" has been gone for many years now! Disappeared with Firefox 29 Australis as I recall. And the extensions that "restored that option" disappeared with Firefox 57 Quantum in Nov 2017.
slcosta 0 solutions 2 answers

Yep, I know; it irritated me then, and I fixed it. Changing it again required me to spend a fair amount of time and trouble fixing it yet again. Enough time had passed that I no longer remembered where and how (generally speaking - the .css file) to fix it.

I don't know why they took the option away. What problem were they trying to solve?

I find tabs at the bottom both more convenient and more logical: the content is part of the tab.

Yep, I know; it irritated me then, and I fixed it. Changing it again required me to spend a fair amount of time and trouble fixing it yet again. Enough time had passed that I no longer remembered where and how (generally speaking - the .css file) to fix it. I don't know why they took the option away. What problem were they trying to solve? I find tabs at the bottom both more convenient and more logical: the content is part of the tab.
Davezed 0 solutions 14 answers

slcosta said

This worked for me too.

That bit of code sorted my problem and the tabs were back where they belong, below the toolbars. I did need to tweak the tab sizes a bit as they were a wee bit small for us old folks here with our old folks eyes.  ;-)

When I was somewhere else searching for the answer, It was the-edmeister who pointed me here. So thanks the-edmeister, appreciated.

Davez

''slcosta [[#answer-1192549|said]]'' <blockquote> This worked for me too. </blockquote> That bit of code sorted my problem and the tabs were back where they belong, below the toolbars. I did need to tweak the tab sizes a bit as they were a wee bit small for us old folks here with our old folks eyes. ;-) When I was somewhere else searching for the answer, It was '''the-edmeister''' who pointed me here. So thanks '''the-edmeister''', appreciated. Davez

Modified by Davezed

jcooper11 0 solutions 2 answers

Works for me. Thanks very much.

Works for me. Thanks very much.
MacOSuser 0 solutions 2 answers

carrotwaffle said

Can anyone supply updated code for the userChrome.css for restoring Tabs to below Menu bar, Location bar, and Personal Toolbar? The code below was working until I upgraded to 65.0. /* 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}
Thank you for the help.

cor-el said

This code is working for me in Firefox 65. You can adjust the two --tab-min-height definitions under the Height section to suit your needs (give them both the same value). Add code to the userChrome.css file below the default @namespace line.
@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); /* only needed once */

/* TABS: on bottom */
#navigator-toolbox toolbar:not(#nav-bar):not(#toolbar-menubar) {-moz-box-ordinal-group:10}
#TabsToolbar {-moz-box-ordinal-group:1000!important}

#TabsToolbar {
 position: absolute !important;
 bottom: 0 !important;
 width: 100vw !important;
}

#tabbrowser-tabs {
  width: 100vw !important;
}
#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: 27px !important; /* adjust to suit your needs */
}
:root #tabbrowser-tabs {
 --tab-min-height: 27px !important; /* needs to be the same as above under :root */
 --tab-min-width: 80px !important;
}

#TabsToolbar {
 height: var(--tab-min-height) !important;
 margin-bottom: 1px !important;
 box-shadow: ThreeDShadow 0 -1px inset, -moz-dialog 0 1px !important;
}

#tabbrowser-tabs,
#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 */
#navigator-toolbox[movingtab] > #titlebar > #TabsToolbar {
  padding-bottom: unset !important;
}
#navigator-toolbox[movingtab] #tabbrowser-tabs {
  padding-bottom: unset !important;
  margin-bottom: unset !important;
}
#navigator-toolbox[movingtab] > #nav-bar {
  margin-top: unset !important;
}

This does not work correctly in MacOS because it moves the three colored buttons (red/yellow/green) that are supposed to go up at the very top left down into the page display area! Please see my question at https://support.mozilla.org/en-US/questions/1248595 for more information.

EDIT: I found that if I added

.titlebar-buttonbox-container{
  position: fixed;
  top:0;
  left:0;
  height: 0px;
}

at the very bottom it sort of fixes the problem, although I have to add some spacers at the start of that line to keep them from overlapping the browser's back/forward buttons. I have no idea if the above is actually a correct fix, but at least it gets the buttons out of the page display area on my Mac.

FURTHER EDIT: If using the addition above, one thing to be aware of is if you are in the habit of double clicking in the top bar to increase the window size to full screen, it only works now if you double click in the area directly over where the three colored buttons appear. That's also the "grab area" if the window is less than full size and you want to reposition it on the screen.

''carrotwaffle [[#question-1248277|said]]'' <blockquote> Can anyone supply updated code for the userChrome.css for restoring Tabs to below Menu bar, Location bar, and Personal Toolbar? The code below was working until I upgraded to 65.0. /* tabs on bottom */ #navigator-toolbox toolbar:not(#nav-bar):not(#toolbar-menubar) {-moz-box-ordinal-group:10} #TabsToolbar {-moz-box-ordinal-group:1000!important} Thank you for the help. </blockquote> ''cor-el [[#answer-1192325|said]]'' <blockquote> This code is working for me in Firefox 65. You can adjust the two <b>--tab-min-height</b> definitions under the Height section to suit your needs (give them both the same value). Add code to the <b>userChrome.css</b> file below the default @namespace line. *http://kb.mozillazine.org/userChrome.css *https://www.userchrome.org/how-create-userchrome-css.html *https://www.userchrome.org/what-is-userchrome-css.html <hr> <pre><nowiki>@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); /* only needed once */ /* TABS: on bottom */ #navigator-toolbox toolbar:not(#nav-bar):not(#toolbar-menubar) {-moz-box-ordinal-group:10} #TabsToolbar {-moz-box-ordinal-group:1000!important} #TabsToolbar { position: absolute !important; bottom: 0 !important; width: 100vw !important; } #tabbrowser-tabs { width: 100vw !important; } #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: 27px !important; /* adjust to suit your needs */ } :root #tabbrowser-tabs { --tab-min-height: 27px !important; /* needs to be the same as above under :root */ --tab-min-width: 80px !important; } #TabsToolbar { height: var(--tab-min-height) !important; margin-bottom: 1px !important; box-shadow: ThreeDShadow 0 -1px inset, -moz-dialog 0 1px !important; } #tabbrowser-tabs, #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 */ #navigator-toolbox[movingtab] > #titlebar > #TabsToolbar { padding-bottom: unset !important; } #navigator-toolbox[movingtab] #tabbrowser-tabs { padding-bottom: unset !important; margin-bottom: unset !important; } #navigator-toolbox[movingtab] > #nav-bar { margin-top: unset !important; } </nowiki></pre> </blockquote> This does not work correctly in MacOS because it moves the three colored buttons (red/yellow/green) that are supposed to go up at the very top left down into the page display area! Please see my question at https://support.mozilla.org/en-US/questions/1248595 for more information. EDIT: I found that if I added <blockquote><pre> .titlebar-buttonbox-container{ position: fixed; top:0; left:0; height: 0px; } </pre></blockquote> at the very bottom it sort of fixes the problem, although I have to add some spacers at the start of that line to keep them from overlapping the browser's back/forward buttons. I have no idea if the above is actually a correct fix, but at least it gets the buttons out of the page display area on my Mac. FURTHER EDIT: If using the addition above, one thing to be aware of is if you are in the habit of double clicking in the top bar to increase the window size to full screen, it only works now if you double click in the area directly over where the three colored buttons appear. That's also the "grab area" if the window is less than full size and you want to reposition it on the screen.

Modified by MacOSuser

thorbjornw 0 solutions 3 answers

Thanks , it worked. Now I have the tabs at the bottom again.

Thanks , it worked. Now I have the tabs at the bottom again.
Anaya 0 solutions 19 answers

i really appreciate all the individuals trying to help but i am still so frustrated that this keeps happening. Does anyone know who we can actually complain to?

Anyway, I am confused by the directions. Am I supposed to copy the whole set of code above or just the part below the first line? I.e., is the @namespace line part of the code I am pasting or not?

And is there a simple explanation of how to find the CSS file or do I need to read all 3 of those help pages above?

i really appreciate all the individuals trying to help but i am still so frustrated that this keeps happening. Does anyone know who we can actually complain to? Anyway, I am confused by the directions. Am I supposed to copy the whole set of code above or just the part below the first line? I.e., is the @namespace line part of the code I am pasting or not? And is there a simple explanation of how to find the CSS file or do I need to read all 3 of those help pages above?
thorbjornw 0 solutions 3 answers

What I did is quite simple. In the default user directory (/home/'YOUR USER NAME'/.mozilla/firefox/xxxxx.default-xxx) make sure you have the directory /chrome with the file userChrome.css. If you don't have it, you can to make it easy, you can download chrome.zip from http://franklion.co.uk/GEN-LINKS/chrome.zip and extract it to the default directory. Once you have the userChrome.css file, copy the proposed text in. The whole content of my file is (and that worked for me): /* Frank edited file - you are good to go...*/

/*

* Do not remove the @namespace line -- it's required for correct functioning
*/

@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); /* set default namespace to XUL */ /* 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: 27px !important; /* adjust to suit your needs */

}

root #tabbrowser-tabs {
--tab-min-height: 27px !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;

}

  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;

}

What I did is quite simple. In the default user directory (/home/'YOUR USER NAME'/.mozilla/firefox/xxxxx.default-xxx) make sure you have the directory /chrome with the file userChrome.css. If you don't have it, you can to make it easy, you can download chrome.zip from http://franklion.co.uk/GEN-LINKS/chrome.zip and extract it to the default directory. Once you have the userChrome.css file, copy the proposed text in. The whole content of my file is (and that worked for me): /* Frank edited file - you are good to go...*/ /* * Do not remove the @namespace line -- it's required for correct functioning */ @namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); /* set default namespace to XUL */ /* TABS: on bottom */ #navigator-toolbox toolbar:not(#nav-bar):not(#toolbar-menubar) {-moz-box-ordinal-group:10} #TabsToolbar {-moz-box-ordinal-group:1000!important} #TabsToolbar { position: absolute !important; bottom: 0 !important; width: 100vw !important; } #tabbrowser-tabs { width: 100vw !important; } #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: 27px !important; /* adjust to suit your needs */ } :root #tabbrowser-tabs { --tab-min-height: 27px !important; /* needs to be the same as above under :root */ --tab-min-width: 80px !important; } #TabsToolbar { height: var(--tab-min-height) !important; margin-bottom: 1px !important; box-shadow: ThreeDShadow 0 -1px inset, -moz-dialog 0 1px !important; } #tabbrowser-tabs, #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 */ #navigator-toolbox[movingtab] > #titlebar > #TabsToolbar { padding-bottom: unset !important; } #navigator-toolbox[movingtab] #tabbrowser-tabs { padding-bottom: unset !important; margin-bottom: unset !important; } #navigator-toolbox[movingtab] > #nav-bar { margin-top: unset !important; }
MainGoldDragon 2 solutions 17 answers

thorbjornw, dude, what ? First of all your reply is a mess and you also directly people to download a file from an external site. That's a big no-no.

I get it you're trying to help, but you're doing the opposite.

thorbjornw, dude, what ? First of all your reply is a mess and you also directly people to download a file from an external site. That's a big no-no. I get it you're trying to help, but you're doing the opposite.
thorbjornw 0 solutions 3 answers

OK. Forget it. Just trying to help as it worked for me. Then give the poor guy the right answer then.

OK. Forget it. Just trying to help as it worked for me. Then give the poor guy the right answer then.
MainGoldDragon 2 solutions 17 answers

thorbjornw said

OK. Forget it. Just trying to help as it worked for me. Then give the poor guy the right answer then.

OP already got his answer.

''thorbjornw [[#answer-1193169|said]]'' <blockquote> OK. Forget it. Just trying to help as it worked for me. Then give the poor guy the right answer then. </blockquote> OP already got his answer.

Question owner

Anaya said

Anyway, I am confused by the directions. Am I supposed to copy the whole set of code above or just the part below the first line? I.e., is the @namespace line part of the code I am pasting or not?

Anaya,

1) Copy/paste the entire thing to the userChrome.css file.

2) For creating the css file, follow the instructions included at the head of the solution posted by cor-el, the second post in this thread. Unless you want help modifying the tabs, there is no need to read any of the subsequent posts.

My userChrome.css file is located here: C:\Users\UserName\AppData\Roaming\Mozilla\Firefox\Profiles\xxxxxxxx.default\chrome\userChrome.css

It is good for you to know the location of the C:\Users\UserName\AppData\Roaming\ folder as this is where personal and/or settings data for many applications is kept. I routinely backup my Mozilla and Thunderbird folders from here. This is facilitated by creating a shortcut or by pinning the "roaming" folder to your start menu.

''Anaya [[#answer-1193158|said]]'' <blockquote>Anyway, I am confused by the directions. Am I supposed to copy the whole set of code above or just the part below the first line? I.e., is the @namespace line part of the code I am pasting or not? </blockquote> Anaya, 1) Copy/paste the entire thing to the userChrome.css file. 2) For creating the css file, follow the instructions included at the head of the solution posted by cor-el, the second post in this thread. Unless you want help modifying the tabs, there is no need to read any of the subsequent posts. My userChrome.css file is located here: C:\Users\UserName\AppData\Roaming\Mozilla\Firefox\Profiles\xxxxxxxx.default\chrome\userChrome.css It is good for you to know the location of the C:\Users\UserName\AppData\Roaming\ folder as this is where personal and/or settings data for many applications is kept. I routinely backup my Mozilla and Thunderbird folders from here. This is facilitated by creating a shortcut or by pinning the "roaming" folder to your start menu.

Modified by carrotwaffle

jorb 3 solutions 54 answers

With the old code I was using it also included code to move the "Find On This Page" bar from below of page to above page. Is there a way to add code to do this?


cor-el said

This code is working for me in Firefox 65. You can adjust the two --tab-min-height definitions under the Height section to suit your needs (give them both the same value; default:33px; compact:29px; touch:43px). Add code to the userChrome.css file below the default @namespace line.
@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); /* only needed once */

/* TABS: on bottom */
#navigator-toolbox toolbar:not(#nav-bar):not(#toolbar-menubar) {-moz-box-ordinal-group:10}
#TabsToolbar {-moz-box-ordinal-group:1000!important}

#TabsToolbar {
 position: absolute !important;
 bottom: 0 !important;
 width: 100vw !important;
}

#tabbrowser-tabs {
  width: 100vw !important;
}
#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;
}

#TabsToolbar {
 height: var(--tab-min-height) !important;
 margin-bottom: 1px !important;
 box-shadow: ThreeDShadow 0 -1px inset, -moz-dialog 0 1px !important;
}

#tabbrowser-tabs,
#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 */
#navigator-toolbox[movingtab] > #titlebar > #TabsToolbar {
  padding-bottom: unset !important;
}
#navigator-toolbox[movingtab] #tabbrowser-tabs {
  padding-bottom: unset !important;
  margin-bottom: unset !important;
}
#navigator-toolbox[movingtab] > #nav-bar {
  margin-top: unset !important;
}

/* hide windows-controls */
#TabsToolbar #window-controls {display:none!important;}

/* move caption buttons to right of Tab bar */
#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;
}
#toolbar-menubar[autohide="true"] ~ #TabsToolbar {padding-right: 100px !important;}
With the old code I was using it also included code to move the "Find On This Page" bar from below of page to above page. Is there a way to add code to do this? ''cor-el [[#answer-1192325|said]]'' <blockquote> This code is working for me in Firefox 65. You can adjust the two <b>--tab-min-height</b> definitions under the Height section to suit your needs (give them both the same value; default:33px; compact:29px; touch:43px). Add code to the <b>userChrome.css</b> file below the default @namespace line. *http://kb.mozillazine.org/userChrome.css *https://www.userchrome.org/how-create-userchrome-css.html *https://www.userchrome.org/what-is-userchrome-css.html <hr> <pre><nowiki>@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); /* only needed once */ /* TABS: on bottom */ #navigator-toolbox toolbar:not(#nav-bar):not(#toolbar-menubar) {-moz-box-ordinal-group:10} #TabsToolbar {-moz-box-ordinal-group:1000!important} #TabsToolbar { position: absolute !important; bottom: 0 !important; width: 100vw !important; } #tabbrowser-tabs { width: 100vw !important; } #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; } #TabsToolbar { height: var(--tab-min-height) !important; margin-bottom: 1px !important; box-shadow: ThreeDShadow 0 -1px inset, -moz-dialog 0 1px !important; } #tabbrowser-tabs, #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 */ #navigator-toolbox[movingtab] > #titlebar > #TabsToolbar { padding-bottom: unset !important; } #navigator-toolbox[movingtab] #tabbrowser-tabs { padding-bottom: unset !important; margin-bottom: unset !important; } #navigator-toolbox[movingtab] > #nav-bar { margin-top: unset !important; } /* hide windows-controls */ #TabsToolbar #window-controls {display:none!important;} /* move caption buttons to right of Tab bar */ #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; } #toolbar-menubar[autohide="true"] ~ #TabsToolbar {padding-right: 100px !important;} </nowiki></pre> </blockquote>
suzanne77 0 solutions 12 answers

MacOSuser said

carrotwaffle said
Can anyone supply updated code for the userChrome.css for restoring Tabs to below Menu bar, Location bar, and Personal Toolbar? The code below was working until I upgraded to 65.0. /* 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}
Thank you for the help.

cor-el said

This code is working for me in Firefox 65. You can adjust the two --tab-min-height definitions under the Height section to suit your needs (give them both the same value). Add code to the userChrome.css file below the default @namespace line.
@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); /* only needed once */

/* TABS: on bottom */
#navigator-toolbox toolbar:not(#nav-bar):not(#toolbar-menubar) {-moz-box-ordinal-group:10}
#TabsToolbar {-moz-box-ordinal-group:1000!important}

#TabsToolbar {
 position: absolute !important;
 bottom: 0 !important;
 width: 100vw !important;
}

#tabbrowser-tabs {
  width: 100vw !important;
}
#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: 27px !important; /* adjust to suit your needs */
}
:root #tabbrowser-tabs {
 --tab-min-height: 27px !important; /* needs to be the same as above under :root */
 --tab-min-width: 80px !important;
}

#TabsToolbar {
 height: var(--tab-min-height) !important;
 margin-bottom: 1px !important;
 box-shadow: ThreeDShadow 0 -1px inset, -moz-dialog 0 1px !important;
}

#tabbrowser-tabs,
#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 */
#navigator-toolbox[movingtab] > #titlebar > #TabsToolbar {
  padding-bottom: unset !important;
}
#navigator-toolbox[movingtab] #tabbrowser-tabs {
  padding-bottom: unset !important;
  margin-bottom: unset !important;
}
#navigator-toolbox[movingtab] > #nav-bar {
  margin-top: unset !important;
}

This does not work correctly in MacOS because it moves the three colored buttons (red/yellow/green) that are supposed to go up at the very top left down into the page display area! Please see my question at https://support.mozilla.org/en-US/questions/1248595 for more information.

EDIT: I found that if I added

.titlebar-buttonbox-container{
  position: fixed;
  top:0;
  left:0;
  height: 0px;
}

at the very bottom it sort of fixes the problem, although I have to add some spacers at the start of that line to keep them from overlapping the browser's back/forward buttons. I have no idea if the above is actually a correct fix, but at least it gets the buttons out of the page display area on my Mac.

I have Macs, and this did not help me. The three necessary buttons were still down in the display window.

Can someone familiar with Macs, please post the code that works with Macs. The code in this thread does not work for Macs.

''MacOSuser [[#answer-1192915|said]]'' <blockquote> ''carrotwaffle [[#question-1248277|said]]'' <blockquote> Can anyone supply updated code for the userChrome.css for restoring Tabs to below Menu bar, Location bar, and Personal Toolbar? The code below was working until I upgraded to 65.0. /* tabs on bottom */ #navigator-toolbox toolbar:not(#nav-bar):not(#toolbar-menubar) {-moz-box-ordinal-group:10} #TabsToolbar {-moz-box-ordinal-group:1000!important} Thank you for the help. </blockquote> ''cor-el [[#answer-1192325|said]]'' <blockquote> This code is working for me in Firefox 65. You can adjust the two <b>--tab-min-height</b> definitions under the Height section to suit your needs (give them both the same value). Add code to the <b>userChrome.css</b> file below the default @namespace line. *http://kb.mozillazine.org/userChrome.css *https://www.userchrome.org/how-create-userchrome-css.html *https://www.userchrome.org/what-is-userchrome-css.html <hr> <pre><nowiki>@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); /* only needed once */ /* TABS: on bottom */ #navigator-toolbox toolbar:not(#nav-bar):not(#toolbar-menubar) {-moz-box-ordinal-group:10} #TabsToolbar {-moz-box-ordinal-group:1000!important} #TabsToolbar { position: absolute !important; bottom: 0 !important; width: 100vw !important; } #tabbrowser-tabs { width: 100vw !important; } #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: 27px !important; /* adjust to suit your needs */ } :root #tabbrowser-tabs { --tab-min-height: 27px !important; /* needs to be the same as above under :root */ --tab-min-width: 80px !important; } #TabsToolbar { height: var(--tab-min-height) !important; margin-bottom: 1px !important; box-shadow: ThreeDShadow 0 -1px inset, -moz-dialog 0 1px !important; } #tabbrowser-tabs, #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 */ #navigator-toolbox[movingtab] > #titlebar > #TabsToolbar { padding-bottom: unset !important; } #navigator-toolbox[movingtab] #tabbrowser-tabs { padding-bottom: unset !important; margin-bottom: unset !important; } #navigator-toolbox[movingtab] > #nav-bar { margin-top: unset !important; } </nowiki></pre> </blockquote> This does not work correctly in MacOS because it moves the three colored buttons (red/yellow/green) that are supposed to go up at the very top left down into the page display area! Please see my question at https://support.mozilla.org/en-US/questions/1248595 for more information. EDIT: I found that if I added <blockquote><pre> .titlebar-buttonbox-container{ position: fixed; top:0; left:0; height: 0px; } </pre></blockquote> at the very bottom it sort of fixes the problem, although I have to add some spacers at the start of that line to keep them from overlapping the browser's back/forward buttons. I have no idea if the above is actually a correct fix, but at least it gets the buttons out of the page display area on my Mac. </blockquote> I have Macs, and this did not help me. The three necessary buttons were still down in the display window. Can someone familiar with Macs, please post the code that works with Macs. The code in this thread does not work for Macs.
jcooper11 0 solutions 2 answers

Well, this might not be of much help, but this did work for me, on a Mac. I use OS10.14.3 on a MacBook Pro, with Firefox 65.0. I used exactly the text that was suggested, including the first line that starts w/ @namespace. The red/yellow/green buttons are in their normal position in the upper left corner. The text is in my userChrome.css file, which sits in ... Drive:Users:myname:Library:Application Support:Firefox:Profiles:goofynameDOTdefaultDASHmanynumbers:chrome:userChrome.css

Well, this might not be of much help, but this did work for me, on a Mac. I use OS10.14.3 on a MacBook Pro, with Firefox 65.0. I used exactly the text that was suggested, including the first line that starts w/ @namespace. The red/yellow/green buttons are in their normal position in the upper left corner. The text is in my userChrome.css file, which sits in ... Drive:Users:myname:Library:Application Support:Firefox:Profiles:goofynameDOTdefaultDASHmanynumbers:chrome:userChrome.css