Search Support

Avoid support scams. We will never ask you to call or text a phone number or share personal information. Please report suspicious activity using the “Report Abuse” option.

Learn More

FF 112 Tabs on the bottom beneath the bookmarks toolbar

  • 10 replies
  • 4 have this problem
  • 280 views
  • Last reply by JussAskin

more options

Hi,

For years I have read directions to get my tabs back where is most logical for me, below the Bookmarks Toolbar. Now with this latest version of Firefox the workarounds I had before are not working.

To cut a long story short: I have made a Chrome folder under the Profile folder I have made CSS sheet with what looks like the commands I need. I have configured Firefox to read the userChrome.css sheet.

I have followed all the directions on this thread https://support.mozilla.org/en-US/questions/1375646 (most of which are repeated elsewhere) and it still doesn't work.

I am beyond frustrated - if anyone happens to know where I can go to request this as blinkin' option I would love to know.

Please could someone help me sort this out in the meantime though?

This is what is in the CSS sheet (which is in the correct place according to the above instructions - checked that already):

Thank you in advance.

/***** START of Sample Rules (delete and replace with your your own rules) *****/
/* TABS: below Navigation Toolbar - fixed for 111/113 */

/* ROOT: VARS */
*|*:root {
  --tab-toolbar-navbar-overlap: 0px !important;

  --tab-min-height: 27px !important;
  --tab-min-width:  80px !important; /*minimum:50px*/
/*  --tab-overflow-pinned-tabs-width: 175px */
}

/* TABS: POSITION */
#TabsToolbar {
  display: block !important;
  position: absolute !important;
  bottom: 0;
  width: 100vw !important;
}

/* Firefox 107 and older *//* #tabbrowser-tabs { width: 100vw !important; } */

/* navigator-toolbox: PADDING */
*|*: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;
}

/* TABS: HEIGHT */
#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;
}

/* DRAG SPACE */
.titlebar-spacer[type="pre-tabs"],
.titlebar-spacer[type="post-tabs"] {
  width: 20px !important;
}

/* TABS: movingtab - vertical shifts */
#navigator-toolbox[movingtab] > #titlebar > #TabsToolbar {
  padding-bottom: unset !important;
}

#navigator-toolbox[movingtab] #tabbrowser-tabs {
  padding-bottom: unset !important;
  margin-bottom:  unset !important;
}

#navigator-toolbox[movingtab] > #nav-bar {
  margin-top: unset !important;
}

/* INDICATORS - HIDE */
*|*:root:not([accessibilitymode])             .accessibility-indicator    {display: none !important}
*|*:root:not([privatebrowsingmode=temporary]) .private-browsing-indicator {display: none !important}

/* END - TABS below Navigation Toolbar */

/* Colored bookmark sidebar, toolbar, menu button containers */
  /* Standard folder */
  #bookmarks-view treechildren::-moz-tree-image(title,container),
  #PlacesToolbarItems toolbarbutton[container="true"] .toolbarbutton-icon,
  #PlacesToolbarItems menu[container="true"] .menu-iconic-left,
  #BMB_bookmarksPopup menu[container="true"] .menu-iconic-icon {
    fill: gold !important;
  }

 /* Smart bookmark folder */
 #bookmarks-view treechildren::-moz-tree-image(title, container, query),
 #PlacesToolbarItems toolbarbutton[container="true"][query="true"] .toolbarbutton-icon,
 #PlacesToolbarItems menu[container="true"][query="true"] .menu-iconic-left,
 #BMB_bookmarksPopup menu[container="true"][query="true"] .menu-iconic-icon {
    fill: dimtan !important;
 }
 /* These "containers" are SVG in the sidebar, not yet on the menu */
  #bookmarks-view treechildren::-moz-tree-image(container, queryFolder_menu________) {
    fill: tan !important;
 }
 #bookmarks-view treechildren::-moz-tree-image(container, queryFolder_menu________) {
    fill: tan !important;
 }
 #bookmarks-view treechildren::-moz-tree-image(container, queryFolder_unfiled_____) {
    fill: tan !important;
 }

