Søg i 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

Denne tråd blev lukket og arkiveret. Stil et nyt spørgsmål, hvis du har brug for hjælp.

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

  • 83 svar
  • 17 har dette problem
  • 41993 visninger
  • Seneste svar af the-edmeister

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

Ændret af the-edmeister den

Valgt løsning

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*/
}
Læs dette svar i sammenhæng 👍 12

Alle svar (20)

more options

Mugsy said

Is this reply intended for me?

Sorry, Mugsy! I was replying to jmiker, above, but I took so long to type out my message that you had posted before I did.

The issue that jmiker is having appears to be related to the inherited opacity property, or possibly an inherited colour property, when Firefox is not the application with focus.

As for your problem, have you tried the userChrome.css code with the XUL loaded, to see if it works, there? I could be that you need to completely exit and start for it to take effect in your selected profile.

more options

phumphries said

have you tried the userChrome.css code with the XUL loaded?

Thanks for the reply. I'm not familiar with "XUL".

more options

Mugsy said

phumphries said
have you tried the userChrome.css code with the XUL loaded?

Thanks for the reply. I'm not familiar with "XUL".

phumphries said

Davezed said
How does a chap access this...chrome://browser/content/browser.xul ?

Type (or copy and paste) chrome://browser/content/browser.xul into the address bar and press the Enter key. You will then see your browser interface in the tab as though it were a web page.

You can select Tools / Web Developer / Inspector (CTRL-Shift-C in Firefox for Windows) and browse around to see the code behind the UI.

So armed, you are ready to start making things up to change your interface, if you also know some CSS.

XUL (XML User Interface Language) is how Mozilla builds its UI. With the advent of HTML5, it did not catch on outside of Mozilla's products, and Mozilla is moving away from it, too, but you can take a deep dive with the XUL Tutorial, if you really want to find out more.

It was a great idea, for its time: use the browser's own engine to draw the browser's interface(s). Thank Netscape for that one!

more options

phumphries said

XUL (XML User Interface Language) is how Mozilla builds its UI.

Thanks for the reply, but all this appears to do is open what looks like another browser GUI within a FF window. Not reaaly what I'm looking for.

This thread has dozens of users saying the posted solution works for them. So what's different about my own computer that is preventing the solution from working?

more options

applied the edit, however now my inactive tabs are unreadable. i tried the two fixes for it that i saw however neither has worked.

is there an updated css section for tabs that doesnt make them invisible (gray on gray).

worst thing is that i was deferring the stupid update for the last few weeks and then i came in this morning and it just auto upgraded! and i couldn't seem to select "never update" as that option no longer exists :(

man i really hate what firefox has become. shame there is no alternative.

EDIT: got it the way i like

#TabsToolbar {

position: absolute !important; bottom: 0 !important; width: 100vw !important; background-color: var(--toolbar-bgcolor) !important; color: black !important; }

Ændret af backbuttonsucks den

more options

Mugsy said

...all this appears to do is open what looks like another browser GUI within a FF window.

That is, in fact, what it does. The purpose is so that you can play around with the CSS until you figure out what setting makes your UI work properly, without having to restart Firefox to test every change (inserting "color: red;" immediately changes the colour of the element to red, in the version of the browser loaded into the Firefox tab). Using the Inspector (CTRL-Shift-C), you can temporarily add and de-activate code until you have something that works, and then you can edit your userChrome.css, restart and see if it works, actually.

After all that, you might have a clue as to what is different about your computer that is preventing one of the common solutions from working.

more options

backbuttonsucks said

i tried the two fixes for it that i saw however neither has worked.

Which fixes were these? Were you able to manipulate the colours using specific "color: whatever;" instructions in the #TabsToolbar section?

Whilst I typed out this reply, backbuttonsucks posted that adding a "color:" line to the #TabsToolbar section worked.

Ændret af Peter Humphries den

more options

phumphries said

That is, in fact, what it does. The purpose is so that you can play around with the CSS until you figure out what setting makes your UI work properly, without having to restart Firefox to test

Unfortunately for me, something like moving the labs isn't something you can see the results of using that method. The tabs (using XUL) already appear at the top of the window. There are no toolbars between them and the window using that interface. :(

more options

Mugsy said

