Firefox 133 update moved tab location, again.
I prefer the tabs be below the bookmark bar, and successfully modified the CSS file to do this some time back. Now update 133 has once again pushed them up below the menu bar. What do I have to do to get them back where I want them this time? And why can't you just leave the tab location preference alone when doing updates?
Chosen solution
This code in userChrome.css should be sufficient in current (and some older) releases.
/* ADDED: compatibility with vertical tabs*/ @media not (-moz-bool-pref: "sidebar.verticalTabs"){ /* TABS: POSITION - below NavBar */ #TabsToolbar { /*display: block !important; */ /* not needed in 113+ */ position: absolute !important; bottom: 0; width: 100vw !important; } /*[65-107]*//* #tabbrowser-tabs {width: 100vw !important;} */ /* navigator-toolbox: PADDING - reserve space */ :root:not([chromehidden*="toolbar"]) #navigator-toolbox { position: relative !important; /*89+*/ padding-bottom: calc(var(--tab-min-height) + 1px) !important; /*ADJUST*/ background-color: var(--toolbar-bgcolor) !important; /*OPTIONAL*/ } /* Window Controls */ #TabsToolbar #window-controls {display: none !important;} /* INDICATORS - HIDE */ .private-browsing-indicator {display: none !important;} .accessibility-indicator {display: none !important;} } /* END : @media */Skaityti atsakymą kartu su kontekstu 👍 3
All Replies (15)
You can check if there is an update available from the creator of your CSS code, there might be a link in the code where you can get the latest version.
You can set this pref to false in about:config to disable userChrome.css and userContent.css.
- about:config => toolkit.legacyUserProfileCustomizations.stylesheets => false
- https://support.mozilla.org/en-US/kb/about-config-editor-firefox
This worked for me:
/* 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 {
display: block !important; position: absolute !important; bottom: 0 !important; width: 100vw !important;
}
- main-window:not([chromehidden*="toolbar"]) #navigator-toolbox {
padding-bottom: var(--tab-min-height) !important;
}
- tabbrowser-tabs {
width: 100vw !important;
}
- TabsToolbar #window-controls {
display: none !important;
}
Cor-el - Last update regarding tabs on userChrome.org was the one I used for versions before 133, that's stopped working.
Minnie - When I copined your recommendation, the "1. " in front of some lines didn't copy. Do they need to be there? Tried pasting your recommendation into userChrome.css without them and the tabs still come out on top. Did you change anything else, besides adding the code you suggested?
PIckAnotherID said
Cor-el - Last update regarding tabs on userChrome.org was the one I used for versions before 133, that's stopped working.
Sorry, I don't maintain code for moving tabs because it changes too often. You can try code you find here, or one of these two major repositories:
- MrOtherGuy: https://github.com/MrOtherGuy/firefox-csshacks
- Aris: https://github.com/Aris-t2/CustomCSSforFx/
For personal assistance with userChrome.css questions, I suggest this subreddit: https://www.reddit.com/r/FirefoxCSS/
As for why there need to be changes at all, the Firefox interface was built using proprietary code rather than standard HTML and CSS, and over time, they are modernizing different parts of it. For custom CSS purposes, it certainly would have been convenient if that were done all at once, but too late now.
Chosen Solution
This code in userChrome.css should be sufficient in current (and some older) releases.
/* ADDED: compatibility with vertical tabs*/ @media not (-moz-bool-pref: "sidebar.verticalTabs"){ /* TABS: POSITION - below NavBar */ #TabsToolbar { /*display: block !important; */ /* not needed in 113+ */ position: absolute !important; bottom: 0; width: 100vw !important; } /*[65-107]*//* #tabbrowser-tabs {width: 100vw !important;} */ /* navigator-toolbox: PADDING - reserve space */ :root:not([chromehidden*="toolbar"]) #navigator-toolbox { position: relative !important; /*89+*/ padding-bottom: calc(var(--tab-min-height) + 1px) !important; /*ADJUST*/ background-color: var(--toolbar-bgcolor) !important; /*OPTIONAL*/ } /* Window Controls */ #TabsToolbar #window-controls {display: none !important;} /* INDICATORS - HIDE */ .private-browsing-indicator {display: none !important;} .accessibility-indicator {display: none !important;} } /* END : @media */
Modified
Cor-el - That did the trick! Thank you very much.
PIckAnotherID said
Minnie - When I copined your recommendation, the "1. " in front of some lines didn't copy. Do they need to be there?
That's a quirk of the markup this forum uses. If you type a line starting with a hash (#) it thinks you are starting a numbered list and changes it to "1." You need to change the "1."s to "#"s
To make a line like "#tabbrowser-tabs {" display correctly you actually need to type "#tabbrowser-tabs {"
This text did move the tabs back to the bottom, but is there a way to add text to move the bookmarks toolbar back to under the menu bar ... THANKS!
The Bookmarks Toolbar should by default be under Menu bar and the Navigation Toolbar, i.e. between the Navigation Toolbar and the Tab bar if you have moved the Tab bar to the lower position. Do you still have CSS code that affects the order of Bookmarks Toolbar?
#PersonalToolbar {order:xx}
Um, I'm looking to have the bookmarks toolbar immediately under the menu bar ...and above what I called the Address Bar and what I think you refer to as the Navigation Bar. I don't know where to get code that affects the order of the Bookmarks Toolbar. The Bookmarks Toolbar is now immediately above the Tabs bar and under the Navigation Bar.and it's very tight. So, the order from top top bottom should be : Menu Bar -- Bookmark Toolbar -- Navigation Bar -- Tabs Bar. Any help would really be appreciated.
You can try to add this rule:
#nav-bar {order:1}
Yes, this worked! Thank you so much!
Note that tabs below the Navigation Toolbar isn't compatible with vertical tabs, available via the revamp sidebar settings.
Thanks for the heads up! Not an issue for me, I'm happy that my settings are now restored to where they were before the Firefox Update. Hoping they quit this soon, it's really painful! Thank you again for all the help!
I've seen the update comments with added strings. Can someone post the complete code to cut/paste into the Chrome shortcut, please? Much obliged.