MozillaZine

FF76.0.1: Get tab bar back to bottom?

User Help for Mozilla Firefox
Flycaster

User avatar
 
Posts: 953
Joined: November 19th, 2008, 12:13 pm
Location: Boynton Beach, FL

Post Posted May 11th, 2020, 5:37 am

Just updated to FF 76.0.1 and, of course, I'm now sorry that I did it as the latest has disrupted my tab bar by taking it from below the bookmark bar to just above the Menu bar. Now, I guess I need a new userChrome.css to place the tab bar on the bottom? Quite frankly, I'm a real dud when it comes to code. If someone says "this" code works for what you want, I just copy it and pray it works for me. So, here's my present userChrome.css (I know, it probably looks like a mess,) AND I'm only interested in bringing the tab bar back down to the bottom. Any help will be most appreciated.



/* 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: 50px !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;
}

/*Inactive tab text color*/
.tabbrowser-tab:not[selected] .tab-content{
color: black !important;
}



/* text color */
.tabbrowser-tab[selected] .tab-label {
color: white !important;
}



/*bold*//*
.tabbrowser-tab[selected] .tab-label {
font-weight: 900 !important;
}
/* italic *//*
.tabbrowser-tab[selected] .tab-label {
font-style: italic !important;
}



/* Rounded Tabs*/

.tabbrowser-tab {
box-sizing: border-box;
margin: 0 1px 0 1px !important;
border-radius: 10px 10px 0 0 !important;
}


.tabbrowser-tab .tab-text.tab-label {
color: black !important; /* tab text color - customizable */
}


.tabbrowser-tab[selected="true"] .tab-text.tab-label {
color: white !important; /* tab text color - customizable */
}


.tabbrowser-tab[selected="true"] .tab-background {
border: 1px solid gray !important; /* color is customizable */
border-bottom: none !important;
opacity: 1;
}


.tab-background {
border: none !important;
border-radius: 10px 10px 0 0 !important;
background: black;
opacity: .1;
}


.tab-line { /* = light top line in selected tab in Quantum default */
display: none !important;
}


.tabbrowser-tab:hover,
.tabbrowser-tab .tab-text.tab-label:hover {
cursor: pointer !important;
}


.tabbrowser-tab:hover {
border: 1px solid grey !important;
}


.tabbrowser-tab[selected="true"]:hover {
border: none !important;
}


[tabsintitlebar]:root:not([extradragspace]) .tabbrowser-tab::after,
.tabbrowser-tab:hover::after,
#tabbrowser-tabs:not([movingtab])>.tabbrowser-tab[beforehovered]::after {
border: none !important; /* leave as is; affects the New Tab icon (the plus) */
}


.tabbrowser-tab .tab-label {
font-weight: 900 !important;
}



.tabbrowser-tab:not([selected]) .tab-close-button {
visibility: hidden !important
}

.tabbrowser-tab:not([selected]):hover .tab-close-button {
visibility: visible !important
}
#TabsToolbar {
display: block !important;
position: absolute !important;
bottom: 0 !important;
width: 100vw !important;
}
Windows 10 H 64-bit, Quantum The Latest, Chrome v68, IE11, Thunderbird The Latest, Avast Pro

dickvl

User avatar
 
Posts: 53092
Joined: July 18th, 2005, 3:25 am

Post Posted May 12th, 2020, 11:55 am

Are you using an @namespace line in userChrome.css ?

Without the @namespace line your code works for me, so make sure you still meet the basic requirements for userChrome.css.
https://www.userchrome.org/what-is-userchrome-css.html
https://www.userchrome.org/how-create-u ... e-css.html
https://www.userchrome.org/firefox-chan ... e-css.html

You can try this code:
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 {
 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: var(--tab-min-height) !important;}

/* TABS: height */
*|*:root {
 --tab-toolbar-navbar-overlap: 0px !important;
 --tab-min-height: 27px !important; /* adjust to suit your needs */
 --tab-min-width: 50px !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;
}

