cor-el said

You can try this code in userChrome.css.

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

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

This is the same stuff most have been sharing and it does not work! I just downloaded the file for the tabs below and renamed it accordingly and did not work and I have my config setting to true so that is not an issue.

scottish2 said

Fire Marshal Bil said

No, I just modified the code that I already had with some online help, leaving much of it intact. And, that worked. Thank you for the link, sir. In fact, I had already been there. They have been far more, no, infinitely more, helpful than the Firefox forums. I have also made the background of the active tab black which looks sharp. I am good to go, until the next FF iteration. :-)

Can you post your coding here so I can try it also as so far nothing I have tried is getting the tabs set to bottom.

It is a hack job, LOL. But it works. That's all I care about.

/* 4. TABS: on bottom [display: block !important;] is a fix for ff 71*/ /* Those 2 lines, maybe don't need. */ /* #navigator-toolbox toolbar:not(#nav-bar):not(#toolbar-menubar) {-moz-box-ordinal-group:10} */ /* #TabsToolbar {-moz-box-ordinal-group:1000!important} */

1. TabsToolbar {

display: block !important;
position: absolute !important;
bottom: 0 !important;
width: 100vw !important;

}

.tab-background[selected="true"] {

   background-attachment: none!important;
   background-color: #383c4a!important;
   background-image: none!important;
   background-position: none!important;
   background-repeat: none!important;
   background-size: none!important;

}

/* ROUNDED INACTIVE TABS */ .tabbrowser-tab::after, .tabbrowser-tab::before { border-left: none !important; } .tab-background { border-radius: 12px 12px 0px 0px !important; } .tab-line { display: none !important; }

1. tabbrowser-tabs {

 width: 100vw !important;

}

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

root #tabbrowser-tabs {

--tab-min-height: 28px !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 -0px inset, -moz-dialog 0 0px !important;

}

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;

}

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

 width: 40px;

}

/* 7. 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;

}

Please let me know if it worked for you.

Fire Marshal Bil said

Please let me know if it worked for you.

providing I am just copying and pasting your entire post (Except the opening hack job LOL line then no doesn't seem to change anything for me tabs still on top.

This is what I pasted into the CSS file. I emptied mine all except the namespace line at the start as I assume that needed to be there and then the below is what I pasted. Is this what I needed to paste or....???

/* 4. TABS: on bottom [display: block !important;] is a fix for ff 71*/
/* Those 2 lines, maybe don't need. */
/* #navigator-toolbox toolbar:not(#nav-bar):not(#toolbar-menubar) {-moz-box-ordinal-group:10} */
/* #TabsToolbar {-moz-box-ordinal-group:1000!important} */

    TabsToolbar { 

display: block !important;
position: absolute !important;
bottom: 0 !important;
width: 100vw !important;

}

.tab-background[selected="true"] {

   background-attachment: none!important;
   background-color: #383c4a!important;
   background-image: none!important;
   background-position: none!important;
   background-repeat: none!important;
   background-size: none!important;

}

/* ROUNDED INACTIVE TABS */
.tabbrowser-tab::after, .tabbrowser-tab::before {
border-left: none !important;
}
.tab-background {
border-radius: 12px 12px 0px 0px !important;
}
.tab-line {
display: none !important;
}

    tabbrowser-tabs { 

 width: 100vw !important;

}

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

    root #tabbrowser-tabs { 

--tab-min-height: 28px !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 -0px inset, -moz-dialog 0 0px !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;

}

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

 width: 40px;

}

