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

This thread was closed and archived. Please ask a new question if you need help.

How do I put the Tabs on Bottom with Firefox 71? Once again, with their update, they SCREWED UP.

more options

I attempted to reuse the Chrome fix that was successful for previous versions, but that did not work. I want my Tabs on the Bottom where "I" put them, not they way Firefox thinks I am supposed to have them I am sure others are having the same difficulty.

I attempted to reuse the Chrome fix that was successful for previous versions, but that did not work. I want my Tabs on the Bottom where "I" put them, not they way Firefox thinks I am supposed to have them I am sure others are having the same difficulty.

All Replies (20)

more options

Did you copy & paste All of the complete code and save it?

And did you go to about:config and switch toolkit.legacyUserProfileCustomizations.stylesheets to TRUE.

Then close the browser and reopen it.

If you did the above it should have worked.

Modified by jorb

more options

I have tried every suggestion here, plus any others I can find online. None of them work for me.

My toolkit.legacyUserProfileCustomizations.stylesheets was already set to True, obviously, or it wouldn't have worked before. It is something specific to 71.0 that has messed it up.

And just to repeat again, I have tried all of the codes suggested here for userChrome.css, plus any others I can find, and none of them work.

I don't understand why Mozilla keep doing this to us. I guess they only want users who are happy to accept the dictated setup now? Really, it's just like Google. I might as well go to Chrome.

Modified by freespirit99

more options

Version 71.0 switches toolkit.legacyUserProfileCustomizations.stylesheets to False by default. Check attached for correct Chrome folder location. There are two old userChrome-example.css & userContent-example.css files. I don't know what they are for.

Modified by jorb

more options

jorb said

... There are two old userContent-example.css files. I don't know what they are for. But each of them are different.

Those -example.css files are from real old versions of Firefox. One is userContent and the other is the more common userChrome.

And based upon the "Date Modified" 3/3/2011 those files are most likely from a Firefox 3.6 installation or a new Profile at that time; Firefox 4.0 was release on Mar 22, 2011 just days after the date on those 2 files.

more options

@ the-edmeister

Are they needed ?

more options

No, those two files aren't needed and have never been used by Firefox, so you can safely remove them. They were merely there to make it easier to start using userChrome.css and userContent.css as you could rename these files to userChrome.css and userContent.css and add your own code instead of creating these files yourself (Windows has the habit to add a hidden .txt file extension).

more options

cor-el said

@ Tr89 Did you make sure you created userChrome.css in the correct location and that there isn't a hidden .css or .txt appended ? See also: 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.

yes i did put it in the right location and set the about:config to true

more options

Thanks to the help above I've now managed to move the tabs back to below the address bar. I used the code here:

https://www.userchrome.org/samples/userChrome-tabs_on_bottom_Fx68-71_Wi...

and simply pasted it in to my existing userChrome.css file (where it appears as a massive and very daunting solid wodge of text). This worked but there have been two small side-effects:

The menu bar, the address bar, and any unused space on the tab bar now all have the same background colour which isn't attractive. With my previous fix, the first two were slightly different and the third had a dark horizontal top line to separate it from the space above.

The address bar now has a horizontal blank space below it larger than I'd like. Possibly because of this, the tabs appear rather squashed vertically compared to previously.

I'm attaching old- and new-fix screenshots.

It is possible to rectify both of these things, please? Many thanks. .

Modified by mail226

more options

The only code that should be in the userChrome.css file is the code below: Note: Copy the entire code. Also check attached image

/* TABS: on bottom */
#navigator-toolbox toolbar:not(#nav-bar):not(#toolbar-menubar) {-moz-box-ordinal-group:10}
#TabsToolbar {-moz-box-ordinal-group:1000!important}

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

#tabbrowser-tabs {
  width: 100vw !important;
}
#main-window:not([chromehidden*="toolbar"]) #navigator-toolbox {padding-bottom: var(--tab-min-height) !important;}

/* TABS: height */
:root {
 --tab-toolbar-navbar-overlap: 0px !important;
 --tab-min-height: 33px !important; /* adjust to suit your needs */
}
:root #tabbrowser-tabs {
 --tab-min-height: 33px !important; /* needs to be the same as above under :root */
 --tab-min-width: 80px !important;
}

#TabsToolbar {
 height: var(--tab-min-height) !important;
 margin-bottom: 1px !important;
 box-shadow: ThreeDShadow 0 -1px inset, -moz-dialog 0 1px !important;
}

