MozillaZine

userChrome.css not working on newly installed FF

User Help for Mozilla Firefox
m.rumble
 
Posts: 16
Joined: January 29th, 2019, 1:55 pm

Post Posted January 30th, 2019, 9:17 pm

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

User avatar
 
Posts: 473
Joined: March 19th, 2006, 4:17 pm

Post Posted January 31st, 2019, 1:24 am

arturox thanks for the solution. it works for me. Peace reigns in the kingdom again.
Windows 10 Pro and Linux Mint 19.1 64 bit with the latest FF release

bob c
 
Posts: 159
Joined: September 7th, 2003, 10:09 am

Post Posted January 31st, 2019, 5:37 am

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

User avatar
 
Posts: 12228
Joined: October 19th, 2007, 4:23 am
Location: ... Da' Swamp

Post Posted January 31st, 2019, 8:52 am

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;
}
Last edited by Grumpus on January 31st, 2019, 10:27 am, edited 1 time in total.
Cashless society sacrifices independence, privacy and lastly liberty, encouraged by ignorance and villainy.

RobertJ
Moderator

User avatar
 
Posts: 10827
Joined: October 15th, 2003, 7:40 pm
Location: Chicago IL/Oconomowoc WI

Post Posted January 31st, 2019, 9:49 am

Exoteeth wrote: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

.
FF 70.0.1 - FF 71b9 - FF 72a - TB 68.2.2 - Mac OSX 10.13.6
Computers I've used: IBM 7094/UNIVAC 1108/IBM 360/DEC PDP11/DEC VAX-11 780/DEC VAXstation 8000/Sun SPARCstation 2/Mac from 1984 to 2019

ronbo
 
Posts: 116
Joined: July 2nd, 2004, 3:52 pm
Location: North Idaho, USA

Post Posted January 31st, 2019, 11:01 am

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
 
Posts: 2
Joined: January 31st, 2019, 11:11 am

Post Posted January 31st, 2019, 11:16 am

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
 
Posts: 63
Joined: April 8th, 2004, 11:20 am

Post Posted January 31st, 2019, 11:42 am

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?

Grumpus wrote: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
 
Posts: 116
Joined: July 2nd, 2004, 3:52 pm
Location: North Idaho, USA

Post Posted January 31st, 2019, 11:51 am

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
 
Posts: 63
Joined: April 8th, 2004, 11:20 am

Post Posted January 31st, 2019, 12:23 pm

ronbo wrote: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.
Last edited by oldtraveler on January 31st, 2019, 12:30 pm, edited 1 time in total.

ronbo
 
Posts: 116
Joined: July 2nd, 2004, 3:52 pm
Location: North Idaho, USA

Post Posted January 31st, 2019, 12:29 pm

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

User avatar
 
Posts: 58
Joined: July 7th, 2013, 4:14 pm
Location: Ontario, Canada

Post Posted February 2nd, 2019, 3:08 am

ineuw wrote: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
 
Posts: 2
Joined: January 31st, 2019, 11:11 am

Post Posted February 3rd, 2019, 1:07 am

Leafsdude wrote: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
 
Posts: 159
Joined: September 7th, 2003, 10:09 am

Post Posted February 3rd, 2019, 6:18 am

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
Last edited by LIMPET235 on February 3rd, 2019, 6:35 am, edited 1 time in total.
Reason: Image tags removed to restore the forum layout.

Ashleyj

User avatar
 
Posts: 113
Joined: September 9th, 2004, 12:10 pm

Post Posted February 6th, 2019, 3:07 am

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.

Return to Firefox Support


Who is online

Users browsing this forum: Bing [Bot] and 16 guests