Hi, For years I have read directions to get my tabs back where is most logical for me, below the Bookmarks Toolbar. Now with this latest version of Firefox the workarounds I had before are not working. To cut a long story short: I have made a Chrome folder under the Profile folder I have made CSS sheet with what looks like the commands I need. I have configured Firefox to read the userChrome.css sheet. I have followed all the directions on this thread https://support.mozilla.org/en-US/questions/1375646 (most of which are repeated elsewhere) and it still doesn't work. I am beyond frustrated - if anyone happens to know where I can go to request this as blinkin' option I would love to know. Please could someone help me sort this out in the meantime though? This is what is in the CSS sheet (which is in the correct place according to the above instructions - checked that already): Thank you in advance. <pre><nowiki> /***** START of Sample Rules (delete and replace with your your own rules) *****/ /* TABS: below Navigation Toolbar - fixed for 111/113 */ /* ROOT: VARS */ *|*:root { --tab-toolbar-navbar-overlap: 0px !important; --tab-min-height: 27px !important; --tab-min-width: 80px !important; /*minimum:50px*/ /* --tab-overflow-pinned-tabs-width: 175px */ } /* TABS: POSITION */ #TabsToolbar { display: block !important; position: absolute !important; bottom: 0; width: 100vw !important; } /* Firefox 107 and older *//* #tabbrowser-tabs { width: 100vw !important; } */ /* navigator-toolbox: PADDING */ *|*: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; } /* TABS: HEIGHT */ #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; } /* DRAG SPACE */ .titlebar-spacer[type="pre-tabs"], .titlebar-spacer[type="post-tabs"] { width: 20px !important; } /* TABS: movingtab - vertical shifts */ #navigator-toolbox[movingtab] > #titlebar > #TabsToolbar { padding-bottom: unset !important; } #navigator-toolbox[movingtab] #tabbrowser-tabs { padding-bottom: unset !important; margin-bottom: unset !important; } #navigator-toolbox[movingtab] > #nav-bar { margin-top: unset !important; } /* INDICATORS - HIDE */ *|*:root:not([accessibilitymode]) .accessibility-indicator {display: none !important} *|*:root:not([privatebrowsingmode=temporary]) .private-browsing-indicator {display: none !important} /* END - TABS below Navigation Toolbar */ /* Colored bookmark sidebar, toolbar, menu button containers */ /* Standard folder */ #bookmarks-view treechildren::-moz-tree-image(title,container), #PlacesToolbarItems toolbarbutton[container="true"] .toolbarbutton-icon, #PlacesToolbarItems menu[container="true"] .menu-iconic-left, #BMB_bookmarksPopup menu[container="true"] .menu-iconic-icon { fill: gold !important; } /* Smart bookmark folder */ #bookmarks-view treechildren::-moz-tree-image(title, container, query), #PlacesToolbarItems toolbarbutton[container="true"][query="true"] .toolbarbutton-icon, #PlacesToolbarItems menu[container="true"][query="true"] .menu-iconic-left, #BMB_bookmarksPopup menu[container="true"][query="true"] .menu-iconic-icon { fill: dimtan !important; } /* These "containers" are SVG in the sidebar, not yet on the menu */ #bookmarks-view treechildren::-moz-tree-image(container, queryFolder_menu________) { fill: tan !important; } #bookmarks-view treechildren::-moz-tree-image(container, queryFolder_menu________) { fill: tan !important; } #bookmarks-view treechildren::-moz-tree-image(container, queryFolder_unfiled_____) { fill: tan !important; } </nowiki></pre><br>

Modified by cor-el

All Replies (10)

more options

Typo..

Modified by Laura

more options

Your code seems to be from the "forum response" on the subject. That article isn't being maintained so you may have to look elsewhere for working code. Try searching github for MrOtherGuy.

more options

Thank you Terry.