/* 7. 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;

}

scottish2 said

Fire Marshal Bil said

Please let me know if it worked for you.

providing I am just copying and pasting your entire post (Except the opening hack job LOL line then no doesn't seem to change anything for me tabs still on top.

Wow! Are you using ver 71.0 (64-bit)?

You can see why there is such an outrage on the part of many. Considering part of my Saturday was wasted on this abomination, I am not a happy camper. Wasting yet another few hours on a Saturday fighting with Firefox in front of the computer when I already spend almost 30 hours in front of the computer on weekdays puts me in a bloody foul mood! Darn, there are so many other priorities in life...

Fire Marshal Bil said

scottish2 said

Fire Marshal Bil said

Please let me know if it worked for you.

providing I am just copying and pasting your entire post (Except the opening hack job LOL line then no doesn't seem to change anything for me tabs still on top.

Wow! Are you using ver 71.0 (64-bit)?

You can see why there is such an outrage on the part of many. Considering part of my Saturday was wasted on this abomination, I am not a happy camper. Wasting yet another few hours on a Saturday fighting with Firefox in front of the computer when I already spend almost 30 hours in front of the computer on weekdays puts me in a bloody foul mood! Darn, there are so many other priorities in life...

yeap 71 (64 bit)

And I agree I mean I haven't a clue how to hand browser reconfiguration reason I come here as there are those who do and always helpful. But point we're all making is we should not have to come here for something so simple as tabs on bottom when they had it in the past so it is a very doable fix that would make most the community happy campers!

For me I am sort of stuck with FF as I hate microsofts browsers haven't used them in years except the very rare occasion to test something and I don't trust chrome at all based on privacy issues going on at Google and never really liked Safari so am sort of stuck with FF like it or not and just want the browser to work as I want it to not have to mess about like this every couple of months!

Could you guys please put <pre> before and </pre> after your code blocks to protect them from the forum interpreting them as formatting instructions? There are links to the right of each reply to Edit them.

jscher2000 said

Could you guys please put <pre> before and </pre> after your code blocks to protect them from the forum interpreting them as formatting instructions? There are links to the right of each reply to Edit them.

Think I adjusted mine right only getting one side scroll now at the bottom of the code I pasted. Thanks for the tip!

You did comment out the most im[ortant lines at the top that set tge -moz-box-ordinal-group property and also omitted the '#'before #TabsToolbar The latter migh have happended because the forum software interpretes a leading '#' as formatting code (OL; ordered list). Compare this with:

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

/* 4. TABS: on bottom [display: block !important;] is a fix for ff 71*/
/* Those 2 lines, maybe don't need. => you do need the following two lines */
#navigator-toolbox toolbar:not(#nav-bar):not(#toolbar-menubar) {-moz-box-ordinal-group:10} 
#TabsToolbar {-moz-box-ordinal-group:1000!important}

#TabsToolbar { 
 display: block !important; /*required for 71+*/
 position: absolute !important;
 bottom: 0 !important;
 width: 100vw !important;
}

cor-el said

You did comment out the most im[ortant lines at the top that set tge -moz-box-ordinal-group property and also omitted the '#'before #TabsToolbar The latter migh have happended because the forum software interpretes a leading '#' as formatting code (OL; ordered list). Compare this with:

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

---

/* 4. TABS: on bottom [display: block !important;] is a fix for ff 71*/
/* Those 2 lines, maybe don't need. => you do need the following two lines */
#navigator-toolbox toolbar:not(#nav-bar):not(#toolbar-menubar) {-moz-box-ordinal-group:10} 
#TabsToolbar {-moz-box-ordinal-group:1000!important}

#TabsToolbar { 
 display: block !important; /*required for 71+*/
 position: absolute !important;
 bottom: 0 !important;
 width: 100vw !important;
}

Yeah wondered that when I copied his code but even making this minor fix same thing tabs still up top.

OK for those in this thread needed it here is the full resolution to this.

First for all file and folder names note the Cap and Lower Case as these are case sensitive so they must be proper for them to work.

chrome userChrome.css

First open a new tab and in the address-bar type the below and hit enter

about:profiles

there will be two folder locations select the one for the ROAMING folder this will open up windows file explorer

This will open the root roaming folder. In this you may and may not see a chrome folder if you do then go into it and skip the next section

