搜尋 Mozilla 技術支援網站

防止技術支援詐騙。我們絕對不會要求您撥打電話或發送簡訊,或是提供個人資訊。請用「回報濫用」功能回報可疑的行為。

了解更多

What content is required in userChrome.css to move the tabs bar under all other bars?

  • 4 回覆
  • 1 有這個問題
  • 1 次檢視
  • 最近回覆由 sebqas

more options

Every solution which I have found for Firefox 89 "Proton" so far which moves the Tabs Bar below the Navigation Bar (AKA "address bar"), with the Menu Bar above it, does NOT move the Tabs Bar below the Bookmarks Bar. The Bookmarks Bar appears to be overwritten and blank, and occupies space below the Menu Bar, Navigation Bar, and Tabs Bar. This empty space separates the three bars which are implemented and the content of the currently-selected tab below it.

Currently, my userChrome.css file is a copy posted by Cor-el (?):


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

/* TABS: below nav-bar - fixed for 108+,113+ */

/* ROOT -variables */
*|*:root {
  --tab-toolbar-navbar-overlap: 0px !important;
  
  --tab-min-height: 25px !important; /*override density*/
  --tab-min-width:  80px !important; /*override default*/
}

/* TABS: below nav-bar - no longer needed in 113+ *//*
#navigator-toolbox toolbar:not(#nav-bar):not(#toolbar-menubar) {
  -moz-box-ordinal-group: 10 !important;
  order: 10 !important;
}
#TabsToolbar {
  -moz-box-ordinal-group: 1000 !important;
  order: 1000 !important;
}
*/

/* TABS: position */
#TabsToolbar {
  display: block !important;
  position: absolute !important;
  bottom: 0 !important;
  width: 100vw !important;
}

/* for 107 and lower - disable this rule in 108 and newer *//*
#tabbrowser-tabs {
  width: 100vw !important;
} */

/* navigator-toolbox: PADDING */
*|*:root:not([chromehidden*="toolbar"]) #navigator-toolbox {
  padding-bottom: calc(var(--tab-min-height) + 1px) !important; /*ADJUST*/
  position: relative !important;
}

/* TABS: HEIGHT */
#tabbrowser-tabs,
#tabbrowser-arrowscrollbox,
#tabbrowser-tabs .tabbrowser-tab {
  min-height: var(--tab-min-height) !important;
  max-height: var(--tab-min-height) !important;
}

#tabbrowser-tabs,
.tab-stack,
.tab-content {
  height: var(--tab-min-height) !important;
}

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

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

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

/* caption buttons on tab bar - hide */
*|*:root[tabsintitlebar]:not([inFullscreen="true"])
 #toolbar-menubar[autohide="true"] ~ #TabsToolbar
 .titlebar-buttonbox-container {display: none !important;}
________________________________________________________________________________________________

Evidently, the text editor for this website does several things to the above original text that, frankly, seem unnecessary and undesirable. The .CSS file is just an unformatted text file, so what is the problem with simply copying its contents and pasting it in to the body of this post?

Which is also to say that I do NOT have a clue as to what any line in the file is meant to do, what effect it has, why it is even in the file at all, or why it is written in the way that it is. So DO NOT tell me that I "CAN" create a Cascading Style Sheet on my own when I cannot even modify one that has been provided.

On the face of it, something is missing from the above CSS text. What change needs to be made to the above content so that the Bookmark Bar will appear between the Navigation Bar and the Tabs Bar??

Thank-you very much for your time and attention to this request for assistance.

