userChrome.css not working on newly installed FF

[m.rumble]

My thanks also to everyone who helped get Firefox working as it was pre-65.
The last link provided by arturox contained the minimum number of lines needed to put those Tabs on the Bottom.
Relwasw 66 is supposed to be a major update. I hope they leave the UI alone next time.

[ineuw]

arturox thanks for the solution. it works for me. Peace reigns in the kingdom again.

[bob c]

This is great--1 more thing--maybe--is there a way as in pre 65--to collapse the tab bar when no tabs are showing--I have a long blue empty bar across the screen when no tabs are showing. The lines in my .css file don't seem to make it do this anymore.

Many thanks

[Grumpus]

This code worked, part from one of the links and part addition for removal of the haze.

Code: Select all

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

/* Remove Haze NavBar */
#nav-bar,
#PersonalToolbar {
  background: transparent !important;
}

[RobertJ]

I had no idea until now that I installed Firefox 65. This is also probably why the prefs file didn't work right (i used the prefs file from the previous version). It also might explain why my CSS doesn't work right.

#titlebar-buttonbox-container no longer works in 65.

Try .titlebar-buttonbox instead of #titlebar-buttonbox

.

[ronbo]

Thanks to all, especially Grumpus for the fix. I can not understand why Mozilla does not give us a choice--this is such simple piece of code to implement--if you know what your are doing. Come on Mozilla--listen to to your customers!

[Leafsdude]

So I have these two codes:

1) Puts tabs on bottom:

Code: Select all

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

#tabbrowser-tabs {
  width: 100vw !important;
}
#main-window:not([chromehidden*="toolbar"]) #navigator-toolbox {padding-bottom: var(--tab-min-height) !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;
}

2) Close tab bar with only one tab:

Code: Select all

/* hide tab bar if only one tab */
tab:only-of-type { 
    display:none !important; 
}
/* unset the tab bar min-height */ 
#tabbrowser-tabs, #tabbrowser-tabs > .tabbrowser-arrowscrollbox, #tabbrowser-tabs[positionpinnedtabs] > .tabbrowser-tab[pinned] {
    min-height: initial !important;
}
/* set the height on the tabs instead */
tab { 
    line-height: 32px; height: 32px; 
}
/* hide new tab button so tab-bar can collapse */
.tabs-newtab-button { 
    display: none; 
}
/* ...but show it on tab-bar hover */
#tabbrowser-tabs:hover .tabs-newtab-button { 
    display: block; 
}
#TabsToolbar {
  min-height: 0px !important;
}

Both work perfectly separately on 65, but put them together and 2) fails to remove the bar. Any suggestion on getting them working together? Or perhaps get them to run separate from each other (eg: disable 1) if there's only 1 tab, disable 2) when running multiple tabs)?

[oldtraveler]

I used this code from Grumpus and placed it in a file named userChrome.css. This file was then placed in folder chrome in Profiles. Also placed chrome in the default profile folder. Tabs are still on top.What am I doing wrong?

This code worked, part from one of the links and part addition for removal of the haze.

Code: Select all

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

/* Remove Haze NavBar */
#nav-bar,
#PersonalToolbar {
  background: transparent !important;
}

[ronbo]

To my very limited knowledge--there is only 1 place you want this chrome folder--and that is here---on my computer:
C:\Users\r\AppData\Roaming\Mozilla\Firefox\Profiles\uw9r7k1c.default

[oldtraveler]

To my very limited knowledge--there is only 1 place you want this chrome folder--and that is here---on my computer:
C:\Users\r\AppData\Roaming\Mozilla\Firefox\Profiles\uw9r7k1c.default

As soon as I changed the folder from Local to Roaming it worked. Thank you.

[ronbo]

I assume you are using FF65.0. If u r using earlier version--you may need a different .css file. Try restarting your computer--I did not need that--just restarting FF 65.0 worked fine.

[Mudder]

Of course users are making it a big deal, it's a desired feature that users are missing. This is a very bad attitude on part of Mozilla who touted Firefox as a different kind of product from Microsoft Explorer and which encouraged user input.

Two thumbs up, but so far 65 isn't blocking any of my favourite sites.

[Leafsdude]

So I have these two codes:

1) Puts tabs on bottom:

2) Close tab bar with only one tab:

Both work perfectly separately on 65, but put them together and 2) fails to remove the bar. Any suggestion on getting them working together? Or perhaps get them to run separate from each other (eg: disable 1) if there's only 1 tab, disable 2) when running multiple tabs)?

Got a solution for this, in case anyone stumbles on it:

Code: Select all

/* Modify to change window drag space width */
:root[tabsintitlebar="true"] #nav-bar{ --window-drag-space-width: 24px }

.titlebar-buttonbox-container{
  position: fixed;
  top:0;
  right:0;
  height: 40px;
}
#toolbar-menubar[inactive] > .titlebar-buttonbox-container{ opacity: 0 }

:root[sizemode="maximized"] > #navigator-toolbox{ padding-top: 8px !important; }
:root[sizemode="maximized"] .titlebar-buttonbox-container{ top: 8px }

