MozillaZine

Tabs Back On Top Again!

User Help for Mozilla Firefox
Dee Yoos
 
Posts: 2
Joined: December 2nd, 2019, 8:02 pm

Post Posted December 2nd, 2019, 8:07 pm

Using a .css file, I had tabs below the address bar for a very long time. Now they are back above the address bar with the latest update 71.0. How can I get them returned to below the address bar? Here's the code I have been using up to this point:

/* 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: 32px !important; /* adjust to suit your needs */
}
:root #tabbrowser-tabs {
--tab-min-height: 32px !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;
}

WaltS48

User avatar
 
Posts: 4098
Joined: May 7th, 2010, 9:38 am
Location: Pennsylvania, USA

Post Posted December 3rd, 2019, 6:51 am

Anything under the CSS heading in this link that explains it?

https://www.fxsitecompat.dev/en-CA/versions/71/
Linux Desktop - AMD Athlon(tm) II X3 455 3.3GHz | 8.0GB RAM | GeForce GT 630
Windows Notebook - AMD A8 7410 2.2GHz | 6.0GB RAM | AMD Radeon R5

dickvl

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

Post Posted December 3rd, 2019, 8:45 am

The code probably still works, but I've noticed issues caused by namespace changes that made for me the code stop working.

You can try to move the code in userChrome.css above the default @namespace line or what I did and move the code to a separate file without the @namespace line and use @import url(file); in userChrome.css above its @namespace line to import this file.

Code: Select all
import url(tabs-on-bottom.css);
@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); /* only needed once */


You also need to add a display: block !important; property to this rule for Firefox 70 and later:
Code: Select all
#TabsToolbar {
 display: block !important;
 position: absolute !important;
 bottom: 0 !important;
 width: 100vw !important;
}

diamond-optic
 
Posts: 1
Joined: December 3rd, 2019, 10:13 am
Location: NY, USA

Post Posted December 3rd, 2019, 10:17 am

dickvl wrote:You also need to add a display: block !important; property to this rule for Firefox 70 and later:
Code: Select all
#TabsToolbar {
 display: block !important;
 position: absolute !important;
 bottom: 0 !important;
 width: 100vw !important;
}


thank you, this was all I needed to get it working again for myself

Dee Yoos
 
Posts: 2
Joined: December 2nd, 2019, 8:02 pm

Post Posted December 3rd, 2019, 11:09 am

Thanks dickvl.
I just added the line "display: block !important;" under #TabsToolbar and my tabs are back under the address bar.
I get a little stressed out every time Firefox updates, waiting to see if it messes with the way it looks.
Thanks also to WaltS48 for his suggestion to look at the .CSS items mentioned.

Franpa
 
Posts: 41
Joined: November 10th, 2011, 1:31 pm

Post Posted December 3rd, 2019, 8:32 pm

diamond-optic wrote:
dickvl wrote:You also need to add a display: block !important; property to this rule for Firefox 70 and later:
Code: Select all
#TabsToolbar {
 display: block !important;
 position: absolute !important;
 bottom: 0 !important;
 width: 100vw !important;
}


thank you, this was all I needed to get it working again for myself

Can confirm, this is all that was needed. Thanks dickvl.
Computer specifications:
Windows 10 (1909) x64|AMD Ryzen 3700X|ASUS Crosshair Hero VIII (WiFi)|16GB 3600MHz RAM|Nvidia Geforce 1070Ti 8GB|Corsair AX760 Power Supply

AnayaP
 
Posts: 4
Joined: December 27th, 2014, 5:57 pm

Post Posted December 4th, 2019, 4:50 pm

This is so f-g infuriating. Why do I have to be a programmer to get a simple thing done? I don't know how to add a "display option" or have any idea where in the world to put it, or what to replace. This is LUDICROUS. Every single time they update it takes me HOURS of research and reading forums and trying to figure out what to do with all the confusing directions. Why is this SO HARD? Why doesn't Mozilla just make this an OPTION in one of their innumerable updates???

In the meantime, if anyone has a complete new code, where I don't have to figure out what to replace with new stuff, but just the entire thing, that would be really helpful, because although everyone above has been very helpful, I am your grandma's age and have no idea what to do.

Thanks,
A highly disgruntled user.

AnayaP
 
Posts: 4
Joined: December 27th, 2014, 5:57 pm

