Firefox 133 Toolbars - Tabs on Bottom - Updated Nov 24
Make Firefox Great Again: The Return of Proper Toolbars
Ah, November 2024: the month when Mozilla once again decided to “innovate” by breaking what wasn’t broken in Firefox. Tabs on top? Gone. The toolbar positions we cherished? Chaos. But fear not, my fellow Firefox fans, for we have the workaround to restore the glory of our favourite browser.
Can someone please tell Mozilla that we need a simple setting to toggle these toolbar positions instead of forcing us to dive into the coding trenches? Seriously, why should we be the ones doing the heavy lifting here? Are we web developers, or just people who like their tabs where they belong?
But I digress. Let’s roll up our sleeves, channel our inner coders, and Make Firefox Great Again!
Tabs on Top – URL on Bottom (before adding code)
Tabs on Bottom – URL on Top - (Correct way!)
The Fix: How to Restore the Glory of Your Firefox Toolbars
Here’s how to restore your Firefox to the functional beauty we know and love.
Locate your userChrome.css
- First, you need to enable the
userChrome.cssfile. If you’ve done this before, you’re probably already muttering, “Here we go again…” - Click ‘Help’ > ‘More troubleshooting information’ > Profile folder – ‘Open folder’
- Navigate to your Firefox profile folder.
- Inside, create a folder named
chromeif it doesn’t exist.
- First, you need to enable the
Add the Magic Code
Inside the
chromefolder, create a file nameduserChrome.css. (Feel free to mumble, “Thanks for the extra work, Mozilla.”)Paste the following code into your
userChrome.cssfile:SAVE and exit Firefox.
- Restart Firefox
Celebrate Victory
- Bask in the glory of your perfectly placed tabs and toolbars. Maybe even tweet at Mozilla with the hashtag #TabsOnBottom to remind them who’s really in charge.
/*Additions by Codehaven - Mike to change specific sizes*/
/* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/tabs_on_bottom_v2.css made available under Mozilla Public License v. 2.0
See the above repository for updates as well as full license text. */
/* This reorders toolbar to place tabs below other toolbars. Requires Firefox 133+ */
@media (-moz-bool-pref: "userchrome.force-window-controls-on-left.enabled"){
#nav-bar > .titlebar-buttonbox-container{
order: -1 !important;
> .titlebar-buttonbox{
flex-direction: row-reverse;
}
}
}
@media not (-moz-bool-pref: "sidebar.verticalTabs"){
.global-notificationbox,
#tab-notification-deck,
#TabsToolbar{
order: 1;
}
#TabsToolbar > :is(.titlebar-spacer,.titlebar-buttonbox-container){
display: none;
}
:root[sizemode="fullscreen"] #nav-bar > .titlebar-buttonbox-container{
display: flex !important;
}
:root[tabsintitlebar] #toolbar-menubar:not([autohide="false"]) ~ #nav-bar{
> .titlebar-buttonbox-container{
display: flex !important;
}
:root[sizemode="normal"] & {
> .titlebar-spacer{
display: flex !important;
}
}
:root[sizemode="maximized"] & {
> .titlebar-spacer[type="post-tabs"]{
display: flex !important;
}
@media (-moz-bool-pref: "userchrome.force-window-controls-on-left.enabled"),
(-moz-gtk-csd-reversed-placement),
(-moz-platform: macos){
> .titlebar-spacer[type="post-tabs"]{
display: none !important;
}
> .titlebar-spacer[type="pre-tabs"]{
display: flex !important;
}
}
}
}
}
/* Adjust the height of the Tabs Toolbar */
#TabsToolbar {
height: 32px !important; /* Neater toolbar height */
min-height: 32px !important;
max-height: 32px !important;
margin: 10px 0 -5px 0 !important;
padding: 0 !important;
font-size: 14px !important;
}
/* Adjust tab height to match the toolbar */
#TabsToolbar .tabbrowser-tab {
height: 36px !important; /* Matches toolbar for a balanced look */
padding: 0 4px !important; /* Adds slight spacing between tabs */
}
/* Center align tab content */
#TabsToolbar .tab-label {
line-height: 34px !important; /* Align text with tab height */
margin: 0 !important;
}
/* Smaller close button for a cleaner appearance */
#TabsToolbar .tab-close-button {
height: 14px !important; /* Smaller close button */
width: 14px !important; /* Proportional width */
margin: 0 2px !important; /* Adjust spacing around the button */
padding: 0 !important;
}
/* Prevent overflow and ensure neat alignment */
.tabbrowser-tab .tab-stack {
margin: 0 !important;
padding: 0 !important;
}
/* Adjust tab icon size */
#TabsToolbar .tab-icon-image {
height: 18px !important; /* Matches the smaller close button */
width: 18px !important;
}
The Bigger Picture: Mozilla, Are You Listening?
Let’s be honest here: we, the users, are the backbone of Firefox. We’re the ones sticking with you, Mozilla, while Chrome lures people away with its shiny, minimalist appeal. We deserve better than having to dig around in hidden files and write CSS just to keep our tabs in the right place.
Why not add an easy setting for this in preferences? Call it the “Tabs Where You Want ‘Em” toggle or something. Make it simple for users who just want a browser that works the way they want it to.
“Make Firefox Great Again” Merchandise?
Why stop at fixing toolbars? Let’s get T-shirts printed: “Tabs On Bottom Or We Riot!” Or how about bumper stickers: “I Brake for Proper Toolbars.” Together, we can spread the word and bring the tab-revolution to the masses!
Until Mozilla listens to us, though, we’ll be here with our userChrome.css files, fighting the good fight. Because when it comes to browsers, we don’t just settle—we innovate.
Stay strong, Firefox warriors. Together, we’ll keep making Firefox great again, one toolbar at a time.
If I have saved you time, or you just wish to help a programmer in need, feel free to buy me a beer! Click the link and support me.
