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.

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.

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.

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.

@ the-edmeister

Are they needed ?

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).

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:

• 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
• https://www.userchrome.org/firefox-changes-userchrome-css.html

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

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. .

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

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. .

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

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.

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.

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?

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.

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;

}

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? .

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.

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:

• https://support.mozilla.org/en-US/kb/forum-response-tabs-below-url-bar

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

Time to lock this thread ....