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.

Reposition Tabs at bottom, directly above web page in Firefox 65.0? -- for Windows 10 - not for MacOSX

more options

Can anyone supply updated code for the userChrome.css for restoring Tabs to below Menu bar, Location bar, and Personal Toolbar? The code below was working until I upgraded to 65.0.

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

Thank you for the help.


edited the title of this thread to include Windows 10 as the operating system the OP posted from

Can anyone supply updated code for the userChrome.css for restoring Tabs to below Menu bar, Location bar, and Personal Toolbar? The code below was working until I upgraded to 65.0. /* tabs on bottom */ #navigator-toolbox toolbar:not(#nav-bar):not(#toolbar-menubar) {-moz-box-ordinal-group:10} #TabsToolbar {-moz-box-ordinal-group:1000!important} Thank you for the help. ''edited the title of this thread to include Windows 10 as the operating system the OP posted from''

Modified by the-edmeister

Chosen solution

EDIT: I've updated the code to work with recent Firefox builds (tested with Fx 65-71).


You can adjust the two --tab-min-height definition under the Height section to suit your needs (default:33px; compact:29px; touch:43px). There are a few more variables that may need adjustment.

Add code to the userChrome.css file below the default @namespace line.


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

/* TABS: bottom - Firefox 65 and newer; should for now work again with XUL @namespace */

#navigator-toolbox toolbar:not(#nav-bar):not(#toolbar-menubar) {
  -moz-box-ordinal-group: 10 !important;
}

#TabsToolbar {
  -moz-box-ordinal-group: 1000 !important;
  display: block !important;
  position: absolute !important;
  bottom: 0 !important;
  width: 100vw !important;
}

#tabbrowser-tabs {
  width: 100vw !important;
}

*|*:root:not([chromehidden*="toolbar"]) #navigator-toolbox {
  padding-bottom: calc(var(--tab-min-height) + 1px) !important; /*adjust*/
}

/* position Tab bar with Menu bar and Title bar hidden for Firefox 65-73 - omit in Firefox 74 (Nightly) */
*|*:root[tabsintitlebar]:not([inFullscreen="true"]):not([sizemode="maximized"])
 #toolbar-menubar[autohide="true"] ~ #xTabsToolbar{
  bottom: var(--tab-min-height) !important;
  padding-top: calc(var(--tab-min-height) - 20px) !important; /*adjust*/
}

/* TABS: height */
*|*:root {
  --tab-toolbar-navbar-overlap: 0px !important;
  --tab-min-height: 25px !important; /*adjust to set height or omit to use density*/
  --tab-min-width:  80px !important; /*adjust to set width or omit to use default*/
}

#TabsToolbar {
  height: var(--tab-min-height) !important;
  margin-bottom: 1px !important; /*adjust*/
  box-shadow: ThreeDShadow 0 -1px inset, -moz-dialog 0 1px !important; /*omit*/
  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 hide*/
#TabsToolbar #window-controls {display: none !important;}

/* caption buttons - hide */
*|*:root[tabsintitlebar]:not([inFullscreen="true"])
 #toolbar-menubar[autohide="true"] ~ #TabsToolbar
 .titlebar-buttonbox-container {display: none !important;}

If you want to have the caption buttons visible on the Tab bar with the Menu bar and Title bar hidden then use this code as a start to replace the above posted "caption buttons - hide" rule. The caption button are positioned absolutely via a top property, so this is affected by the Bookmarks Toolbar (PersonalToolbar) being visible or hidden. Use either of the two --personal-toolbar-height settings that apply to the state (collapsed/hidden) of the Bookmarks Toolbar.

/* caption buttons - PersonalToolbar hidden/visible */
*|*:root {--personal-toolbar-height:  0px !important}  /*PersonalToolbar collapsed*/
*|*:root {--personal-toolbar-height: 24px !important}  /*PersonalToolbar visible*/
*|*:root {--caption-buttons-adjust: -12px !important}  /*caption buttons - adjustment*/

*|*:root[tabsintitlebar]:not([inFullscreen="true"]) #toolbar-menubar[autohide="true"]
 ~ #TabsToolbar .titlebar-buttonbox-container {
  position: fixed !important;
  display: block !important;
  right: 0 !important;
  top: calc(var(--tab-min-height) + var(--personal-toolbar-height) + var(--caption-buttons-adjust));
  visibility: visible !important;
  height: var(--tab-min-height) !important;
}

