X
Bakstelėkite čia, kad pereitumėte į mobiliąją šios svetainės versiją.

Pagalbos forumas

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

Paskelbta

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

EDIT: I've updated the code to work with recent Firefox builds (tested with Fx 65-71).


You can adjust the two --tab-min-height definition under the Height section to suit your needs (default:33px; compact:29px; touch:43px). There are a few more variables that may need adjustment.

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


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

/* TABS: on bottom - Firefox 65 and later */

#navigator-toolbox toolbar:not(#nav-bar):not(#toolbar-menubar) {
  -moz-box-ordinal-group: 10 !important;
}

#TabsToolbar {
  -moz-box-ordinal-group: 1000 !important;
  display: block !important;
  position: absolute !important;
  bottom: 0 !important;
/* width: 100vw !important; */
}

:root[tabsintitlebar]:not([inFullscreen="true"]):not([sizemode="maximized"])
 #toolbar-menubar[autohide="true"] ~ #TabsToolbar{
  bottom: var(--tab-min-height) !important;
  padding-top: calc(var(--tab-min-height) - 20px) !important; /* may need adjustment */
}

#tabbrowser-tabs {
  width: 100vw !important;
}

:root:not([chromehidden*="toolbar"]) #navigator-toolbox {
  padding-bottom: calc(var(--tab-min-height) + 1px); /* may need adjustment */
}

/* TABS: height */
:root {
  --tab-toolbar-navbar-overlap: 0px !important;
  --tab-min-height: 25px !important; /* adjust */
}

:root #tabbrowser-tabs {
  --tab-min-width: 80px !important; /* adjust */
}

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

#TabsToolbar {
  height: var(--tab-min-height) !important;
  margin-bottom: 1px !important;
  box-shadow: ThreeDShadow 0 -1px inset, -moz-dialog 0 1px !important; /* omit */
  background-color: var(--toolbar-bgcolor) !important;
  color: var(--toolbar-color) !important;
}

/* indicators */
.private-browsing-indicator {display: none !important;}
.accessibility-indicator    {display: none !important;}

/* drag space */
.titlebar-spacer[type="pre-tabs"],
.titlebar-spacer[type="post-tabs"] {
  width: 20px !important;
}

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

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

/* caption box - hide */
:root[tabsintitlebar]:not([inFullscreen="true"])
 #toolbar-menubar[autohide="true"] ~
  #TabsToolbar .titlebar-buttonbox-container {display: none !important;}
Skaityti atsakymą kartu su kontekstu 12
cor-el
  • Top 10 Contributor
  • Moderator
Sprendimų: 17580 Atsakymų: 159069

Chosen Solution

EDIT: I've updated the code to work with recent Firefox builds (tested with Fx 65-71).


You can adjust the two --tab-min-height definition under the Height section to suit your needs (default:33px; compact:29px; touch:43px). There are a few more variables that may need adjustment.

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


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

/* TABS: on bottom - Firefox 65 and later */

#navigator-toolbox toolbar:not(#nav-bar):not(#toolbar-menubar) {
  -moz-box-ordinal-group: 10 !important;
}

#TabsToolbar {
  -moz-box-ordinal-group: 1000 !important;
  display: block !important;
  position: absolute !important;
  bottom: 0 !important;
/* width: 100vw !important; */
}

:root[tabsintitlebar]:not([inFullscreen="true"]):not([sizemode="maximized"])
 #toolbar-menubar[autohide="true"] ~ #TabsToolbar{
  bottom: var(--tab-min-height) !important;
  padding-top: calc(var(--tab-min-height) - 20px) !important; /* may need adjustment */
}

#tabbrowser-tabs {
  width: 100vw !important;
}

:root:not([chromehidden*="toolbar"]) #navigator-toolbox {
  padding-bottom: calc(var(--tab-min-height) + 1px); /* may need adjustment */
}

/* TABS: height */
:root {
  --tab-toolbar-navbar-overlap: 0px !important;
  --tab-min-height: 25px !important; /* adjust */
}

:root #tabbrowser-tabs {
  --tab-min-width: 80px !important; /* adjust */
}

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