/*Inactive tab text color*/
.tabbrowser-tab:not[selected] .tab-content{
 color: black !important;
}

/* text color */
.tabbrowser-tab[selected] .tab-label {
 color: white !important;
}

/*bold*//*
.tabbrowser-tab[selected] .tab-label {
 font-weight: 900 !important;
}
/* italic *//*
.tabbrowser-tab[selected] .tab-label {
 font-style: italic !important;
}

/* Rounded Tabs*/

.tabbrowser-tab {
 box-sizing: border-box;
 margin: 0 1px 0 1px !important;
 border-radius: 10px 10px 0 0 !important;
}

.tabbrowser-tab .tab-text.tab-label {
 color: black !important; /* tab text color - customizable */
}

.tabbrowser-tab[selected="true"] .tab-text.tab-label {
 color: white !important; /* tab text color - customizable */
}

.tabbrowser-tab[selected="true"] .tab-background {
 border: 1px solid gray !important; /* color is customizable */
 border-bottom: none !important;
 opacity: 1;
}

.tab-background {
 border: none !important;
 border-radius: 10px 10px 0 0 !important;
 background: black;
 opacity: .1;
}

.tab-line { /* = light top line in selected tab in Quantum default */
 display: none !important;
}

.tabbrowser-tab:hover,
.tabbrowser-tab .tab-text.tab-label:hover {
 cursor: pointer !important;
}

.tabbrowser-tab:hover {
 border: 1px solid grey !important;
}

.tabbrowser-tab[selected="true"]:hover {
 border: none !important;
}

*|*:root[tabsintitlebar]:not([extradragspace]) .tabbrowser-tab::after,
.tabbrowser-tab:hover::after,
#tabbrowser-tabs:not([movingtab])>.tabbrowser-tab[beforehovered]::after {
 border: none !important; /* leave as is; affects the New Tab icon (the plus) */
}

.tabbrowser-tab .tab-label {
 font-weight: 900 !important;
}

.tabbrowser-tab:not([selected]) .tab-close-button {
 visibility: hidden !important
}

.tabbrowser-tab:not([selected]):hover .tab-close-button {
 visibility: visible !important
}

Flycaster

User avatar
 
Posts: 953
Joined: November 19th, 2008, 12:13 pm
Location: Boynton Beach, FL

Post Posted May 12th, 2020, 1:43 pm

I did have @namespace... at the beginning of the code. I removed it, saved, re-booted FF, but tabs still on top. As I'm not the greatest at this, before I try your code, I want to make sure I do it right. So, as I see it, I just have to make a slight change (viz., add " display: block !important;" under "#TabsToolbar {) at the beginning of my code and save???

EDIT:
Although removing @namespace... didn't do anything, adding just that bit of code (with no @namespace...) made the tab bar move back to the bottom. Thanks from a happy camper.
Windows 10 H 64-bit, Quantum The Latest, Chrome v68, IE11, Thunderbird The Latest, Avast Pro

dickvl

User avatar
 
Posts: 53092
Joined: July 18th, 2005, 3:25 am

Post Posted May 13th, 2020, 8:19 am

You had that bit of the code at the bottom of your above posted code (display: block was required a few versions ago).
I merely regrouped your code to make it easier to understand.

Code: Select all
#TabsToolbar {
display: block !important;
position: absolute !important;
bottom: 0 !important;
width: 100vw !important;
}

Flycaster

User avatar
 
Posts: 953
Joined: November 19th, 2008, 12:13 pm
Location: Boynton Beach, FL

Post Posted May 15th, 2020, 7:00 am

Interestingly, when it came to update windows on my MS Surface (which had the same FF tab bar css code as the desktop originally had), the tab bar stayed on the bottom...without any editing???
Windows 10 H 64-bit, Quantum The Latest, Chrome v68, IE11, Thunderbird The Latest, Avast Pro

Return to Firefox Support


Who is online

Users browsing this forum: No registered users and 5 guests