/* Caption Buttons - HEIGHT */
.titlebar-buttonbox-container toolbarbutton {
  height: var(--tab-min-height) !important;
  margin: 0px -5px 0px -5px !important; /*adjust margin-left and margin-right*/
  padding: 0 !important;
}

/* Caption Buttons - PADDING */
*|*:root[tabsintitlebar]:not([inFullscreen="true"])
 #toolbar-menubar[autohide="true"] ~
  #TabsToolbar {
   padding-right: 100px !important; /*adjust*/
}
Read this answer in context 👍 12

All Replies (20)

more options

Guys (and ladies) - you saved my day. Thanks a thousand times for the information how to get the tabs back to the bottom in Firefox 65!

more options

A million thanks to @cor-el for posting the code. If you wrote it, a billion more!

slcosta said

Why don't they simply give an option to do so on the setup? I just wasted an hour finding out how to do this. This is at least the second time they've desupported the previous method. To say I'm angry and frustrated is an understatement. I don't know what percentage of users want their tabs on the bottom, but there seems to be a lot. I would prefer it as the default.

I'll never understand this design *flaw*. It's absolutely ridiculous. In what alternate reality is it somehow better to have to move your mouse over both the (in my case quite cluttered) bookmarks bar and the address bar to reach the tabs to switch between them?

But that's my opinion. People are free to disagree and prefer the tabs on top. More power to you people! But at least let me CHOOSE it for myself! Wasn't customizability supposed to be the biggest point of Firefox?

Coding this in and then requiring people much smarter than myself to write two pages of additional code just to be able to have the UI as I need it to be, is not intelligent UI design.. that's just pure idiocracy.

  • Gooosfraaabaaa*

Aaand, I'm calm!

I was afraid that the Simple Tab Groups extension might fail with the code, but I wanted to report that it's working flawlessly. So for anyone as worried as I was, it's all good! :D

more options

I pasted the code in my chrome file and the tabs now appear on the bottom. The problem is that the tab text title is blank, unless it is the active tab. All the other open tabs are blank, except for the icon. Is there a solution? Thanks

more options

Karmalynda said

I pasted the code in my chrome file and the tabs now appear on the bottom. The problem is that the tab text title is blank, unless it is the active tab. All the other open tabs are blank, except for the icon. Is there a solution? Thanks

Try changing the --tab-min-height to 33px for both instances per the instructions below.

You can adjust the two --tab-min-height definitions under the Height section to suit your needs (give them both the same value; default:33px; compact:29px; touch:43px).

more options

Here is my chrome.css file:

#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;
 background-color: var(--toolbar-bgcolor) !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;
}

/* hide windows-controls */
#TabsToolbar #window-controls {display:none!important;}

/* move caption buttons to right of Tab bar */
#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;
}
#toolbar-menubar[autohide="true"] ~ #TabsToolbar {padding-right: 100px !important;}

It appears the the height is already set to 33px. What should I change? Here is the image,

Thanks

Modified by cor-el

more options