#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;
}

Modified by jorb

more options

Jorb, many thanks for the speedy reply. I'll do what you suggest. Your screenshot shows everything I'm trying to achieve except for the lack of colour: will your code have the same effect on my display, I wonder? I'll see...

Later...

Well that worked very nicely: differentiated colours, better space management and all. For a final refinement, and not to appear ungrateful, is there a way of restoring the blue tab-backgrounds I had before? Thanks again.

Later still...

Jorb, this has now been sorted, thanks to cor-el. .

Modified by mail226

more options
.tabbrowser-tab:not([selected]) .tab-content { background-color: #99EEFF !important; }
more options

Corel, thank you! Worked a treat.

For fun, and for the experience, I'll experiment a bit to see if I can reproduce my previous display exactly. I presume there must be guide somewhere to specific userChrome.css codes: I'll have a search around.

Modified by mail226

more options

I didn't have much luck finding what I'm after. Can anyone point me to the specific codes for formatting the tabs and tab bar, please? I'd like to make the tabs narrower, round off their top corners, and change the colour of their background.

Could it be that when I did all this previously it was by applying a particular theme, I wonder?

Thanks.

more options

I've tried the fixes above, but it is not working. I think my userchrome file has too many previous fixes in it, and I need to clean it up. Problem is that I have two items in the file that I want to keep. They do a good job of suppressing all of the stupid icons that normally appear on the toolbars, and replacing them with boring words, if you can imagine such a thing. (The only place I've been unable to get rid of icons is on the tabs themselves.) How can I determine where one set of instructions ends and another starts?

more options

Gyaltnnh, where did you get the two items you want to retain? Couldn't that source supply you with the code, so you could identify it and keep it? Failing that, perhaps if you post the entire css file here someone could help you out.

Modified by mail226

more options

I got the code from this forum some years ago. It is still working. I think this is all of it:

/* Hide Icons on Main Toolbar */

  1. nav-bar .toolbarbutton-1:not([skipintoolbarset]) .toolbarbutton-icon,
  2. PanelUI-menu-button .toolbarbutton-badge-stack {
 width: 0 !important;
 padding: 0 !important;
 margin: 0 !important;

} /* Show Text Labels on Main Toolbar */

  1. nav-bar .toolbarbutton-1:not([skipintoolbarset]) .toolbarbutton-text {
 display: -moz-box !important;
 font-size: 14px !important;
 padding: 4px !important;

}

  1. downloads-button .toolbarbutton-badge-stack,
  2. downloads-indicator-anchor, #downloads-indicator-icon,
  3. downloads-indicator-progress-outer, #downloads-indicator-progress-inner {
 display: inline-block !important;
 width: 0 !important;
 min-width: 0 !important;
 padding: 0 !important;

}

.bookmark-item .toolbarbutton-icon {

 display: none !important;

}

Here is the entire contents of userchrome: /* Hide Icons on Main Toolbar */

  1. nav-bar .toolbarbutton-1:not([skipintoolbarset]) .toolbarbutton-icon,
  2. PanelUI-menu-button .toolbarbutton-badge-stack {
 width: 0 !important;
 padding: 0 !important;
 margin: 0 !important;

} /* Show Text Labels on Main Toolbar */

  1. nav-bar .toolbarbutton-1:not([skipintoolbarset]) .toolbarbutton-text {
 display: -moz-box !important;
 font-size: 14px !important;
 padding: 4px !important;

}

  1. downloads-button .toolbarbutton-badge-stack,
  2. downloads-indicator-anchor, #downloads-indicator-icon,
  3. downloads-indicator-progress-outer, #downloads-indicator-progress-inner {
 display: inline-block !important;
 width: 0 !important;
 min-width: 0 !important;
 padding: 0 !important;

}

.bookmark-item .toolbarbutton-icon {

 display: none !important;

}

/* Tab bar below Navigation & Bookmarks Toolbars */

  1. nav-bar { /* main toolbar */
 -moz-box-ordinal-group: 1 !important;

}

  1. PersonalToolbar { /* bookmarks toolbar */
 -moz-box-ordinal-group: 2 !important;

}

  1. TabsToolbar { /* tab bar */
 -moz-box-ordinal-group: 3 !important;

}