I found what I think I need on MrOtherGuy and the below is what I have. I've looked through it and don't think there's any extras in there I should have taken out, but I'm not a coder and it's still not working. Can anyone help please?


/* 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;
}
*/

Modified by cor-el

more options

I've edited your above posted code and it should work again since the code you posted above was rather outdated.

more options

In Firefox 69 and later you need to set this pref to true on the about:config page to enable userChrome.css/userContent.css in the chrome folder.

more options

Hi cor-el, sorry but it's not working still. I copied the edited the edited text into the CSS file and I already had the about:config bit to true, but still, tabs stubbornly on top even after I closed and reopened Firefox.

Thank you though

Laura

more options

What is the location of your userChrome.css ?

  • C:\Users\<user>\AppData\Roaming\Mozilla\Firefox\Profiles\<profile>\chrome\userChrome.css

Did you make sure that the file doesn't have a hidden .css or .txt file extension appended ?


It is not that difficult to create userChrome.css if you have never used it.

The first step is to open the "Help -> Troubleshooting Information" page and find the button to access the profile folder with the random name (xxxxxxxx.default-release).

You can find the button to go to the profile folder under the "Application Basics" section as "Profile Folder -> Open Folder". If you click this button then you open the profile folder in the Windows File Explorer. You need to create a folder with the name chrome in the profile folder with the random name (name is all lowercase). In the chrome folder you need to create a plain text file with the name userChrome.css (name is case sensitive). In this userChrome.css text file you paste the text posted. On Mac you can use the TextEdit utility to create the userChrome.css file as a plain text file.

In Windows saving the file is usually the only time things get more complicated because Windows can silently add a .txt file extension and you end up with a file named userChrome.css.txt. To avoid this you need to make sure to select "All files" in the dialog to save the file in the text editor using "Save File as".

You need to close (Quit/Exit) and restart Firefox when you create or modify the userChrome.css file.

More info about userChrome.css/userContent.css in case you are not familiar: *https://www.userchrome.org/what-is-userchrome-css.html

In Firefox 69 and later you need to set this pref to true on the about:config page to enable userChrome.css and userContent.css in the chrome folder.

more options

Hello Cor-el ... Had the same problem and copied your text into my CSS file, but now my Bookmark Toolbar is on top ... The order now is:

Bookmark Toolbar, 

Menu Bar, Tabs toolbar. Is there a way to modify the text to move the Bookmark Toolbar under the Menu bar and above the Tab bar? Thank you in advance!

more options

The #titlebar container contains the Menu bar and the Tab bar. The CSS code I posted under the question section above moves the #TabsToolbar out of the #titlebar container to the bottom of the #navigator-toolbox (extra padding space needs to be reserved) and in that case stays the Menu bar at the top below a possible Title bar, so no extra code for handling whether menu bar or bookmarks toolbar are hidden or visible as this is handled automatically by Firefox.

On the other hand, the CSS code from MrOtherGuy moves the #titlebar container to the bottom of the #navigator-toolbox, so both the Menu bar and the Tab bar are moved. To fix the Menu bar to the top position the #menu-bar needs to be moved out of the #titlebar container and this requires importing an extra file. This requires to reserve space at the top of the #navigator-toolbox..

Modified by cor-el

more options

Wow! I can see you wrote English, but that's as close to understanding as I get. Thankfully, I copied your new piece from MrOtherGuy and pasted it to the bottom of my user.Crome.css file -- No change ... Then I pasted the new text to the top of my user.Crome.css file ... BINGO. I'm back to where I was prior to the update to ver 113.0.1 I usually refuse updates for a week or two so if they garbled this some "white knight" would post a solution ...

I'm sorry I couldn't figure out your explanation, but thank you for trying. I don't know why this was changed, whatever difference it made to Firefox isn't visible to me ... I wish they would take into consideration the stress they cause us 74 year old non-tech savoy guys that get caught ... Thank you so much for fixing this for me. I was suffering greatly!

Really, can't say it enough ... Thank you, Thank you, Thank YOU!