I had this issue and the chosen's solution's userChrome.css code sorted it for me, (along with macOSuser's fix) but I still have these annoying gaps at the side of the tab bar:

https://i.imgur.com/ATtU7H0.png

In the old userChrome.css file that I used to get tabs on the bottom, I included this to get rid of those gaps:

   #main-window[tabsintitlebar] #TabsToolbar .titlebar-placeholder
   {
     visibility: collapse !important;
   }

But it doesn't seem to get rid of them any more.

more options

Maybe adjust the drag space setting (also check the customize window) or use display:none!important; to disable the drag space altogether.

/* drag space */
.titlebar-spacer[type="pre-tabs"],
.titlebar-spacer[type="post-tabs"] {
  width: 20px !important;
}
more options

cor-el said

Maybe adjust the drag space setting (also check the customize window) or use display:none!important; to disable the drag space altogether.
/* drag space */
.titlebar-spacer[type="pre-tabs"],
.titlebar-spacer[type="post-tabs"] {
  width: 20px !important;
}

That's fixed it, thankyou :)

more options

slcosta said

This worked for me too. Why don't they simply give an option to do so on the setup? I just wasted an hour finding out how to do this. This is at least the second time they've desupported the previous method. To say I'm angry and frustrated is an understatement. I don't know what percentage of users want their tabs on the bottom, but there seems to be a lot. I would prefer it as the default.
more options

Anaya said

i really appreciate all the individuals trying to help but i am still so frustrated that this keeps happening. Does anyone know who we can actually complain to? Anyway, I am confused by the directions. Am I supposed to copy the whole set of code above or just the part below the first line? I.e., is the @namespace line part of the code I am pasting or not? And is there a simple explanation of how to find the CSS file or do I need to read all 3 of those help pages above?


I'm with you--still cannot get this code to work on a laptop or iMac. I've used Mozilla browsers since Netscape, but this tab thing is getting ridiculous.

Is there no way they could just make a setting like there used to be? Tabs on top or bottom.

I've tried to adjust to the top tabs--but it slows me down so much that I don't think I can use Firefox at work any more. I work with a lot of windows open and I can't just drag Firefox over now. Instead -- just keep hitting tabs that change the site.

I was able to fix the code last time an update screwed up the tabs last year, but it's not working this time, and I'm tired of having to fix the tabs or put in code then reverse code. I am not a programmer--I just want a browser that is user friendly. Mozilla took a great product and made it mediocre.

more options

suzanne77 said

I've tried to adjust to the top tabs--but it slows me down so much that I don't think I can use Firefox at work any more. I work with a lot of windows open and I can't just drag Firefox over now. Instead -- just keep hitting tabs that change the site.

I solved that particular problem at work by just loading the menubar, which gives me plenty of room to drags, but it's still ridiculous.

more options

ArniVidar said

suzanne77 said
I've tried to adjust to the top tabs--but it slows me down so much that I don't think I can use Firefox at work any more. I work with a lot of windows open and I can't just drag Firefox over now. Instead -- just keep hitting tabs that change the site.

I solved that particular problem at work by just loading the menubar, which gives me plenty of room to drags, but it's still ridiculous.

Do you mean the Firefox menu bar? That already open. The only place I can put the cursor and drag the browser is about a quarter of an inch between the green button for size and the first tab and about 1/2 inch between back arrow and the edge. If I try to move the browser at any other place--nothing happens--it the cursor just slides over the men or grabs a tab. It is so much faster to work with the tabs on the bottom. I have no idea why they came up this idea.

more options

suzanne77 said

Do you mean the Firefox menu bar? That already open. The only place I can put the cursor and drag the browser is about a quarter of an inch between the green button for size and the first tab and about 1/2 inch between back arrow and the edge.

Yes, the Firefox Menu Bar. It creates a huge line above the address bar/tabs that allows you to drag everything around. See attachment.

more options

Thanks, this helped me too, but bright line annoyed me so I fixed them

under #TabsToolbar change sizes to 0px or copy this line instead of that one:

box-shadow: ThreeDShadow 0 0px inset, -moz-dialog 0 0px !important;

more options

Thanks to cor-el and oreskec I'm almost back to where I was before the update. Does anyone know how to change the colour of the white line above the selected tab or, preferably, remove it entirely?

more options

oreskec said

Thanks, this helped me too, but bright line annoyed me so I fixed them under #TabsToolbar change sizes to 0px or copy this line instead of that one: box-shadow: ThreeDShadow 0 0px inset, -moz-dialog 0 0px !important;

Nothing I tried solved the problem, and I actually read a review on a tech site that claimed it is almost impossible to fix the tabs in this version. They are making it more difficult to change them.

So, I solved this problem. When I went on to my office computer (also Mac), and my tabs were on the bottom--I checked and the browser is still v64.

So I went to the preferences and stopped the auto updates, and I'm going to revert back to 64 on my other browsers until Mozilla comes up with a real fix, a choice, or find a better browser for tabs.

Didn't update Windows 7 at home for two years because it kept crashing. Never really affected the OS.

Modified by suzanne77

more options

I like my tabs at the bottom below a multi-row of bookmarks. My Firefox 65.0 is now displaying everything correctly. Haven't got a clue if this CSS is all done correctly but with various cut and pastes, I've managed to get it displaying as I like. Here is what is inside my UserChrome file that you can cut and paste if you want the same as me:


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

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

}

  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;

}

  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 {padding-right: 100px !important;}