If you DO NOT see the chrome folder then right click somewhere on the right side of the screen in a white area and select new and then select folder. This will pop a new folder on the right simple name it chrome. If it does not let you set the name (It should by default but in case you click somewhere by mistake) just right click the NEW FOLDER and select rename and rename it chrome. one named go into the chrome folder

If you already have a userChrome.css file then skip this step!

If you chrome folder is empty then right click on the right like you did for the above step and select NEW and then in this drop down menu select text document and again name it as below making sure to remove all the old text first!

userChrome.css

when you click elsewhere to confirm the new name it's going to ask you if you want to change the extension just confirm yes!

Now for the code. Copy all the code below and then in there open the userChrome.css file then past the code below into the file and close and save it.

Restart your browser and the tabs should be on the bottom.

This code will also color the folders in your bookmark toolbar to a yellowish folder color. I found it better then the default grey. You can adjust the folder colors there also if you so chose in this code. NOTE this only changes the bookmark toolbar folder color I could not get the main bookmark menu to change to yellow but for me was never an issue so if you need to change the bookmark menu also you will need to ask a separate question in this to see if someone can help you with the menu.

I am sure if you need additional tweaks there are others here that can help you customize this code further but this will get you past the tabs on top issue for FF71

Copy everything below the bar until end of post

@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); /* only needed once */

/* 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 {
 display: block !important; /*required for 71+*/
 position: absolute !important;
 bottom: 0 !important;
 width: 100vw !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: 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;
}

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

/* drag space */
.titlebar-spacer[type="pre-tabs"],
.titlebar-spacer[type="post-tabs"] {
  width: 40px;
}

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

/* Colored bookmark sidebar, toolbar, menu button containers */
  /* Standard folder */
  #bookmarks-view treechildren::-moz-tree-image(container),
  #PlacesToolbarItems toolbarbutton[container="true"] .toolbarbutton-icon,
  #PlacesToolbarItems menu[container="true"] .menu-iconic-left,
  #BMB_bookmarksPopup menu[container="true"] .menu-iconic-icon {
    fill: gold !important;
  }
  /* Live Bookmark (RSS Feed) */
  #bookmarks-view treechildren::-moz-tree-image(container, livemark),
  #PlacesToolbarItems toolbarbutton[container="true"][livemark="true"] .toolbarbutton-icon,
  #PlacesToolbarItems menu[container="true"][livemark="true"] .menu-iconic-left,
  #BMB_bookmarksPopup menu[container="true"][livemark="true"] .menu-iconic-icon {
    fill: orange !important;
  }
  /* Smart bookmark folder */
  #bookmarks-view treechildren::-moz-tree-image(container, query),
  #PlacesToolbarItems toolbarbutton[container="true"][query="true"] .toolbarbutton-icon,
  #PlacesToolbarItems menu[container="true"][query="true"] .menu-iconic-left,
  #BMB_bookmarksPopup menu[container="true"][query="true"] .menu-iconic-icon {
    fill: dimtan !important;
  }
  /* These "containers" are SVG in the sidebar, not yet on the menu */
  #bookmarks-view treechildren::-moz-tree-image(container, OrganizerQuery_BookmarksMenu) {
    fill: tan !important;
  }
  #bookmarks-view treechildren::-moz-tree-image(container, OrganizerQuery_BookmarksToolbar) {
    fill: tan !important;
  }
  #bookmarks-view treechildren::-moz-tree-image(container, OrganizerQuery_UnfiledBookmarks) {
    fill: tan !important;
  }

Maybe it's no longer necessary, but historically:

• the chrome folder name needs to be all lower-case
• the userChrome.css file name needs to be all lower case except the C in the center

If other mixes of capital and lower case letters do not work, please try that.

jscher2000 said

Maybe it's no longer necessary, but historically:

• the chrome folder name needs to be all lower-case
• the userChrome.css file name needs to be all lower case except the C in the center

If other mixes of capital and lower case letters do not work, please try that.

I went ahead and edited it I think I put it in caps just to stand out but should have just used bold instead so swapped it from caps to bold just so there are no issues!

Thanks again for the tip!