:root[uidensity="compact"] .titlebar-buttonbox-container{ height: 32px }
.titlebar-buttonbox-container > .titlebar-buttonbox{ height: 100%; }
#titlebar{
 -moz-box-ordinal-group: 2;
  -moz-appearance: none !important;
}
:root[tabsintitlebar="true"] #nav-bar{
  padding-right: calc(138px + var(--window-drag-space-width,0px));
  padding-left: var(--window-drag-space-width,0px)
}
.titlebar-placeholder,
#TabsToolbar .titlebar-spacer{ display: none; }
/* Also hide the toolbox bottom border which isn't at bottom with this setup */
#navigator-toolbox::after{ display: none !important; }

/* Menubar on top patch - use with Fx65_tabs_on_bottom.css */
/* Only really useful if menubar is ALWAYS visible */

#navigator-toolbox{ margin-top: 22px }
#toolbar-menubar{
  position: fixed;
  top: 0px;
  height: 22px;
  margin-top:1px;
  width: 100%;
  overflow: hidden;
}

#toolbar-menubar .titlebar-buttonbox-container{ height: 22px; }
#toolbar-menubar .titlebar-button{ padding: 2px 17px !important;  }

/* This will allow you to MAYBE put some items to the menubar */
#toolbar-menubar > *{ float: left }
#toolbar-menubar .toolbarbutton-1 { --toolbarbutton-inner-padding: 3px }

/* Makes tabs toolbar items zero-height initially and sets enlarge them to fill up space equal to tab-min-height set on tabs */
/* Firefox 65+ only */
/* !!USER!! -  REMOVE ALL BUTTONS you can from the tabs toolbar */

/* Configurable window drag space  */
:root[sizemode="normal"] #nav-bar{ --window-drag-space-width: 20px }

#titlebar{ -moz-appearance: none !important; }
#tabbrowser-tabs, #tabbrowser-tabs > .tabbrowser-arrowscrollbox{ min-height: 0 !important; }
:root:not([customizing]) #tabbrowser-tabs .tabs-newtab-button,
:root:not([customizing]) #TabsToolbar .titlebar-button{
  -moz-appearance: none !important;
  height: 0px;
  padding-top: 0px !important;
  padding-bottom: 0px !important;
  -moz-box-align: stretch;
  margin: 0 !important;
}
#tabbrowser-tabs .tabbrowser-tab{ height: var(--tab-min-height) }
#tabbrowser-tabs .tabbrowser-tab[first-visible-tab="true"][last-visible-tab="true"]{
  visibility: collapse !important;
}

/* Button re-styling */
#tabbrowser-tabs .tabs-newtab-button:hover{ background-color: var(--toolbarbutton-hover-background) }
#tabbrowser-tabs .tabs-newtab-button > .toolbarbutton-icon{
  padding: 0 !important;
  transform: scale(0.6);
  background-color: transparent !important;
}
/* Extra top padding  in maximized window */
:root[sizemode="maximized"] > #navigator-toolbox{ padding-top:7px !important; }
/* Fix window controls not being clickable */
#toolbar-menubar:hover{
  min-height: calc(var(--tab-min-height) + var(--space-above-tabbar) - 1px) !important;
  height: calc(var(--tab-min-height) + var(--space-above-tabbar) - 1px) !important;
  -moz-appearance: initial !important;
}
#nav-bar{ padding: 0 var(--window-drag-space-width,0px) }

Enjoy!

[bob c]

cannot get anything to hide the bar--but can hide 1 tab, and thinned down the bar and colored it to be same as a blank page with FF dev tool eyedropper tool--sorry these are so big--don't do this enough

this is 1 with an almost blank page--no tab showing--but the tab bar is colored the same as if i had no page open, it's right under the bookmarks bar

> https://i.imgur.com/H8FSIiX.jpg?1

this is the weather page open--no tab (1 Tab hidden)--the bar thinned down narrow to be not as annoying--right under my bookmarks bar

> https://i.imgur.com/1BmyIXD.jpg?1

this has 4 tabs on thinned down bar under bookmarks bar--3 red are loaded but not being read, the blue is the one being now, FF forum, red lets me go back to any of the other pages--say the Florida forum, it would then go blue.

> https://i.imgur.com/hIA24Zt.jpg?1


all the code was taken from the work of other people posted, they are the ones, I'm not a programmer, just wish I could hide the bar with 1 tab as before, it just doesn't work on ,my comp

[Ashleyj]

Excuse me for being thick but I can't seem to get this to work for me.

I was using a custom css file that I got from Github (Aris-t2) that was working fine with the tabs below the toolbars.

I have read all the posts in this thread but I'm confused about what I actually have to do. I followed the link to the code as suggested by Arturox and copied it to paste into my css file.
Now these are my questions -
1. It talks of pasting it below the default @namespace line. Looking at my existing css file I can't see any line starting @namespace, in fact it says at the start of the file - "CSS tweaks won't work, if '@namespace' references are used inside .css files!" So where do I paste the new code?

2. Do I have to delete the existing code that originally fixed the tab position -
/************************************************************************************************/
/* TABS TOOLBAR POSITION (below titlebar / below navigation toolbar / below main content) *******/
/************************************************************************************************/

/* only use one at a time - below titlebar OR below navigation bar OR below main content ********/
/* etc.

I have tried various combinations of pasting and deleting but nothing seems to work.

Hope someone can help, thanks.