/* Background for Light and Dark themes */

  1. main-window[lwthemetextcolor="bright"] #TabsToolbar,
  2. main-window[lwthemetextcolor="dark"] #TabsToolbar {
 background-color: var(--chrome-secondary-background-color) !important;
 background-image: none !important;

}

  1. main-window[lwthemetextcolor="dark"] .scrollbutton-up,
  2. main-window[lwthemetextcolor="dark"] .scrollbutton-down,
  3. main-window[lwthemetextcolor="dark"] .tabs-newtab-button,
  4. main-window[lwthemetextcolor="dark"] #new-tab-button,
  5. main-window[lwthemetextcolor="dark"] #alltabs-button {
 fill: var(--lwt-text-color) !important;

} /* Left and right borders on Win 7 & 8, but not on 10 and later: */ @media (-moz-os-version: windows-win7), (-moz-os-version: windows-win8) {

 /* Vertical toolbar border */
 #main-window[sizemode=normal] #navigator-toolbox > toolbar#TabsToolbar {
   border-left: 1px solid hsla(240,5%,5%,0.3) !important;;
   border-right: 1px solid hsla(240,5%,5%,0.3) !important;;
   background-clip: padding-box;
 }

}

/* Override vertical shifts when moving a tab (9 Jan 2018) */

  1. TabsToolbar[movingtab] {
 padding-bottom: 0 !important;

}

  1. TabsToolbar[movingtab] > .tabbrowser-tabs {
 padding-bottom: 0 !important;
 margin-bottom: 0 !important;

}

  1. TabsToolbar[movingtab] + #nav-bar {
 margin-top: 0 !important;

}



/* Curve the background tabs at the upper left and right corners

  May not work on add-on themes. */



.tabbrowser-tab {

 border-radius: 10px 10px 0px 0px / 15px 15px 0px 0px !important;

} /* Curve active tab and slightly overlap neighboring tabs */ .tabbrowser-tab .tab-background[selected="true"] {

 margin-left: -1px !important;
 margin-right: -1px !important;
 border-radius: 10px 10px 0px 0px / 15px 15px 0px 0px !important;

} /* Shorten the tab line along the tops of tabs */ .tab-line {

 margin-left: 9px !important;
 margin-right: 9px !important;

} /* Shorten the vertical lines between background tabs */ .tabbrowser-tab::before, .tabbrowser-tab::after {

 margin-top: 9px !important;

}

/** "Light" Theme (Dark Text) **/

/* Border the background tabs (10% gray) for greater visibility */

  1. main-window:not([lwthemetextcolor="bright"]) .tabbrowser-tab:not([selected="true"]) {
 border: 1px solid rgba(0,0,0,.1) !important;
 border-bottom-color: transparent !important;
 margin-right: -1px !important;

} /* Remove short vertical lines between background tabs */

  1. main-window:not([lwthemetextcolor="bright"]) .tabbrowser-tab::before,
  2. main-window:not([lwthemetextcolor="bright"]) .tabbrowser-tab::after {
 border: none !important;

}



  1. personal-bookmarks {
 display: block;

}

  1. personal-bookmarks #PlacesToolbar {
 display: block;
 min-height: 0px;
 overflow-x: hidden;
 overflow-y: auto;
 max-height: 999px;