Every solution which I have found for Firefox 89 "Proton" so far which moves the Tabs Bar below the Navigation Bar (AKA "address bar"), with the Menu Bar above it, does NOT move the Tabs Bar below the Bookmarks Bar. The Bookmarks Bar appears to be overwritten and blank, and occupies space below the Menu Bar, Navigation Bar, and Tabs Bar. This empty space separates the three bars which are implemented and the content of the currently-selected tab below it. Currently, my userChrome.css file is a copy posted by Cor-el (?): ---- <pre><nowiki>@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); /* TABS: below nav-bar - fixed for 108+,113+ */ /* ROOT -variables */ *|*:root { --tab-toolbar-navbar-overlap: 0px !important; --tab-min-height: 25px !important; /*override density*/ --tab-min-width: 80px !important; /*override default*/ } /* TABS: below nav-bar - no longer needed in 113+ *//* #navigator-toolbox toolbar:not(#nav-bar):not(#toolbar-menubar) { -moz-box-ordinal-group: 10 !important; order: 10 !important; } #TabsToolbar { -moz-box-ordinal-group: 1000 !important; order: 1000 !important; } */ /* TABS: position */ #TabsToolbar { display: block !important; position: absolute !important; bottom: 0 !important; width: 100vw !important; } /* for 107 and lower - disable this rule in 108 and newer *//* #tabbrowser-tabs { width: 100vw !important; } */ /* navigator-toolbox: PADDING */ *|*:root:not([chromehidden*="toolbar"]) #navigator-toolbox { padding-bottom: calc(var(--tab-min-height) + 1px) !important; /*ADJUST*/ position: relative !important; } /* TABS: HEIGHT */ #tabbrowser-tabs, #tabbrowser-arrowscrollbox, #tabbrowser-tabs .tabbrowser-tab { min-height: var(--tab-min-height) !important; max-height: var(--tab-min-height) !important; } #tabbrowser-tabs, .tab-stack, .tab-content { height: var(--tab-min-height) !important; } /* TABS: APPEARANCE */ #TabsToolbar { height: var(--tab-min-height) !important; margin-bottom: 1px !important; box-shadow: ThreeDShadow 0 -1px inset, -moz-dialog 0 1px !important; /*OPTIONAL*/ background-color: var(--toolbar-bgcolor) !important; color: var(--toolbar-color) !important; } /* indicators - hide */ .private-browsing-indicator {display: none !important;} .accessibility-indicator {display: none !important;} /* window controls in full screen - hide*/ #TabsToolbar #window-controls {display: none !important;} /* caption buttons on tab bar - hide */ *|*:root[tabsintitlebar]:not([inFullscreen="true"]) #toolbar-menubar[autohide="true"] ~ #TabsToolbar .titlebar-buttonbox-container {display: none !important;} </nowiki></pre> ________________________________________________________________________________________________ Evidently, the text editor for this website does several things to the above original text that, frankly, seem unnecessary and undesirable. The .CSS file is just an unformatted text file, so what is the problem with simply copying its contents and pasting it in to the body of this post? Which is also to say that I do NOT have a clue as to what any line in the file is meant to do, what effect it has, why it is even in the file at all, or why it is written in the way that it is. So DO NOT tell me that I "CAN" create a Cascading Style Sheet on my own when I cannot even modify one that has been provided. On the face of it, something is missing from the above CSS text. What change needs to be made to the above content so that the Bookmark Bar will appear between the Navigation Bar and the Tabs Bar?? Thank-you very much for your time and attention to this request for assistance.

由 cor-el 於 修改

被選擇的解決方法

Just checking to make sure you set the preference toolkit.legacyUserProfileCustomizations.stylesheets to true in about:config ?

Also, make sure that browser.tabs.drawInTitlebar is set to false in about:config.

Here is a source of css for bottom tabs that worked for me: https://www.reddit.com/r/FirefoxCSS/comments/nq2d0q/tabs_on_bottom_for_firefox_89/

If you're not sure how to set up the userChrome file, there is a tutorial, follow the section that says 'Create the userChrome.css' https://www.reddit.com/r/FirefoxCSS/comments/73dvty/tutorial_how_to_create_and_livedebug_userchromecss/

Hope this helps. Good luck.

從原來的回覆中察看解決方案 👍 1

所有回覆 (4)

more options

選擇的解決方法

Just checking to make sure you set the preference toolkit.legacyUserProfileCustomizations.stylesheets to true in about:config ?

Also, make sure that browser.tabs.drawInTitlebar is set to false in about:config.

Here is a source of css for bottom tabs that worked for me: https://www.reddit.com/r/FirefoxCSS/comments/nq2d0q/tabs_on_bottom_for_firefox_89/

If you're not sure how to set up the userChrome file, there is a tutorial, follow the section that says 'Create the userChrome.css' https://www.reddit.com/r/FirefoxCSS/comments/73dvty/tutorial_how_to_create_and_livedebug_userchromecss/

Hope this helps. Good luck.

more options

Thank-you, Lisi, for your reply! I checked the settings in about:config and they were correct, probably because I have been using a userChrome.css file to place the Tab Bar beneath the other bars for a very, very long time. :-) The one to which you linked on Reddit worked perfectly for me, and it looks really good, too. Again, I appreciate your help.

more options

I don't understand why people who have CSS skills write so much code when simply one or two lines seem to do the job, i.e. merely changing the order of those bars so that the tab bar is below all the others and immediately above the web page of the current tab.

In this case, all I needed was to enter this into my userChrome.css file: #titlebar { -moz-box-ordinal-group: 2; } Optionally; 1) To make the tab bar narrower than the default height: *|*:root { --tab-min-height: 22px !important; } 2) Only when displaying the menu bar as well: #navigator-toolbox { padding-top: calc(29px + var(--uc-titlebar-padding,0px)) !important; } #toolbar-menubar { position: fixed; display: flex; top: var(--uc-titlebar-padding,0px); }

由 Sadi 於 修改

more options

it works in v.92. I have used much more sophisticated CSS, that is so simple and so efficient , thanks.