X
Tap here to go to the mobile version of the site.

Support Forum

Firefox 57 tabs on bottom

Posted

hello

since firefox 57 the briliant add-on tab-mix plus no longer works. So I have been looking for a way to get my tabs on the bottom of firefox, I have been browing this way since Opera 6 or so had this option and I never knew how much I missed it since Firefox 57.

Now the web is full of people with advice to place the tabs below the URL bar using userChrome.css however this not what I want, I really want them at the bottom.

Thank for any info and help

Alex

hello since firefox 57 the briliant add-on tab-mix plus no longer works. So I have been looking for a way to get my tabs on the bottom of firefox, I have been browing this way since Opera 6 or so had this option and I never knew how much I missed it since Firefox 57. Now the web is full of people with advice to place the tabs below the URL bar using userChrome.css however this not what I want, I really want them at the bottom. Thank for any info and help Alex

Chosen solution

Try this one:

   #TabsToolbar {
   position: fixed;
   bottom: -0.5em;
   width: 100%;
   }
   #tabbrowser-tabs { width: 96%; }
   #content-deck { margin-bottom: 2.5em; }
Read this answer in context 9

Additional System Details

Application

  • User Agent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/62.0.3202.94 Safari/537.36

More Information

Mkll 313 solutions 1967 answers

Firefox's style or appearance can be modified by creating a chrome folder inside your Firefox profile folder and then placing a userChrome.css file inside, that includes a custom style rule. 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:
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 here into your userChrome.css file. After saving your changes and closing the file, you should turn on your Firefox title bar or menu bar on Windows. (The CSS rules you copied include other suggestions as comments.)

Otherwise, follow these instructions:
(See this help page and our community member's video starting at 8:45 for more information.)

  1. 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).
  2. 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.
  3. Download the following file and move it into that chrome folder:
    https://www.userchrome.org/samples/userChrome-tabs_on_bottom.css
  4. Rename the file, from "userChrome-tabs_on_bottom.css" to userChrome.css
    • Note: If the file you downloaded was missing .css from the file name, that means Windows is set to hide file name extensions. In that case, rename the file from "userChrome-tabs_on_bottom" to userChrome.
  5. Restart Firefox, which will discover that file and apply the rules.

Tip: Turn on your title bar, or the menu bar on Windows, after you've made these changes.

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 a custom style rule. 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''':<br> 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. 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. (The CSS rules you copied include other suggestions as comments.) '''Otherwise, 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.) #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 the following file and move it into that chrome folder:<br>https://www.userchrome.org/samples/userChrome-tabs_on_bottom.css #Rename the file, from "userChrome-tabs_on_bottom.css" to '''userChrome.css''' #*'''Note''': If the file you downloaded was missing .css from the file name, that means Windows is set to hide file name extensions. In that case, rename the file from "userChrome-tabs_on_bottom" to '''userChrome'''. #Restart Firefox, which will discover that 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.

Helpful Reply

Hello MkII,

thank you for your answer but its not my question and I did find those option. But maybe I was not clear enough in my question, sorry.

I want the tabs at the bottom of the screen, not below the other toolbars, but really completely at the bottom of the window/screen

And I can't find any css code for that sadly

Hello MkII, thank you for your answer but its not my question and I did find those option. But maybe I was not clear enough in my question, sorry. I want the tabs at the bottom of the screen, not below the other toolbars, but really completely at the bottom of the window/screen And I can't find any css code for that sadly
TyDraniu
  • Top 25 Contributor
159 solutions 978 answers

Chosen Solution

Try this one:

   #TabsToolbar {
   position: fixed;
   bottom: -0.5em;
   width: 100%;
   }
   #tabbrowser-tabs { width: 96%; }
   #content-deck { margin-bottom: 2.5em; }
Try this one: #TabsToolbar { position: fixed; bottom: -0.5em; width: 100%; } #tabbrowser-tabs { width: 96%; } #content-deck { margin-bottom: 2.5em; }

Question owner

TyDraniu

perfect, thank you very much. I played a bit with the numbers as I am on Linux so maybe a small difference there but its exactly what I was looking for.

thank you very much !

TyDraniu perfect, thank you very much. I played a bit with the numbers as I am on Linux so maybe a small difference there but its exactly what I was looking for. thank you very much !
Jeff 0 solutions 11 answers

Wow! Thank you!... I just got my tabs back to the very bottom.

Question: What tweak moves the tabs up just a little... like 1/64" as the very bottom of the tab is missing.... Note: using windows 10

Update: I found the line to tweak... changed: bottom: -0.5em; to: bottom: -0.0em;

It is so nice to have my tabs back on the bottom next to the task bar.. Now I have to get use to the new setting, but this is the only way to have it in my opinion. The top is already busy with the quick links and settings ect. and I like the task bar at the bottom as well. To me web sites are like programs/apps and belong next to the task bar. You can go from a program to a web site of your choosing with one click. You just bring the bottom of other programs just above the the tabs. FYI: this is on a 27" monitor..

Wow! Thank you!... I just got my tabs back to the very bottom. Question: What tweak moves the tabs up just a little... like 1/64" as the very bottom of the tab is missing.... Note: using windows 10 Update: I found the line to tweak... changed: bottom: -0.5em; to: bottom: -0.0em; It is so nice to have my tabs back on the bottom next to the task bar.. Now I have to get use to the new setting, but this is the only way to have it in my opinion. The top is already busy with the quick links and settings ect. and I like the task bar at the bottom as well. To me web sites are like programs/apps and belong next to the task bar. You can go from a program to a web site of your choosing with one click. You just bring the bottom of other programs just above the the tabs. FYI: this is on a 27" monitor..

Modified by Jeff

cor-el
  • Top 10 Contributor
  • Moderator
16553 solutions 149454 answers

You may want to disable this feature for Full Screen mode to make auto-hide work and avoid getting the tab bar.

#TabsToolbar:not([inFullscreen="true"]) {position:fixed; bottom:0em; width:100%;}
You may want to disable this feature for Full Screen mode to make auto-hide work and avoid getting the tab bar. <pre><nowiki>#TabsToolbar:not([inFullscreen="true"]) {position:fixed; bottom:0em; width:100%;}</nowiki></pre>
MFL2 1 solutions 4 answers

None of the suggested fixes works with 58.0.2 which just attacked my computer. Any other ideas?

None of the suggested fixes works with 58.0.2 which just attacked my computer. Any other ideas?

Question owner

on 58.0.1 (64Bit) Firefox for openSUSE openSUSE - Tumbleweed

and it does still work, would be strange if a .0.x update would break it, but if I ever get 0.2 will let you know

on 58.0.1 (64Bit) Firefox for openSUSE openSUSE - Tumbleweed and it does still work, would be strange if a .0.x update would break it, but if I ever get 0.2 will let you know