max-height: 999px !important; }

  1. personal-bookmarks #PlacesToolbar > hbox {
 display: -moz-stack !important;
 left: 0px;
 right: 0px;
 width: 100%;

}

  1. personal-bookmarks #PlacesToolbar #PlacesToolbarItems {
 overflow-x: visible;
 overflow-y: visible;

}

  1. personal-bookmarks #PlacesToolbar #PlacesToolbarItems > box {
 display: block;

}

  1. personal-bookmarks #PlacesToolbar > .bookmark-item{
 visibility: visible !important;

}

  1. personal-bookmarks #PlacesToolbar .chevron{
 display: none;

}

  1. personal-bookmarks #PlacesToolbar > hbox > hbox{
 overflow-x: visible;
 overflow-y: visible;

}

  1. personal-bookmarks #PlacesToolbar #PlacesToolbarDropIndicator[collapsed="true"],
  2. personal-bookmarks #PlacesToolbar #PlacesToolbarDropIndicator{
 display: none;

}

  1. personal-bookmarks #PlacesToolbar toolbarbutton.bookmark-item{
 padding-top: 2px;
 padding-bottom: 2px;
 /*margin-left: -4px !important;
 padding-right: 9.5px !important;*/

}

  1. personal-bookmarks #PlacesToolbar toolbarbutton.bookmark-item:hover:active:not([disabled="true"]),
  2. personal-bookmarks #PlacesToolbar toolbarbutton.bookmark-item[open="true"] {
 padding-top: 2px !important;
 padding-bottom: 2px !important;
 /*-moz-padding-start: 4px;
 -moz-padding-end: 2px;*/

}

  1. personal-bookmarks #PlacesToolbar toolbarseparator{
 -moz-appearance: none !important;
 visibility: visible !important;
 display: inline;
 text-shadow: none !important;
 border-left: 3px solid ThreeDShadow !important;
 border-right: 3px solid ThreeDHighlight !important;
 vertical-align: middle;

}

  1. personal-bookmarks toolbarbutton.bookmark-item[dragover][open]{
 -moz-appearance: toolbarbutton;

}

  1. navigator-toolbox toolbar:not(#nav-bar):not(#toolbar-menubar):not(#TabsToolbar) {
 max-height: 999px !important;

}

more options

rreeve2 said

I like my tabs at the bottom below a multi-row of bookmarks. My Firefox 65.0 is now displaying everything correctly. Haven't got a clue if this CSS is all done correctly but with various cut and pastes, I've managed to get it displaying as I like. Here is what is inside my UserChrome file that you can cut and paste if you want the same as me: @namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); /* only needed once */ /* 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: 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; }
  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; }
  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 {padding-right: 100px !important;}
/* Background for Light and Dark themes */
  1. main-window[lwthemetextcolor="bright"] #TabsToolbar,
  2. main-window[lwthemetextcolor="dark"] #TabsToolbar {
background-color: var(--chrome-secondary-background-color) !important; background-image: none !important; }
  1. main-window[lwthemetextcolor="dark"] .scrollbutton-up,
  2. main-window[lwthemetextcolor="dark"] .scrollbutton-down,
  3. main-window[lwthemetextcolor="dark"] .tabs-newtab-button,
  4. main-window[lwthemetextcolor="dark"] #new-tab-button,
  5. main-window[lwthemetextcolor="dark"] #alltabs-button {
fill: var(--lwt-text-color) !important; } /* Left and right borders on Win 7 & 8, but not on 10 and later: */ @media (-moz-os-version: windows-win7), (-moz-os-version: windows-win8) { /* Vertical toolbar border */ #main-window[sizemode=normal] #navigator-toolbox > toolbar#TabsToolbar { border-left: 1px solid hsla(240,5%,5%,0.3) !important;; border-right: 1px solid hsla(240,5%,5%,0.3) !important;; background-clip: padding-box; } } /* Override vertical shifts when moving a tab (9 Jan 2018) */
  1. TabsToolbar[movingtab] {
padding-bottom: 0 !important; }
  1. TabsToolbar[movingtab] > .tabbrowser-tabs {
padding-bottom: 0 !important; margin-bottom: 0 !important; }
  1. TabsToolbar[movingtab] + #nav-bar {
margin-top: 0 !important; } /* Curve the background tabs at the upper left and right corners May not work on add-on themes. */ .tabbrowser-tab { border-radius: 10px 10px 0px 0px / 15px 15px 0px 0px !important; } /* Curve active tab and slightly overlap neighboring tabs */ .tabbrowser-tab .tab-background[selected="true"] { margin-left: -1px !important; margin-right: -1px !important; border-radius: 10px 10px 0px 0px / 15px 15px 0px 0px !important; } /* Shorten the tab line along the tops of tabs */ .tab-line { margin-left: 9px !important; margin-right: 9px !important; } /* Shorten the vertical lines between background tabs */ .tabbrowser-tab::before, .tabbrowser-tab::after { margin-top: 9px !important; } /** "Light" Theme (Dark Text) **/ /* Border the background tabs (10% gray) for greater visibility */
  1. main-window:not([lwthemetextcolor="bright"]) .tabbrowser-tab:not([selected="true"]) {
border: 1px solid rgba(0,0,0,.1) !important; border-bottom-color: transparent !important; margin-right: -1px !important; } /* Remove short vertical lines between background tabs */
  1. main-window:not([lwthemetextcolor="bright"]) .tabbrowser-tab::before,
  2. main-window:not([lwthemetextcolor="bright"]) .tabbrowser-tab::after {
border: none !important; }
  1. personal-bookmarks {
display: block; }
  1. personal-bookmarks #PlacesToolbar {
