Compare Revisions

Common response for moving tabs below the toolbar

Firefox's style or appearance can be [https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Tutorial/Modifying_the_Default_Skin modified] by creating a '''chrome''' folder inside your [[Profiles - Where Firefox stores your bookmarks, passwords and other user data|Firefox profile folder]] and then placing a '''userChrome.css''' file inside, that includes custom style rules. The rules you put in the userChrome.css file will override the default styles in Firefox. '''''Note:''' Custom style rules might not work every time because of other factors (such as incompatibility with other custom style rules) beyond the Mozilla community's control. Your custom style rule might also stop working each time a new Firefox release comes out. Here's how to modify Firefox so that tabs are shown below the address (URL) bar instead of at the top: '''If your Firefox profile folder already has a chrome folder containing userChrome.css''', copy the appropriate code for your [[Find what version of Firefox you are using| Firefox version]] into your userChrome.css file. After saving your changes and closing the file, you should [[Customize Firefox controls, buttons and toolbars|turn on your Firefox title bar]] or menu bar on Windows.<br> '''In Firefox 64 and below:''' Go to https://www.userchrome.org/what-is-userchrome-css.html and copy the CSS rules under the "Move the Tab Bar Below the Other Toolbars" example [https://www.userchrome.org/what-is-userchrome-css.html#movetabbar here] into your userChrome.css file. (The CSS rules you copied include other suggestions as comments.) ''' In Firefox 69 and above:''' Firefox 69 and above disable userChrome.css and userContent.css by default and you need to check a pref in the [[Configuration Editor for Firefox]]. For more detail, see [https://www.userchrome.org/firefox-changes-userchrome-css.html this page] Alternatively, you can copy the following code: '''This code worked in Firefox 64 and below.''' <pre><nowiki>@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); /* TABS on bottom */ #navigator-toolbox toolbar:not(#nav-bar):not(#toolbar-menubar) {-moz-box-ordinal-group:10} #TabsToolbar {-moz-box-ordinal-group:1000!important} </nowiki></pre> <br> '''This code works in Firefox 65 and above.''' <pre><nowiki>@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); /* TABS: below nav-bar - Firefox 65 and newer - fixed 89+ */ /* ROOT -variables */ *|*:root { --tab-toolbar-navbar-overlap: 0px !important; --tab-min-height: 25px !important; /*override density*/ --tab-min-width: 80px !important; /*override default*/ --tab-bottom-adjust: 0px; /*65-73; menubar,titlebar hidden*/ } /* TABS: 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; } /* TABS: position */ #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 { padding-bottom: calc(var(--tab-min-height) + 1px) !important; /*ADJUST*/ position: relative !important; } /* Firefox 65-73 - menubar,titlebar hidden */ *|*:root[tabsintitlebar]:not([inFullscreen="true"]):not([sizemode="maximized"]) #toolbar-menubar[autohide="true"] ~ #TabsToolbar{ bottom: var(--tab-bottom-adjust) !important; } /* TABS: HEIGHT */ #tabbrowser-tabs, #tabbrowser-arrowscrollbox, #tabbrowser-tabs .tabbrowser-tab { min-height: var(--tab-min-height) !important; max-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; } /* indicators - hide */ .private-browsing-indicator {display: none !important;} .accessibility-indicator {display: none !important;} /* window controls in full screen - hide*/ #TabsToolbar #window-controls {display: none !important;} /* caption buttons on tab bar - hide */ *|*:root[tabsintitlebar]:not([inFullscreen="true"]) #toolbar-menubar[autohide="true"] ~ #TabsToolbar .titlebar-buttonbox-container {display: none !important;} </nowiki></pre> ---- '''If you don't already have a userChrome.css file, follow these instructions: <br> (See [https://www.userchrome.org/how-create-userchrome-css.html this help page] and our [https://vimeo.com/242513527 community member's video starting at 8:45] for more information.<!-- for localizers: these are English language pages -->) #Open your currently active profile folder: Type '''about:support''' in the Firefox address bar and, under the "Application Basics" section next to "Profile Folder", click '''Open Folder''' (Windows) '''Open Directory''' (Linux) or '''Show in Finder''' (Mac). #*'''On Mac''', a folder will open that contains your profile folder. Open the selected profile folder (it will be named something like ''xxxxxxxx.default'' for a default profile). #Create a new folder named '''chrome''' inside the profile folder. #*Create a desktop shortcut to the '''chrome''' folder, if you wish, for easier future access. #Download and save this file then move it into that chrome folder: #*'''For Firefox 68-71 (Windows and Linux):'''<br>[https://www.userchrome.org/samples/userChrome-tabs_on_bottom_Fx68-71_WindowsLinux.css] #*'''For Firefox 68-71 (MacOS):'''<br>[https://www.userchrome.org/samples/userChrome-tabs_on_bottom_Fx68-71_MacOS.css] # Rename the "userChrome-tabs_on_bottom.css" or userChrome-tabs_on_bottom_Fx70.css file you downloaded to '''userChrome.css''' #*'''On Windows:''' If the .css was missing from the downloaded file name, rename the file '''userChrome''' instead<!-- https://support.mozilla.org/en-US/questions/1189654#answer-1038747 --> (see the note below). #Restart Firefox, which will discover the new userChrome file and apply the rules. ---- '''Tip:''' [[Customize Firefox controls, buttons and toolbars|Turn on your title bar]], or the menu bar on Windows, after you've made these changes. ---- '''Note for Windows users:'''<br>On Windows, file name extensions are hidden by default. If the file you downloaded was saved as "userChrome-tabs_on_bottom" without the .css extension, that means Windows is hiding file name extensions. In that case, you must rename the file '''userChrome''' so that you don't end up with a file named "userChrome.css.css" that won't work. To set Windows to show file name extensions, <!-- for localizers: these are English language pages --> see [https://www.thewindowsclub.com/show-file-extensions-in-windows How to show File Extensions in Windows 10/8/7] at thewindowsclub''.''com and these fileinfo''.''com articles for [https://fileinfo.com/help/windows_8_show_or_hide_file_extensions Windows 8] and [https://fileinfo.com/help/windows_10_show_file_extensions Windows 10].