![Firefox logo](https://assets-prod.sumo.prod.webservices.mozgcp.net/media/uploads/products/2020-04-14-08-36-13-8dda6f.png)
HERE is the answer to put "TABS BELOW" which will work with Firefox V90 using the - userChrome.css - file
HERE IS THE ANSWER Here is the answer to get TABS BELOW with Firefox V90 . . copy all of this code below the broken line into your - userChrome.css - file and save it. You can modify the 45px in this line if you wish to get an appropriate height . . just experiment with different numbers till you get it right --menubar-height: 45px; /*30px|41px=11px; caption buttons on menubar*/
Also to make the tabs wider or narrower, modify the line which is coded width: 50vw !important;
Finally you must enable - css - in Firefox, by typing about:config into your address bar, and search for toolkit. When all the toolkit options appear change the one which says toolkit.legacyUserProfileCustomizations.stylesheets to TRUE by click the icon in the right hand column. Than close Firefox and reopen, and check how it looks This will enable your - css - file to be read, and interpreted and accepted by the Firefox browser.
-------------------------------------------------------------------
@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); /* TABS: bottom - Firefox 65 and later - updated for 89+ */ /* https://searchfox.org/mozilla-release/source/browser/themes/shared/tabs.inc.css */ /* https://raw.githubusercontent.com/Aris-t2/CustomCSSforFx/master/classic/css/tabs/tabs_below_navigation_toolbar_fx89.css */ /* https://developer.mozilla.org/en-US/docs/Tools/Browser_Toolbox */ /* ROOT - VARS */ /* you can adjust the CSS variables until it looks correct */ /* you can use the Browser Toolbox to get the toolbar heights */ *|*:root { --tab-toolbar-navbar-overlap: 0px !important; --tab-min-height: 40px !important; --tab-min-width: 60px !important; --tab-adjust: 0px; /* adjust tab bar - only for 68-73 */ --tab-caption: 5px; /* caption buttons on tab bar */ } /* TAB BAR - below nav-bar */ #navigator-toolbox toolbar:not(#nav-bar):not(#toolbar-menubar) {-moz-box-ordinal-group:10 !important;} #TabsToolbar {-moz-box-ordinal-group:1000 !important;} #TabsToolbar { display: block !important; position: absolute !important; bottom: 0 !important; width: 50vw !important; } #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; } /* TabsToolbar with menubar and titlebar hidden - rules for Firefox 65-73 */ *|*:root[tabsintitlebar]:not([inFullscreen="true"]):not([sizemode="maximized"]) #toolbar-menubar[autohide="true"] ~ #TabsToolbar{ bottom: var(--tab-adjust); /*ADJUST*/ } /* TABS: height */ #tabbrowser-tabs, #tabbrowser-tabs > .tabbrowser-arrowscrollbox, .tabbrowser-tabs[positionpinnedtabs] > .tabbrowser-tab[pinned] { min-height: var(--tab-min-height) !important; max-height: var(--tab-min-height) !important; } #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; /* z-index: 1 !important; */ } /* indicators *//* *|*:root[privatebrowsingmode=temporary] .private-browsing-indicator { position: absolute !important; display: block !important; right: 0px !important; bottom: 0px !important; width: 14px !important; pointer-events: none !important; } */ .private-browsing-indicator {display: none !important;} .accessibility-indicator {display: none !important;} /* Indicators - HIDE *//* *|*:root:not([accessibilitymode]) .accessibility-indicator {display: none !important} *|*:root:not([privatebrowsingmode=temporary]) .private-browsing-indicator {display: none !important} */ /* Drag Space */ .titlebar-spacer[type="pre-tabs"], .titlebar-spacer[type="post-tabs"] { width: 20px !important; } /* Override vertical shifts when moving a tab */ #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; } /* Hide window-controls and caption buttons on Tab Bar */ #TabsToolbar #window-controls {display: none !important;} #TabsToolbar .titlebar-buttonbox-container {display: none !important;}
cor-el moo ko soppali ci
Saafara biñ tànn
HERE IS THE ANSWER Here is the answer to get TABS BELOW with Firefox V90 . . copy all of this code below the broken line into your - userChrome.css - file and save it.
Finally you must enable - css - in Firefox, by typing about:config into your address bar, and search for toolkit. When all the toolkit options appear change the one which says toolkit.legacyUserProfileCustomizations.stylesheets to TRUE by click the icon in the right hand column. Than close Firefox and reopen, and check how it looks This will enable your - css - file to be read, and interpreted and accepted by the Firefox browser.
@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); /* TABS: bottom - Firefox 65 and later - updated for 89+ */ /* https://searchfox.org/mozilla-release/source/browser/themes/shared/tabs.inc.css */ /* https://github.com/Aris-t2/CustomCSSforFx/blob/master/classic/css/tabs/tabs_below_navigation_toolbar_fx89.css */ /* https://developer.mozilla.org/en-US/docs/Tools/Browser_Toolbox */ /* ROOT - VARS */ /* you can adjust the CSS variables until it looks correct */ *|*:root { --tab-toolbar-navbar-overlap: 0px !important; --tab-min-height: 40px !important; --tab-min-width: 60px !important; --tab-adjust: 0px; /* adjust tab bar - only for 68-73 */ --tab-caption: 5px; /* caption buttons on tab bar */ } /* TAB BAR - below nav-bar */ #navigator-toolbox toolbar:not(#nav-bar):not(#toolbar-menubar) {-moz-box-ordinal-group:10 !important;} #TabsToolbar {-moz-box-ordinal-group:1000 !important;} #TabsToolbar { display: block !important; position: absolute !important; bottom: 0 !important; width: 100vw !important; } #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; } /* TabsToolbar with menubar and titlebar hidden - rules for Firefox 65-73 */ *|*:root[tabsintitlebar]:not([inFullscreen="true"]):not([sizemode="maximized"]) #toolbar-menubar[autohide="true"] ~ #TabsToolbar{ bottom: var(--tab-adjust); /*ADJUST*/ } /* TABS: height */ #tabbrowser-tabs, #tabbrowser-tabs > .tabbrowser-arrowscrollbox, .tabbrowser-tabs[positionpinnedtabs] > .tabbrowser-tab[pinned] { min-height: var(--tab-min-height) !important; max-height: var(--tab-min-height) !important; } #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; } /* indicators *//* *|*:root[privatebrowsingmode=temporary] .private-browsing-indicator { position: absolute !important; display: block !important; right: 0px !important; bottom: 0px !important; width: 14px !important; pointer-events: none !important; } */ .private-browsing-indicator {display: none !important;} .accessibility-indicator {display: none !important;} /* Indicators - HIDE *//* *|*:root:not([accessibilitymode]) .accessibility-indicator {display: none !important} *|*:root:not([privatebrowsingmode=temporary]) .private-browsing-indicator {display: none !important} */ /* Drag Space */ .titlebar-spacer[type="pre-tabs"], .titlebar-spacer[type="post-tabs"] { width: 20px !important; } /* Override vertical shifts when moving a tab */ #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; } /* Hide window-controls and caption buttons on Tab Bar */ #TabsToolbar #window-controls {display: none !important;} #TabsToolbar .titlebar-buttonbox-container {display: none !important;}Jàng tontu lii ci fi mu bokk 👍 0
All Replies (20)
I hate this new format and would like an answer too! =(
Trevor George, Bristol, UK said
Hi all . . up till now I've been able to keep my TABS BELOW the Bookmarks Toolbar as some kind person has always supplied the - userChrome.css - file code to keep TABS BELOW, but once again Firefox has overcome that code with their V90 version upgrade, and Tabs have irritatingly returned to the TOP of my Browser.
Have you tried:
https://www.reddit.com/r/FirefoxCSS/comments/nq2d0q/tabs_on_bottom_for_firefox_89/
Although, you are on beta?? I don't know if the person who posted that has tested in beta.
Either way, r/FirefoxCSS is the best place for updated userChrome.css code. That's their raison d'être.
ca said
I hate this new format and would like an answer too! =(
I'm not sure whether you have the same issue or a different issue.
jscher2000 said
Have you tried: https://www.reddit.com/r/FirefoxCSS/comments/nq2d0q/tabs_on_bottom_for_firefox_89
Yes I've just tried it and it doesn't work with V90.0b3 of Firefox unfortunately
jscher2000 said
Either way, r/FirefoxCSS is the best place for updated userChrome.css code.
Hiya . . . what is r/FirefoxCSS ? and where do I find it to try it ?
Trevor George, Bristol, UK moo ko soppali ci
You can try the code in the solution in this reply that I've edited for Firefox 89+:
- /questions/1305615 tabs below address bar - an ongoing problem not fixed !!!
cor-el said
You can try the code in the solution in this reply that I've edited for Firefox 89+:Hi COR-EL . . . I've just tried it just copying the upper part of the code down to the line "If you want to experiment with the Window Controls try this code: " and pasted it into my - userChrome.css - file, and when I close Firefox and reopen it the TABS are still ABOVE with Version 90.0b3
There has got to be an easy way
Trevor George, Bristol, UK moo ko soppali ci
The code works for me with the current 90.0b3 beta and in Nightly, so double check that you did make a mistake.
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.
You can find this button 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 this folder (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.
See also:
- https://www.userchrome.org/what-is-userchrome-css.html
- https://www.userchrome.org/how-create-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.
- toolkit.legacyUserProfileCustomizations.stylesheets = true
cor-el said
The code works for me with the current 90.0b3 beta and in Nightly, so double check that you did make a mistake.
It is not that difficult to create userChrome.css if you have never used it.
IT IS DIFFICULT . . which is why I'm looking for a simple answer, and so are many others. I already have a chrome folder and a file named - userChrome.css - saved within it which worked fine with all previous versions of Firefox, with occasional updates. I appreciate you are trying to help, but providing masses of links does not help. I just would like a simple answer posted in this thread please, for myself and for the benefit of others, not having to follow links to other questions and trying to find the answer after hours of trying. Why is it not possible to post the - userChrome.css - code for TABS BELOW in this thread? Thank you.
Trevor George, Bristol, UK moo ko soppali ci
cor-el said
The code works for me with the current 90.0b3 beta and in Nightly, so double check that you did make a mistake.
Hi cor-el . . . I have copied-&-pasted the lines beginning @namespace url("[http://www.mozilla.org/keymaster/gate.../there.is.only.xul]");
and ending #TabsToolbar .titlebar-buttonbox-container {display: none !important;} from your code, and have saved it as I have many times before, but it is still putting TABS ABOVE.
I have also changed the toolkit.legacyUserProfileCustomizations.stylesheets to TRUE but I'm still getting TABS ABOVE, and it squeezed up my Broswer menu, and lost my address-bar, so I have changed it back to FALSE as it still didn't work.
Why is doing this so difficult?
Trevor George, Bristol, UK moo ko soppali ci
Yes, I just tried it, and that doesn't work either.jscher2000 said
Have you tried:https://www.reddit.com/r/FirefoxCSS/comments/nq2d0q/tabs_on_bottom_for_firefox_89/
Thanks for offering it
Trevor George, Bristol, UK moo ko soppali ci
Were you previously already using userChrome.css as it is possible that you have older code that is causing problems ?
Can you post the content of your userChrome.css ?
You can also try the code in a new profile.
Hi cor-el . . .this is the code I used copied exactly from your link you supplied, and I followed all your other instructions how to locate the current folder using - about:support - link I've done it all exactly as you described, but TABS are still ON TOP
cor-el said
Were you previously already using userChrome.css as it is possible that you have older code that is causing problems ? Can you post the content of your userChrome.css ?
@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); /* TABS: bottom - Firefox 65 and later - updated for 89+ */ /* https://searchfox.org/mozilla-release/source/browser/themes/shared/tabs.inc.css */ /* https://developer.mozilla.org/en-US/docs/Tools/Browser_Toolbox */ /* ROOT - VARS */ /* you can adjust the CSS variables until it looks correct */ *|*:root { --tab-toolbar-navbar-overlap: 0px !important; --tab-min-height: 25px !important; --tab-min-width: 60px !important; --tab-caption: -5px; /* caption buttons on tab bar */ --tab-adjust: 3px; /* adjust tab bar */ } /* TAB BAR - below nav-bar */ #navigator-toolbox toolbar:not(#nav-bar):not(#toolbar-menubar) {-moz-box-ordinal-group:10 !important} #TabsToolbar {-moz-box-ordinal-group:1000 !important} #TabsToolbar { display: block !important; position: absolute !important; bottom: 0 !important; width: 100vw !important; } #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; } /* TabsToolbar with menubar and titlebar hidden - adjust bottom - Firefox 65-73 *//* *|*:root[tabsintitlebar]:not([inFullscreen="true"]):not([sizemode="maximized"]) #toolbar-menubar[autohide="true"] ~ #TabsToolbar{ bottom: var(--tab-adjust); } */ /* TABS: height */ #tabbrowser-tabs, #tabbrowser-tabs > .tabbrowser-arrowscrollbox, .tabbrowser-tabs[positionpinnedtabs] > .tabbrowser-tab[pinned] { min-height: var(--tab-min-height) !important; max-height: var(--tab-min-height) !important; } #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; /* z-index: 1 !important; */ } /* indicators *//* *|*:root[privatebrowsingmode=temporary] .private-browsing-indicator { position: absolute !important; display: block !important; right: 0px !important; bottom: 0px !important; width: 14px !important; pointer-events: none !important; }*/ .private-browsing-indicator {display: none !important;} .accessibility-indicator {display: none !important;} /* Indicators - HIDE *//* *|*:root:not([accessibilitymode]) .accessibility-indicator {display: none !important} *|*:root:not([privatebrowsingmode=temporary]) .private-browsing-indicator {display: none !important} */ /* Drag Space */ .titlebar-spacer[type="pre-tabs"], .titlebar-spacer[type="post-tabs"] { width: 20px !important; } /* Override vertical shifts when moving a tab */ #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; } /* Hide window-controls and caption buttons on Tab Bar */ #TabsToolbar #window-controls {display: none !important;} #TabsToolbar .titlebar-buttonbox-container {display: none !important;}
cor-el moo ko soppali ci
You are sure you created userChrome.css in the chrome folder in the correct profile folder ?
You can use the button on the "Help -> More Troubleshooting Information" (about:support) page to go to the current Firefox profile folder or use the about:profiles page.
- Help -> More Troubleshooting Information -> Profile Folder/Directory:
Windows: Open Folder; Linux: Open Directory; Mac: Show in Finder - https://support.mozilla.org/en-US/kb/profiles-where-firefox-stores-user-data
Hi cor-el . . .this is the code I used copied exactly from your link you supplied, and I followed all your other instructions how to locate the current folder using - about:support - link I've done it all exactly as you described, but TABS are still ON TOP
cor-el said
Were you previously already using userChrome.css as it is possible that you have older code that is causing problems ? Can you post the content of your userChrome.css ?
@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); /* TABS: bottom - Firefox 65 and later - updated for 89+ */ /* https://searchfox.org/mozilla-release/source/browser/themes/shared/tabs.inc.css */ /* https://developer.mozilla.org/en-US/docs/Tools/Browser_Toolbox */ /* ROOT - VARS */ /* you can adjust the CSS variables until it looks correct */ *|*:root { --tab-toolbar-navbar-overlap: 0px !important; --tab-min-height: 25px !important; --tab-min-width: 60px !important; --tab-caption: -5px; /* caption buttons on tab bar */ --tab-adjust: 3px; /* adjust tab bar */ } /* TAB BAR - below nav-bar */ #navigator-toolbox toolbar:not(#nav-bar):not(#toolbar-menubar) {-moz-box-ordinal-group:10 !important} #TabsToolbar {-moz-box-ordinal-group:1000 !important} #TabsToolbar { display: block !important; position: absolute !important; bottom: 0 !important; width: 100vw !important; } #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; } /* TabsToolbar with menubar and titlebar hidden - adjust bottom - Firefox 65-73 *//* *|*:root[tabsintitlebar]:not([inFullscreen="true"]):not([sizemode="maximized"]) #toolbar-menubar[autohide="true"] ~ #TabsToolbar{ bottom: var(--tab-adjust); } */ /* TABS: height */ #tabbrowser-tabs, #tabbrowser-tabs > .tabbrowser-arrowscrollbox, .tabbrowser-tabs[positionpinnedtabs] > .tabbrowser-tab[pinned] { min-height: var(--tab-min-height) !important; max-height: var(--tab-min-height) !important; } #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; /* z-index: 1 !important; */ } /* indicators *//* *|*:root[privatebrowsingmode=temporary] .private-browsing-indicator { position: absolute !important; display: block !important; right: 0px !important; bottom: 0px !important; width: 14px !important; pointer-events: none !important; }*/ .private-browsing-indicator {display: none !important;} .accessibility-indicator {display: none !important;} /* Indicators - HIDE *//* *|*:root:not([accessibilitymode]) .accessibility-indicator {display: none !important} *|*:root:not([privatebrowsingmode=temporary]) .private-browsing-indicator {display: none !important} */ /* Drag Space */ .titlebar-spacer[type="pre-tabs"], .titlebar-spacer[type="post-tabs"] { width: 20px !important; } /* Override vertical shifts when moving a tab */ #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; } /* Hide window-controls and caption buttons on Tab Bar */ #TabsToolbar #window-controls {display: none !important;} #TabsToolbar .titlebar-buttonbox-container {display: none !important;}
cor-el moo ko soppali ci
Sorry, my mistake. I appear to have forgotten to test the file after the latest update to fix some possible issues that might happen if the Tab bar isn't placed in the correct position like a black bar or only showing the selected tab and and shortened some variable names, but failed to update the variable used for "top:var(--tabbar-top);" (I had already fixed this in my code, but apparently pasted an older version). I've update the code you posted in your reply above and tested it this time, so hopefully it now works. Thanks for noticing this update failure.
cor-el said
Sorry, my mistake. I appear to have forgotten to test the file after the latest update
Hi co-rel . . . I've just tested it again with the updated file you posted at -https://support.mozilla.org/en-US/questions/1305615 - and I even did the "Toolkit" change thing on -about:config - but it squishes up my menu badly, so I put it back to "False". TABS are still on TOP so I'm amazed it works for you. I only copied part of the file, as all I want to do is to put TABS BELOW so I ignored the "Windows Controls" part of the css / txt code. It's also been saved correctly in the Chrome folder, as I have done this a number of times before, so I am completly baffled if it works for you. This is on Windows 10
Can you post a screenshot of how it shows with this latest version ?
Does the Tab bar overlap existing toolbars?
You can use the Browser Toolbox to inspect whether rules for #TabsToolbar are applied and its current top property value.
To enable the Browser Toolbox, see:
- https://developer.mozilla.org/en-US/docs/Tools/Settings
- select "Enable remote debugging" in the Web Developer Tools settings
Here's how it looks right now
This looks that none of the code in userChrome.css is applied, so you first need to make sure that you have enabled userChrome.css (toolkit.legacyUserProfileCustomizations.stylesheets = TRUE) and secondly that the file is in the correct location (chrome folder in the profile folder) and that the file is a CSS file and not a text file with a hidden .txt file extension.
You can try userChrome.css with only this code in case other code in userChrome.css is causing problems.