What content is required in userChrome.css to move the tabs bar under all other bars?
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.
Modified by cor-el
Chosen solution
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.
Read this answer in context 👍 1All Replies (4)
Chosen Solution
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.
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.
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); }
Modified by Sadi
it works in v.92. I have used much more sophisticated CSS, that is so simple and so efficient , thanks.