display: block; min-height: 0px; overflow-x: hidden; overflow-y: auto; max-height: 999px; max-height: 999px !important; }
  1. personal-bookmarks #PlacesToolbar > hbox {
display: -moz-stack !important; left: 0px; right: 0px; width: 100%; }
  1. personal-bookmarks #PlacesToolbar #PlacesToolbarItems {
overflow-x: visible; overflow-y: visible; }
  1. personal-bookmarks #PlacesToolbar #PlacesToolbarItems > box {
display: block; }
  1. personal-bookmarks #PlacesToolbar > .bookmark-item{
visibility: visible !important; }
  1. personal-bookmarks #PlacesToolbar .chevron{
display: none; }
  1. personal-bookmarks #PlacesToolbar > hbox > hbox{
overflow-x: visible; overflow-y: visible; }
  1. personal-bookmarks #PlacesToolbar #PlacesToolbarDropIndicator[collapsed="true"],
  2. personal-bookmarks #PlacesToolbar #PlacesToolbarDropIndicator{
display: none; }
  1. personal-bookmarks #PlacesToolbar toolbarbutton.bookmark-item{
padding-top: 2px; padding-bottom: 2px; /*margin-left: -4px !important; padding-right: 9.5px !important;*/ }
  1. personal-bookmarks #PlacesToolbar toolbarbutton.bookmark-item:hover:active:not([disabled="true"]),
  2. personal-bookmarks #PlacesToolbar toolbarbutton.bookmark-item[open="true"] {
padding-top: 2px !important; padding-bottom: 2px !important; /*-moz-padding-start: 4px; -moz-padding-end: 2px;*/ }
  1. personal-bookmarks #PlacesToolbar toolbarseparator{
-moz-appearance: none !important; visibility: visible !important; display: inline; text-shadow: none !important; border-left: 3px solid ThreeDShadow !important; border-right: 3px solid ThreeDHighlight !important; vertical-align: middle; }
  1. personal-bookmarks toolbarbutton.bookmark-item[dragover][open]{
-moz-appearance: toolbarbutton; }
  1. navigator-toolbox toolbar:not(#nav-bar):not(#toolbar-menubar):not(#TabsToolbar) {
max-height: 999px !important; }

You have all of these lines of code in your chrome css file? Mine has about 3 lines that have kept the tabs underneath since they changed it in Quantum.

This seems like an awful lot of code--a couple of pages. Am I reading this correctly?

more options

suzanne77 said

You have all of these lines of code in your chrome css file? Mine has about 3 lines that have kept the tabs underneath since they changed it in Quantum. This seems like an awful lot of code--a couple of pages. Am I reading this correctly?

You're saying here above that you had to go back to 64 to keep things the way you wanted them, and that the old code no longer works for you on 65, any more than it works for the rest of us. Now you're saying you have three lines of code that works? I am confused.

Modified by ArniVidar

more options

ArniVidar said

suzanne77 said
You have all of these lines of code in your chrome css file? Mine has about 3 lines that have kept the tabs underneath since they changed it in Quantum. This seems like an awful lot of code--a couple of pages. Am I reading this correctly?

You're saying here above that you had to go back to 64 to keep things the way you wanted them, and that the old code no longer works for you on 65, any more than it works for the rest of us. Now you're saying you have three lines of code that works? I am confused.

Ok--I'll try to clarify. When Quantum updated, lost tabs on bottom. On this forum, there was code posted for both Windows and IOS. I used both, as I had several devices, and the code worked until this update. Yes--there were only 3 or 4 lines of code, and it worked fine for the Quantum update.

That is why I do not understand why we are replacing a few lines of code with a few pages of code just to keep tabs on bottom.

Modified by suzanne77

  1. 1
  2. 2
  3. 3
  4. 4
  5. 5