Post Posted December 4th, 2019, 4:58 pm

Also, if anyone can let me know how to find the css file you are discussing... I managed to find my profile, but there are two -- one says "root directory" and one says "local directory." Which one do I look at?

ReggieNJ
 
Posts: 34
Joined: March 21st, 2016, 5:45 am

Post Posted December 5th, 2019, 6:23 am

AnayaP wrote:Why is this SO HARD? Why doesn't Mozilla just make this an OPTION in one of their innumerable updates???


Why? Because they removed that option six years ago: https://bugzilla.mozilla.org/show_bug.cgi?id=755593 And it isn't coming back: https://bugzilla.mozilla.org/show_bug.cgi?id=1601164
Tabs on top has been the default now since version 4 was released in 2011. If you want to hack the code to get Firefox to your liking that's on you, not Mozilla. You're lucky to even have the ability to modify the browser with CSS.
Last edited by ReggieNJ on December 5th, 2019, 10:26 am, edited 1 time in total.

jscher2000

User avatar
 
Posts: 10772
Joined: December 19th, 2004, 12:26 am
Location: Silicon Valley, CA USA

Post Posted December 5th, 2019, 7:40 am

Hi AnayaP, is this your first userChrome.css file? I suggest taking 10 minutes and following some guides:

* "How to": https://www.userchrome.org/how-create-userchrome-css.html
* Rules file: https://www.userchrome.org/what-is-userchrome-css.html#movetabbar

AnayaP
 
Posts: 4
Joined: December 27th, 2014, 5:57 pm

Post Posted December 5th, 2019, 4:52 pm

Thanks to all - I DID figure it out. Tabs back on bottom.

@ReggieNJ: you didn't have to be so snarky. When you yourself are elderly I hope strangers on line are nice to you. (PS, obviously the reason "why" is that they removed the option. In that context the WHY was rhetorical.)

If anyone else has the problem, the css file should have this in it. I know the conversation above says alot about namespace; I don't know what that is, but I made the other change and this is the code I am now using to get tabs on bottom:

@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 {
display: block !important;
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;
}

Mudder

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

Post Posted December 5th, 2019, 8:15 pm

diamond-optic wrote:
dickvl wrote:You also need to add a display: block !important; property to this rule for Firefox 70 and later:
Code: Select all
#TabsToolbar {
 display: block !important;
 position: absolute !important;
 bottom: 0 !important;
 width: 100vw !important;
}


thank you, this was all I needed to get it working again for myself


OK, I gotta re-learn some stuff from 2 years ago I'll try this on Saturday when I have more time.

Mudder

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

Post Posted December 6th, 2019, 1:16 am

Dee Yoos wrote:Thanks dickvl.
I just added the line "display: block !important;" under #TabsToolbar and my tabs are back under the address bar.
I get a little stressed out every time Firefox updates, waiting to see if it messes with the way it looks.
Thanks also to WaltS48 for his suggestion to look at the .CSS items mentioned.



I'll try that too on Saturday when I have time to fiddle with it.

EDIT: Frank, did some quick reading here, and on the weekend I'm using what's already posted and converting to SeaMonkey,
as two of my favourite extensions, ABP and NoScript are available for it.
Tired of the FF team changing things on me.

Mudder

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

Post Posted December 6th, 2019, 9:34 am

diamond-optic wrote:
dickvl wrote:You also need to add a display: block !important; property to this rule for Firefox 70 and later:
Code: Select all
#TabsToolbar {
 display: block !important;
 position: absolute !important;
 bottom: 0 !important;
 width: 100vw !important;
}


thank you, this was all I needed to get it working again for myself


Frank...gave up trying to find NoScript and ABP for Seamonkey, after I applied this fix, my tabs are where I want them again.
Still DO NOT appreciate Brummelchen's arrogant and unconstructive comments.

blued
 
Posts: 4
Joined: April 16th, 2015, 11:33 am

Post Posted December 6th, 2019, 9:57 am

dickvl wrote:
You also need to add a display: block !important; property to this rule for Firefox 70 and later:
Code: Select all
#TabsToolbar {
 display: block !important;
 position: absolute !important;
 bottom: 0 !important;
 width: 100vw !important;
}

Thanks, this worked for me as well.

Return to Firefox Support


Who is online

Users browsing this forum: No registered users and 8 guests