#TabsToolbar {
  height: var(--tab-min-height) !important;
  margin-bottom: 1px !important;
  box-shadow: ThreeDShadow 0 -1px inset, -moz-dialog 0 1px !important; /* omit */
  background-color: var(--toolbar-bgcolor) !important;
  color: var(--toolbar-color) !important;
}

/* indicators */
.private-browsing-indicator {display: none !important;}
.accessibility-indicator    {display: none !important;}

/* drag space */
.titlebar-spacer[type="pre-tabs"],
.titlebar-spacer[type="post-tabs"] {
  width: 20px !important;
}

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

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

/* caption box - hide */
:root[tabsintitlebar]:not([inFullscreen="true"])
 #toolbar-menubar[autohide="true"] ~
  #TabsToolbar .titlebar-buttonbox-container {display: none !important;}
EDIT: I've updated the code to work with recent Firefox builds (tested with Fx 65-71). ---- You can adjust the two <b>--tab-min-height</b> definition under the Height section to suit your needs (default:33px; compact:29px; touch:43px). There are a few more variables that may need adjustment. 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"); /* TABS: on bottom - Firefox 65 and later */ #navigator-toolbox toolbar:not(#nav-bar):not(#toolbar-menubar) { -moz-box-ordinal-group: 10 !important; } #TabsToolbar { -moz-box-ordinal-group: 1000 !important; display: block !important; position: absolute !important; bottom: 0 !important; /* width: 100vw !important; */ } :root[tabsintitlebar]:not([inFullscreen="true"]):not([sizemode="maximized"]) #toolbar-menubar[autohide="true"] ~ #TabsToolbar{ bottom: var(--tab-min-height) !important; padding-top: calc(var(--tab-min-height) - 20px) !important; /* may need adjustment */ } #tabbrowser-tabs { width: 100vw !important; } :root:not([chromehidden*="toolbar"]) #navigator-toolbox { padding-bottom: calc(var(--tab-min-height) + 1px); /* may need adjustment */ } /* TABS: height */ :root { --tab-toolbar-navbar-overlap: 0px !important; --tab-min-height: 25px !important; /* adjust */ } :root #tabbrowser-tabs { --tab-min-width: 80px !important; /* adjust */ } #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; } #TabsToolbar { height: var(--tab-min-height) !important; margin-bottom: 1px !important; box-shadow: ThreeDShadow 0 -1px inset, -moz-dialog 0 1px !important; /* omit */ background-color: var(--toolbar-bgcolor) !important; color: var(--toolbar-color) !important; } /* indicators */ .private-browsing-indicator {display: none !important;} .accessibility-indicator {display: none !important;} /* drag space */ .titlebar-spacer[type="pre-tabs"], .titlebar-spacer[type="post-tabs"] { width: 20px !important; } /* 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; } /* windows controls - hide */ #TabsToolbar #window-controls {display: none !important;} /* caption box - hide */ :root[tabsintitlebar]:not([inFullscreen="true"]) #toolbar-menubar[autohide="true"] ~ #TabsToolbar .titlebar-buttonbox-container {display: none !important;} </nowiki></pre>

Modified by cor-el

Klausimą uždavęs asmuo

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

Thank you so much for the fast response. This works perfectly.
MainGoldDragon Sprendimų: 2 Atsakymų: 17

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 Sprendimų: 0 Atsakymų: 2

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 Sprendimų: 0 Atsakymų: 2

Naudingas atsakymas

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
Sprendimų: 5411 Atsakymų: 40308

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 Sprendimų: 0 Atsakymų: 2

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 Sprendimų: 0 Atsakymų: 14

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 Sprendimų: 0 Atsakymų: 2

Works for me. Thanks very much.

Works for me. Thanks very much.
MacOSuser Sprendimų: 0 Atsakymų: 2

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 Sprendimų: 0 Atsakymų: 3

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

Thanks , it worked. Now I have the tabs at the bottom again.
CatsinQ Sprendimų: 0 Atsakymų: 21

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 Sprendimų: 0 Atsakymų: 3

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 Sprendimų: 2 Atsakymų: 17

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 Sprendimų: 0 Atsakymų: 3

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 Sprendimų: 2 Atsakymų: 17

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.

Klausimą uždavęs asmuo

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 Sprendimų: 3 Atsakymų: 65

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 Sprendimų: 0 Atsakymų: 13

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 Sprendimų: 0 Atsakymų: 2

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