The tabs (using XUL) already appear at the top of the window. There are no toolbars between them and the window using that interface. :(

Interestingly enough, I just noticed that my browser and the "browser" shown in browser.xul are different, too!

For that, I do not have an answer.

more options

cor-el said

This code is working for me in Firefox 65. 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). Add code to the userChrome.css file below the default @namespace line. etc.



Doesn't make any difference to my Win7 FF65 (64 bit) lap top. Very frustrated with this problem. Cannot find a way to get tabs into the correct position.

Ændret af malaus1 den

more options

Doesn't make any difference to my Win7 FF65 (64 bit) lap top. Very frustrated with this problem. Cannot find a way to get tabs into the correct position.

Sorry about answering inside the quote earlier.
more options

Hi malaus1

If the userChrome.css file isn't working then there might be a problem with the file.

Is userChrome.css in the correct location in the chrome folder in the profile folder?

You can use the button on the "Help -> Troubleshooting Information" (about:support) page to go to the current Firefox profile folder or use the about:profiles page.

Also note that userChrome.css and the chrome folder names are case sensitive and that the file needs to be a plain text file (no formatting).

You can check if there isn't a hidden .css or .txt file extension appended (userChrome.css.css or userChrome.css.txt).

more options

Thanks Corel. I'm pretty sure I am in the right place (see pic). The additional .css files are early suggestions that were unsuccessful so have renamed them.

more options

Oh Corel, a PS - FF did another update while I was in the middle of a fiddle with the file today. I also have "Colourful Tabs" add on working so I disabled that to no effect.

more options

I'm not sure, but I think I see some RTF formatting code ({\rtf1\ansi\) in the screenshot that might indicate you saved the file as a rich text file in some MS editor (Word?) and not as a plain text file.

more options

Not sure about that. I copied the text from the info on this site into notepad which doesn't give me a choice. That's not to say you're wrong as I've been chasing this for some tome now. I'll start all over again tomorrow with a new file.

more options

Another PS Corel - just did a search in the file for "rtf" for no result. Have uploaded the file in question which is sooo much bigger than the one that worked with earlier versions of FF ----

Here is the latest file I'm using which appears a few times thru this subject ----

@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); .menu-iconic-text{ color: #000 !important; font-weight:bold!important;}

{\rtf1\ansi\ansicpg1252\deff0\deflang1033{\fonttbl{\f0\fswiss\fcharset0 Arial;}}

{\*\generator Msftedit 5.41.15.1515;}\viewkind4\uc1\pard\f0\fs20 @namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); /* only needed once */\par \par /* TABS: on bottom */\par

  1. navigator-toolbox toolbar:not(#nav-bar):not(#toolbar-menubar) \{-moz-box-ordinal-group:10\}\par
  2. TabsToolbar \{-moz-box-ordinal-group:1000!important\}\par

\par

  1. TabsToolbar \{\par
position: absolute !important;\par
bottom: 0 !important;\par
width: 100vw !important;\par

\}\par \par

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

\}\par

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

\par /* TABS: height */\par

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

\}\par

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

\}\par \par

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

\}\par \par

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

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

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

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

 width: 40px;\par

\}\par \par /* Override vertical shifts when moving a tab */\par

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

\}\par

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

\}\par

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

\}\par \par /* hide windows-controls */\par

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

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

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

\}\par

  1. toolbar-menubar[autohide="true"] ~ #TabsToolbar \{padding-right: 100px !important;\}\par

}

more options

And I notice there is an "rtf" mentioned 4th line down with a scroll bar under. No idea what that's all about. Tomorrow is another day. Thanks for trying.

Ændret af malaus1 den

more options

Hi, malaus1.

Your userChrome.css file appears to be full of Microsoft XML and escape codes.

You need a plain text version of one of the userChrome.css files linked from this thread (or others), or the one in the "Solution" at the top. Ensure that you are using NotePad or some other plain text editor, and ensure that NotePad saves the file as text with the .css extension.

more options

phumphries & corel - thanks so much for your input. A eureka moment found what I was doing wrong. I had copied ALL the first solution text from this site & pasted into Notepad. This brought the first line as well as the scroll bars into play. Once I only copied the text under the first line of code & pasted that under MY 1st line of code without any scroll bars included it all worked. Now I only have trouble with "Colourful Tabs" add on which now colours all the tool bars entirely with the currently open tab colour. Thanks again.

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