X
Nhấn vào đây để đến phiên bản di động của trang web.

Diễn đàn trợ giúp

Chủ đề này đã đóng và được lưu lại. Vui lòng hỏi một câu hỏi mới nếu bạn cần giúp đỡ.

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

Được đăng

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''

Được chỉnh sửa bởi the-edmeister vào

Giải pháp được chọn

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;}
Đọc câu trả lời này trong ngữ cảnh 12

Chi tiết hệ thống bổ sung

Phần bổ trợ đã cài đặt

  • Shockwave Flash 32.0 r0

Ứng dụng

  • Chuỗi đại diện người dùng: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:65.0) Gecko/20100101 Firefox/65.0

Thông tin chi tiết

cor-el
  • Top 10 Contributor
  • Moderator
17415 giải pháp 157320 câu trả lời
Được đăng

Giải pháp được chọn

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>

Được chỉnh sửa bởi cor-el vào

Người tạo câu hỏi

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

Thank you so much for the fast response. This works perfectly.
MainGoldDragon 2 giải pháp 17 câu trả lời
Được đăng

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 giải pháp 2 câu trả lời
Được đăng

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 giải pháp 2 câu trả lời
Được đăng

Câu trả lời hữu ích

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
5395 giải pháp 40084 câu trả lời
Được đăng

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 giải pháp 2 câu trả lời
Được đăng

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 giải pháp 14 câu trả lời
Được đăng

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

Được chỉnh sửa bởi Davezed vào

jcooper11 0 giải pháp 2 câu trả lời
Được đăng

Works for me. Thanks very much.

Works for me. Thanks very much.
MacOSuser 0 giải pháp 2 câu trả lời
Được đăng

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.

Được chỉnh sửa bởi MacOSuser vào

thorbjornw 0 giải pháp 3 câu trả lời
Được đăng

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 0 giải pháp 19 câu trả lời
Được đăng

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 giải pháp 3 câu trả lời
Được đăng

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 giải pháp 17 câu trả lời
Được đăng

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 giải pháp 3 câu trả lời
Được đăng

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 giải pháp 17 câu trả lời
Được đăng

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.

Người tạo câu hỏi

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.

Được chỉnh sửa bởi carrotwaffle vào

jorb 3 giải pháp 54 câu trả lời
Được đăng

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 giải pháp 13 câu trả lời
Được đăng

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 giải pháp 2 câu trả lời
Được đăng

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