![Firefox logo](https://assets-prod.sumo.prod.webservices.mozgcp.net/media/uploads/products/2020-04-14-08-36-13-8dda6f.png)
Tabs on Bottom broke again
Hi
Well Firefox did it again. I had tabs on the bottom where I wanted them and they broke this again in the update I just got.
Any idea how to move them back down to the bottom? This is the userchrome.css coding I was using that worked fine before the update
@import url(userChrome-color_bookmark_folders_Proton89.css);
/* 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: 35px; } /* Mac specific. You should set that font-smoothing pref to true if you are on any platform where window controls are on left */ @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: 30px }
- 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{
-moz-box-ordinal-group: 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{ -moz-box-orient: vertical } }
/* 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: 25px; 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: 20px !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; }
Modified
الحل المُختار
Does it look like this:
https://github.com/MrOtherGuy/firefox-csshacks/issues/262
If you have a Github account, you can post an issue there.
Read this answer in context 👍 1All Replies (10)
You need to go to Mr OG's site and download the new version.
Terry said
You need to go to Mr OG's site and download the new version.
Unfortunately the one he has doesn't work properly as what happens is it moves the tabs to the bottom but it also takes the menu bar along with it so this is the order I want and had yesterday prior to the update
Menu Bar Search/URL Bar Bookmarks bar Tabs bar
but the code he has for tabs on bottom does it this way
Search/URL Bar Bookmarks bar Menu Bar Tabs bar
I would be fine with it if the menu bar didn't move with the tabs.
Another user mentioned this over on r/FirefoxCSS:
Actually, you might need to return to the full thread for fuller context, but I think it's the same issue.
jscher2000 - Support Volunteer said
Another user mentioned this over on r/FirefoxCSS: https://www.reddit.com/r/FirefoxCSS/comments/13dfxh8/once_again_my_tabs_are_at_the_top_and_bookmarks/jjkeg0j/ Actually, you might need to return to the full thread for fuller context, but I think it's the same issue.
Tried the patch which is what is suggested if I want the menu bar at the top but it seems to drag the tabs back with it it's like this new update for FF has the menubar and tabs glued together.
If you use the rule set from It_Was_The_Other_Guy, you can post your question there to him. Unfortunately, I don't have time to install and test his various rules to see where you need to make the change.
jscher2000 - Support Volunteer said
If you use the rule set from It_Was_The_Other_Guy, you can post your question there to him. Unfortunately, I don't have time to install and test his various rules to see where you need to make the change.
i'll have to create a reddit account then as don't have one.
الحل المُختار
Does it look like this:
https://github.com/MrOtherGuy/firefox-csshacks/issues/262
If you have a Github account, you can post an issue there.
jscher2000 - Support Volunteer said
Does it look like this: https://github.com/MrOtherGuy/firefox-csshacks/issues/262 If you have a Github account, you can post an issue there.
You're a gem that did the trick as I tried something with that and what I was getting and tabs are back now on the bottom as are the menu bar at top.
Thanks as always!!
And in case it helps anyone else out this was my final code including the menu on top patch.
/* 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. */
/* 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 Use tabs_on_bottom_menubar_on_top_patch.css if you have menubar permanently enabled and want it on top
- /
- toolbar-menubar[autohide="true"] > .titlebar-buttonbox-container,
- TabsToolbar > .titlebar-buttonbox-container{
position: fixed; display: block; top: 0px; right:0; height: 40px;
} @media (-moz-gtk-csd-reversed-placement),
(-moz-platform: macos){ .titlebar-buttonbox-container{ left:0; right: unset !important; }
} @supports -moz-bool-pref("userchrome.force-window-controls-on-left.enabled"){
.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 }
.titlebar-buttonbox-container > .titlebar-buttonbox{ height: 100%; }
- titlebar{
-moz-box-ordinal-group: 2; /* Fx <112 compatibility */ order: 2; -moz-appearance: none !important; --tabs-navbar-shadow-size: 0px; --uc-menubar-vertical-overlap: 19px; /* for hide_tabs_with_one_tab_w_window_controls.css compatibility */
} /* Re-order window and tab notification boxes */
- navigator-toolbox > div{ display: contents }
.global-notificationbox,
- tab-notification-deck{
-moz-box-ordinal-group: 2; /* Fx <112 compatibility */ order: 2;
}
- 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{ -moz-box-orient: vertical; /* Fx <112 compatibility */ flex-direction: column; }
}
/* At Activated Menubar */
- root:not([chromehidden~="menubar"], [sizemode="fullscreen"]) #toolbar-menubar:not([autohide="true"]) + #TabsToolbar > .titlebar-buttonbox-container {
display: block !important;
}
- toolbar-menubar:not([autohide="true"]) > .titlebar-buttonbox-container {
visibility: hidden;
}
/* 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 }
- TabsToolbar > .titlebar-buttonbox-container{ visibility: visible }
- navigator-toolbox:not(:-moz-lwtheme){ background-color: -moz-dialog }
/* Uncomment the following if you want bookmarks toolbar to be below tabs */ /*
- PersonalToolbar{
-moz-box-ordinal-group: 2; order: 2;
}
- /
/* 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:not([sizemode="fullscreen"]){ --uc-window-control-width: 0px !important }
- root{
/* height if native titlebar is enabled, assumes empty menubar */ --uc-menubar-height: 20px;
}
- root[tabsintitlebar]{
/* height when native titlebar is disabled, more roomy so can fit buttons etc. */ --uc-menubar-height: 29px;
}
- root:is([sizemode="fullscreen"],[chromehidden~="menubar"]){
--uc-menubar-height: 0px;
} /* Since menubar is statically at top, remove fake drag-space that might be set by window_control_placeholder_support.css */
- root:not([sizemode="fullscreen"]) #nav-bar{ border-inline-width: 0 }
- navigator-toolbox{
-moz-window-dragging: drag; padding-top: var(--uc-menubar-height) !important;
}
/* Remove window dragging from notification boxes */
- tab-notification-deck,
.global-notificationbox{
-moz-window-dragging: no-drag;
}
- toolbar-menubar{
position: fixed; display: flex; top: 0px; height: var(--uc-menubar-height); width: 100%; overflow: hidden;
}
- toolbar-menubar > .titlebar-buttonbox-container{ height: 100%; order: 100; }
- toolbar-menubar > [flex]{ flex-grow: 100; }
- toolbar-menubar > spacer[flex]{
order: 99; flex-grow: 1; min-width: var(--uc-window-drag-space-post,20px);
}
- toolbar-menubar .toolbarbutton-1 { --toolbarbutton-inner-padding: 3px }
- root:not([sizemode="fullscreen"]) #toolbar-menubar.browser-toolbar > .titlebar-buttonbox-container{
visibility: visible;
}
- root:not([chromehidden~="menubar"], [sizemode="fullscreen"]) #TabsToolbar#TabsToolbar#TabsToolbar > .titlebar-buttonbox-container {
display: none !important;
}
FIREFOX has just lost me as a user. I've used FF -forever- and put up with all their "improvements" over the past years. I'm 'stuck on' V88 as I got tired of having to -fix- all of their FU'S. I occasionally do a -swap- to the newest version to see what new thing has been FU'D and how difficult it is to -FIX-, usually more CSS file manipulation, then wind up swapping back. My gripes are bookmark/list spacing and constant TABS change. The continual ICON changes is also annoying. Who in their right mind would want tabs way up at the top above everything else, it should be -connected- to the page you are on not in outer space. Apparently everyone in FF development. I will use v88 until I start running into things that won't work, then I'm HISTORY. Unless FF decides to return the 'user flexibility' of old. But I doubt FF has long to live. Such a good browser . . . . . . destroyed by those who think they 'know better' about what everyone wants.
Modified
Hi AEinstein, I know it's inconvenient to swim against the tide of user interface changes, especially since Firefox 57 because add-ons lost the ability to reposition toolbars. I know you don't consider userChrome.css rules to be a type of "user flexibility" but I think it works miracles if you have solid instructions for using it.
In case you change your mind someday:
Most of the rules I posted for fixing the spacing issues in Firefox 89 two years ago are still relevant, so I'll refer you to my page here about that: https://www.userchrome.org/firefox-89-styling-proton-ui.html