![Firefox logo](https://assets-prod.sumo.prod.webservices.mozgcp.net/media/uploads/products/2020-04-14-08-36-13-8dda6f.png)
Firefox 113 - tab bar moved to above tool bar
I've just installed Firefox 113.0 and my tab bar is now above the toolbar and bookmarks bar. Up until 112, the tab bar was below the bookmarks bar. I have no changed anything in UserChrome and in fact that file is still dated 2020. I've searched but haven't found an explanation. Anyone know what changed or is this just a bug? Thanks
Gekose oplossing
I'm not sure if you can make this code work properly with all toolbar combination. It works if I hide the menu bar and move the titlebar container to the bottom.
#titlebar { order: 2 !important; } /* main toolbar */ #nav-bar { order: 0 !important; border-top-width: 0px !important; } /* bookmarks toolbar */ #PersonalToolbar { order: 1 !important; } /* Tabs bar */ #TabsToolbar { order: 2 !important; }
Lees dié antwoord in konteks 👍 1
All Replies (14)
Firefox 113 continues the process of standardizing the user interface code and removing legacy elements. The latest change removed some proprietary properties (-moz-box-*) that were previously used to change the order of elements (up or down). You'll need to update your code.
How can you update your rules to start working again?
(1) Return to your original source. The person/site that provided the original code (often on Github) usually has already updated to account for the changes. These include the MrOtherGuy repository and Aris' CustomCSSforFx repository on Github.
(2) Ask for help on the FirefoxCSS subreddit. If you are a DIY coder, check out the sticky post with the technical background explanation, and if you want more help, try reading through the latest threads and/or starting a new one.
=> Sticky background thread: https://www.reddit.com/r/FirefoxCSS/comments/11odffm/psa_incoming_changes_to_default_element/
=> Latest discussions on r/FirefoxCSS: https://www.reddit.com/r/FirefoxCSS/new/
Thank you for your reply. I've been researching using what you sent as a starting point and while I've found entries with specifically my problem, none of their solutions has fixed mine. I will keep trying.
The userChrome.css code for doing that has to be updated so you should go to the site where you got it and update it.
What code are you using in userChrome.css ?
You can look at this thread for CSS code in userChrome.css for Firefox 112+ to move the tabs to below the Navigation Toolbar.
- /questions/1410524 FF 112 Tabs on the bottom beneath the bookmarks toolbar
Thank you all for your replies but it's still not working. I've gone into all the references and it seemed that the solution was to change -moz-box-ordinal-group: 0 -> order: -1 along with any other use of -moz-box-ordinal-group. I did that and no joy. Note that I have the appropriate about:config setting and Firefox is able to get to my userChrome.css because everything was fine up until 113. I've had this set for so long that I have no idea where I got it from. Here's what I have now. The top section is the sequence. Hopefully nothing else messes things up. The only other change I made was -moz-box -> display: flex What have I missed?
@namespace url(http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul); /* ^ The above line needs to be there. */ /* Use 10-point text for most of the interface */ * { font-size: 10pt !important; } /* Tab bar below Navigation & Bookmarks Toolbars /* /* For best results, show Title Bar or Menu Bar */ #titlebar { order: -1 !important; } /* main toolbar */ #nav-bar { order: 0 !important; border-top-width: 0px !important; } /* bookmarks toolbar */ #PersonalToolbar { order: 1 !important; } /* Tabs bar */ #TabsToolbar { order: 2 !important; } /* bookmark toolbar */ #personal-bookmarks .bookmark-item > .toolbarbutton-text { font-size:10pt !important; } #personal-bookmarks .bookmark-item > .toolbarbutton-icon { height:23px !important; width:18px !important; } #main-window[windowtype="navigator:browser"] { background-color: transparent !important; } /* width of tab when you have too many open tabs */ .tabbrowser-tab { min-width: 200px !important; max-width: 200px !important; } .tabbrowser-tab:not([fadein]) { max-width: 1px !important; min-width: 1px !important; max-width: 1px; min-width: 1px; } /* close button inside a tab */ .tab-close-button { width: 25px !important; height: 25px !important; } /* Close button on hover */ .tabbrowser-tab:not([selected]):not([pinned]) .tab-close-button { visibility: hidden !important; margin-left: -16px !important; } .tabbrowser-tab:not([selected]):not([pinned]):hover .tab-close-button { visibility: visible !important; margin-left: 0px !important; display: flex !important; }
Gewysig op
Don't know if it makes a difference but I'm running Firefox on a 2020 27" iMac with Ventura 13.3.1 (a).
Gekose oplossing
I'm not sure if you can make this code work properly with all toolbar combination. It works if I hide the menu bar and move the titlebar container to the bottom.
#titlebar { order: 2 !important; } /* main toolbar */ #nav-bar { order: 0 !important; border-top-width: 0px !important; } /* bookmarks toolbar */ #PersonalToolbar { order: 1 !important; } /* Tabs bar */ #TabsToolbar { order: 2 !important; }
If your code is from Mr Other Guy and you use the menu bar, you need his menu bar patch.
cor-el, thank you. The change you suggested did the trick for me. I guess I didn't understand exactly what the various entries meant. I'll keep this in mind if (when?) it gets changed again. Thank you again.
Update: Just an add-on. I don't know if it makes a difference, but since I'm on a Mac, the menubar is always on top of the monitor workspace. I don't think that can be changed. Thanks again.
Gewysig op
Thank you cor-el. Works just fine with Windows 10 running on an HP ProDesk 400.
I'm a 70 year old not-too-tech-savvy Grandma--replacing and saving userChrome.css file with this cut/paste text worked like a charm for me. Be sure to save a backup copy of the original by renaming, should you need to restore:
/* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/tabs_on_bottom.css made available under Mozilla Public License v. 2.0 See the above repository for updates as well as full license text. */ /* Modify to change window drag space width */ /* Use tabs_on_bottom_menubar_on_top_patch.css if you have menubar permanently enabled and want it on top */ /* IMPORTANT */ /* Get window_control_placeholder_support.css Window controls will be all wrong without it. Additionally on Linux, you may need to get: linux_gtk_window_control_patch.css */ :root{ --uc-titlebar-padding: 0px; } @media (-moz-os-version: windows-win10){ :root[sizemode="maximized"][tabsintitlebar]{ --uc-titlebar-padding: 8px } } #toolbar-menubar[autohide="true"] > .titlebar-buttonbox-container, #TabsToolbar > .titlebar-buttonbox-container{ position: fixed; display: block; top: var(--uc-titlebar-padding,0px); right:0; height: 40px; } /* Mac specific. You should set that font-smoothing pref to true if you are on any platform where window controls are on left */ u/supports -moz-bool-pref("layout.css.osx-font-smoothing.enabled"){ :root{ --uc-titlebar-padding: 0px !important } .titlebar-buttonbox-container{ left:0; right: unset !important; } } :root[uidensity="compact"] #TabsToolbar > .titlebar-buttonbox-container{ height: 32px } #toolbar-menubar[inactive] > .titlebar-buttonbox-container{ opacity: 0 } #navigator-toolbox{ padding-top: var(--uc-titlebar-padding,0px) !important; } .titlebar-buttonbox-container > .titlebar-buttonbox{ height: 100%; } #titlebar{ order: 2; -moz-appearance: none !important; --tabs-navbar-shadow-size: 0px; } .titlebar-placeholder, #TabsToolbar .titlebar-spacer{ display: none; } /* Also hide the toolbox bottom border which isn't at bottom with this setup */ #navigator-toolbox::after{ display: none !important; } @media (-moz-gtk-csd-close-button){ .titlebar-button{ flex-direction: column } } /* These exist only for compatibility with autohide-tabstoolbar.css */ toolbox#navigator-toolbox > toolbar#nav-bar.browser-toolbar{ animation: none; } #navigator-toolbox:hover #TabsToolbar{ animation: slidein ease-out 48ms 1 } /* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/tabs_on_bottom_menubar_on_top_patch.css made available under Mozilla Public License v. 2.0 See the above repository for updates as well as full license text. */ /* Menubar on top patch - use with tabs_on_bottom.css */ /* Only really useful if menubar is ALWAYS visible */ :root{ --uc-window-control-width: 0px !important } #navigator-toolbox{ padding-top: calc(29px + var(--uc-titlebar-padding,0px)) !important } #toolbar-menubar{ position: fixed; display: flex; top: var(--uc-titlebar-padding,0px); height: 29px; width: 100%; overflow: hidden; } #toolbar-menubar > .titlebar-buttonbox-container{ height: 29px; order: 100; } #toolbar-menubar > [flex]{ flex-grow: 100; } #toolbar-menubar > spacer[flex]{ order: 99; flex-grow: 1; min-width: var(--uc-window-drag-space-width,20px); } #toolbar-menubar .titlebar-button{ padding: 2px 17px !important; } #toolbar-menubar .toolbarbutton-1 { --toolbarbutton-inner-padding: 3px } /* TABS: height */*|*:root { --tab-toolbar-navbar-overlap: 0px !important; --tab-min-height: 25px !important; --tab-min-width: 80px !important; #tabbrowser-tabs { width: 100vw !important; } #main-window:not([chromehidden*="toolbar"]) #navigator-toolbox {padding-bottom: var(--tab-min-height) !important;} .tab-background { border-radius: 8px 8px 0px 0px !important; border-image: none !important; } .tab-line { display: none; } .tab-close-button { color: red!important; } /* Outline inactive tabs */ @media (-moz-proton) { .tab-background:not([selected=true]):not([multiselected=true]) { border: 1px solid rgba(0, 0, 0, .10) !important; } }
Gewysig op
This is the UserChrome CSS customization I use (sourced from another author, not me) to put the Tab Bar below everything else. (But see the screenshot in the image below for what the code should look like; it seems that Firefox is messing with my formatting, and replacing # with 1.[space] - sorry about that.)
/* Tab bar BELOW Navigation & Bookmarks Toolbars with DISPLAYED Bookmarks Toolbar */ #navigator-toolbox, #nav-bar, #PersonalToolbar { position: relative; } #navigator-toolbox { height: 105px !important; } #TabsToolbar { /* tabs bar */ padding-top: 65px !important; } #toolbar-menubar[autohide="false"] ~ #TabsToolbar { /* tabs bar */ padding-top: 46px !important; } #nav-bar { /* main toolbar */ box-shadow: none !important; margin-top: -104px !important; }
Gewysig op
Please delete this post
Gewysig op
Susanoz, thank you.
I just saved the code you posted as my new userchrome.css and it worked like a charm.
We'll see how long this fix works.
After v111 broke Tabs on Bottom, I had to scrounge around the Web for a fix. (Which I found at Mr Other Guy -- and somehow I can't find it on that site again.)
What continues to amaze me is how Mozilla, imperious to things its users actually want, still flatly refuses to offer "Tabs on Bottom" as a Preference option. (Don't even think about making it the default as it is in Safari.) Instead it blows its money on things like "Pocket," which I tried and found useless.