/* To create space for the standard window buttons, either

  (1) Show the title bar


/* TABS: on bottom */

  1. navigator-toolbox toolbar:not(#nav-bar):not(#toolbar-menubar) {-moz-box-ordinal-group:10}
  2. TabsToolbar {-moz-box-ordinal-group:1000!important}
  1. TabsToolbar {
position: absolute !important;
bottom: 0 !important;
width: 100vw !important;

}

  1. tabbrowser-tabs {
 width: 100vw !important;

}

  1. main-window:not([chromehidden*="toolbar"]) #navigator-toolbox {padding-bottom: var(--tab-min-height) !important;}

/* TABS: height */

root {
--tab-toolbar-navbar-overlap: 0px !important;
--tab-min-height: 27px !important; /* adjust to suit your needs */

}

root #tabbrowser-tabs {
--tab-min-height: 27px !important; /* needs to be the same as above under :root */
--tab-min-width: 80px !important;

}

  1. TabsToolbar {
height: var(--tab-min-height) !important;
margin-bottom: 1px !important;
box-shadow: ThreeDShadow 0 -1px inset, -moz-dialog 0 1px !important;
background-color: var(--toolbar-bgcolor) !important; color: blue;

}

  1. tabbrowser-tabs,
  2. tabbrowser-tabs > .tabbrowser-arrowscrollbox,

.tabbrowser-tabs[positionpinnedtabs] > .tabbrowser-tab[pinned] {

 min-height: var(--tab-min-height) !important;
 max-height: var(--tab-min-height) !important;

}

/* drag space */ .titlebar-spacer[type="pre-tabs"], .titlebar-spacer[type="post-tabs"] {

 width: 40px;

}

/* Override vertical shifts when moving a tab */

  1. navigator-toolbox[movingtab] > #titlebar > #TabsToolbar {
 padding-bottom: unset !important;

}

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

}

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

}

/* hide windows-controls */

  1. TabsToolbar #window-controls {display:none!important;}

/* move caption buttons to right of Tab bar */

  1. main-window[tabsintitlebar]:not([inFullscreen="true"]) #toolbar-menubar[autohide="true"] ~ #TabsToolbar .titlebar-buttonbox-container {
position: fixed !important;
right: 0 !important;
top: calc(6px + var(--tab-min-height)) !important;
display: block !important;
visibility: visible !important;

}

  1. toolbar-menubar[autohide="true"] ~ #TabsToolbar {paddin
  (2) On Windows, show the menu bar
  (3) Enable the following rule by removing the comment tags */

/*

  1. navigator-toolbox {
 padding-top: 20px !important;

}

  • /

/* If there is an undesirable color behind the tab bar, either

  (1) Install a theme to fill in the background from
      https://addons.mozilla.org/firefox/themes/
  (2) Enable the following rule by removing the comment tags,
      then edit to the desired color */


  1. TabsToolbar {
 background-color: 7fc2f1 !important;

}


/* TABS on bottom */

  1. navigator-toolbox toolbar:not(#nav-bar):not(#toolbar-menubar) {
-moz-box-ordinal-group: 10;

}

  1. TabsToolbar {
-moz-box-ordinal-group: 1000 !important;

}

  1. TabsToolbar {
display: block !important;
position: absolute !important;
bottom: 0 !important;
width: 100vw !important;

}

  1. main-window:not([chromehidden*="toolbar"]) #navigator-toolbox {
padding-bottom: var(--tab-min-height) !important;

}

  1. tabbrowser-tabs {
width: 100vw !important;

}

  1. TabsToolbar #window-controls {
display: none !important;

}

more options

Gyaltnnh, some of that answers one of my questions about changing the tab bar so I'm grateful to you for posting it. But since you know what lines you want to hang on to, why can't you simply delete all the others from your UserChrome.css file and then add the code posted here recently which people, including myself, have found to work? Is it the editing process itself that's causing you a problem? .

more options

I'm not entirely certain where one set of instructions, or code, ends and another begins. I could assume it's the curly braces, but not sure, so just looking for some guidance. I could back up the file and experiment, but that doesn't always turn out real well.

more options

If your current code to get the tabs on bottom isn't working in Firefox 71 then you can add this rule to your userChrome.css or edit an existing rule for #TabsToolbar and add display: block !important;

#TabsToolbar {
 display: block !important;
}

See also:

more options

Asked and answered, repeatedly - and marked as Solved by the original poster.

Time to lock this thread ....

  1. 1
  2. 2