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.

phumphries said

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

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

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!

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?

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

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.

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.

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

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.

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.

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.

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.

• Help -> Troubleshooting Information -> Profile Directory:
  Windows: Show Folder; Linux: Open Directory; Mac: Show in Finder
• http://kb.mozillazine.org/Profile_folder_-_Firefox

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

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.

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.

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.

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.

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

}

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.

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.

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.