MozillaZine


Tabs below address bar Firefox 89.0

User Help for Mozilla Firefox
Acedonno
 
Posts: 17
Joined: June 15th, 2013, 2:41 pm

Post Posted June 7th, 2021, 6:20 pm

I have firefox 89.0 installed and as usual they moved the tabs above address bar again. I found this code online and I copied the code put it in a file called 'chrome.css' and put it in firefox profile folder and still the tabs are on top of address bar. Is this right or am I doing it wrong?

Here is the code and I got it from https://www.reddit.com/r/FirefoxCSS/com ... irefox_89/:

/* Source file https://github.com/MrOtherGuy/firefox-c ... bottom.css made available under Mozilla Public License v. 2.0
See the above repository for updates as well as full license text. */

/* Modify to change window drag space width */
/*
Use tabs_on_bottom_menubar_on_top_patch.css if you
have menubar permanently enabled and want it on top
*/

/* IMPORTANT */
/*
Get window_control_placeholder_support.css
Window controls will be all wrong without it.
Additionally on Linux, you may need to get:
linux_gtk_window_control_patch.css
*/

:root{ --uc-titlebar-padding: 0px; }
@media (-moz-os-version: windows-win10){
:root[sizemode="maximized"][tabsintitlebar]{ --uc-titlebar-padding: 8px }
}
#toolbar-menubar[autohide="true"] > .titlebar-buttonbox-container,
#TabsToolbar > .titlebar-buttonbox-container{
position: fixed;
display: block;
top: var(--uc-titlebar-padding,0px);
right:0;
height: 40px;
}
/* Mac specific. You should set that font-smoothing pref to true if you are on any platform where window controls are on left */
@supports -moz-bool-pref("layout.css.osx-font-smoothing.enabled"){
:root{ --uc-titlebar-padding: 0px !important }
.titlebar-buttonbox-container{ left:0; right: unset !important; }
}

:root[uidensity="compact"] #TabsToolbar > .titlebar-buttonbox-container{ height: 32px }

#toolbar-menubar[inactive] > .titlebar-buttonbox-container{ opacity: 0 }

#navigator-toolbox{ padding-top: var(--uc-titlebar-padding,0px) !important; }

.titlebar-buttonbox-container > .titlebar-buttonbox{ height: 100%; }

#titlebar{
-moz-box-ordinal-group: 2;
-moz-appearance: none !important;
--tabs-navbar-shadow-size: 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; }

@media (-moz-gtk-csd-close-button){ .titlebar-button{ -moz-box-orient: vertical } }

/* These exist only for compatibility with autohide-tabstoolbar.css */
toolbox#navigator-toolbox > toolbar#nav-bar.browser-toolbar{ animation: none; }
#navigator-toolbox:hover #TabsToolbar{ animation: slidein ease-out 48ms 1 }

/* Source file https://github.com/MrOtherGuy/firefox-c ... _patch.css made available under Mozilla Public License v. 2.0
See the above repository for updates as well as full license text. */

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

:root{ --uc-window-control-width: 0px !important }

#navigator-toolbox{ padding-top: calc(29px + var(--uc-titlebar-padding,0px)) !important }

#toolbar-menubar{
position: fixed;
display: flex;
top: var(--uc-titlebar-padding,0px);
height: 29px;
width: 100%;
overflow: hidden;
}

#toolbar-menubar > .titlebar-buttonbox-container{ height: 29px; order: 100; }

#toolbar-menubar > [flex]{ flex-grow: 100; }
#toolbar-menubar > spacer[flex]{
order: 99;
flex-grow: 1;
min-width: var(--uc-window-drag-space-width,20px);
}

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

#toolbar-menubar .toolbarbutton-1 { --toolbarbutton-inner-padding: 3px }

/* TABS: height */*|*:root { --tab-toolbar-navbar-overlap: 0px !important; --tab-min-height: 25px !important;
--tab-min-width: 80px !important;

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

.tab-background {
border-radius: 8px 8px 0px 0px !important; border-image: none !important;
}
.tab-line {
display: none;
}

.tab-close-button {
color: red!important;
}

Ashleyj

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

Post Posted June 8th, 2021, 12:45 am

I tried that out on a portable version of FF89 and it did not work for me - tabs were still at the top.

batman68
New Member
 
Posts: 1
Joined: June 21st, 2021, 12:25 pm

Post Posted June 21st, 2021, 12:38 pm

Acedonno;

Please try the following as it is working for me.

1) There needs to be a folder called chrome in the main logged in profile folder.

2) Then copy and paste the code you listed in a file called userChrome.css (exactly as you see it) in the chrome folder from step 1

3) Restart Firefox

Viola!!

Best wishes :)

CaJazzman

User avatar
 
Posts: 370
Joined: March 5th, 2009, 2:21 pm
Location: Vacaville,California

Post Posted June 21st, 2021, 1:28 pm

batman68 wrote:Acedonno;

Please try the following as it is working for me.

1) There needs to be a folder called chrome in the main logged in profile folder.

2) Then copy and paste the code you listed in a file called userChrome.css (exactly as you see it) in the chrome folder from step 1

3) Restart Firefox

Viola!!

Best wishes :)

Yes this code works for moving the tabs back up. I tried and it works. I copy and pasted the complete code from before and saved it, then copy and pasted the newer code, and Fire Fox is back to what it was before version 89. 8-)

CaJazzman

User avatar
 
Posts: 370
Joined: March 5th, 2009, 2:21 pm
Location: Vacaville,California

Post Posted June 22nd, 2021, 12:43 pm

Acedonno wrote:I have firefox 89.0 installed and as usual they moved the tabs above address bar again. I found this code online and I copied the code put it in a file called 'chrome.css' and put it in firefox profile folder and still the tabs are on top of address bar. Is this right or am I doing it wrong?

Here is the code and I got it from https://www.reddit.com/r/FirefoxCSS/com ... irefox_89/:

/* Source file https://github.com/MrOtherGuy/firefox-c ... bottom.css made available under Mozilla Public License v. 2.0
See the above repository for updates as well as full license text. */

/* Modify to change window drag space width */
/*
Use tabs_on_bottom_menubar_on_top_patch.css if you
have menubar permanently enabled and want it on top
*/

/* IMPORTANT */
/*
Get window_control_placeholder_support.css
Window controls will be all wrong without it.
Additionally on Linux, you may need to get:
linux_gtk_window_control_patch.css
*/

:root{ --uc-titlebar-padding: 0px; }
@media (-moz-os-version: windows-win10){
:root[sizemode="maximized"][tabsintitlebar]{ --uc-titlebar-padding: 8px }
}
#toolbar-menubar[autohide="true"] > .titlebar-buttonbox-container,
#TabsToolbar > .titlebar-buttonbox-container{
position: fixed;
display: block;
top: var(--uc-titlebar-padding,0px);
right:0;
height: 40px;
}
/* Mac specific. You should set that font-smoothing pref to true if you are on any platform where window controls are on left */
@supports -moz-bool-pref("layout.css.osx-font-smoothing.enabled"){
:root{ --uc-titlebar-padding: 0px !important }
.titlebar-buttonbox-container{ left:0; right: unset !important; }
}

:root[uidensity="compact"] #TabsToolbar > .titlebar-buttonbox-container{ height: 32px }

#toolbar-menubar[inactive] > .titlebar-buttonbox-container{ opacity: 0 }

#navigator-toolbox{ padding-top: var(--uc-titlebar-padding,0px) !important; }

.titlebar-buttonbox-container > .titlebar-buttonbox{ height: 100%; }

#titlebar{
-moz-box-ordinal-group: 2;
-moz-appearance: none !important;
--tabs-navbar-shadow-size: 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; }

@media (-moz-gtk-csd-close-button){ .titlebar-button{ -moz-box-orient: vertical } }

/* These exist only for compatibility with autohide-tabstoolbar.css */
toolbox#navigator-toolbox > toolbar#nav-bar.browser-toolbar{ animation: none; }
#navigator-toolbox:hover #TabsToolbar{ animation: slidein ease-out 48ms 1 }

/* Source file https://github.com/MrOtherGuy/firefox-c ... _patch.css made available under Mozilla Public License v. 2.0
See the above repository for updates as well as full license text. */

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

:root{ --uc-window-control-width: 0px !important }

#navigator-toolbox{ padding-top: calc(29px + var(--uc-titlebar-padding,0px)) !important }

#toolbar-menubar{
position: fixed;
display: flex;
top: var(--uc-titlebar-padding,0px);
height: 29px;
width: 100%;
overflow: hidden;
}

#toolbar-menubar > .titlebar-buttonbox-container{ height: 29px; order: 100; }

#toolbar-menubar > [flex]{ flex-grow: 100; }
#toolbar-menubar > spacer[flex]{
order: 99;
flex-grow: 1;
min-width: var(--uc-window-drag-space-width,20px);
}

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

#toolbar-menubar .toolbarbutton-1 { --toolbarbutton-inner-padding: 3px }

/* TABS: height */*|*:root { --tab-toolbar-navbar-overlap: 0px !important; --tab-min-height: 25px !important;
--tab-min-width: 80px !important;

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

.tab-background {
border-radius: 8px 8px 0px 0px !important; border-image: none !important;
}
.tab-line {
display: none;
}

.tab-close-button {
color: red!important;
}


Is there anyway to ask whomever did the coding, and see if the names of the icons can be added to the menu bar, even though you can hover over them and know what their names are. Thanks In Advance! :D

alshu
 
Posts: 4
Joined: July 1st, 2021, 6:51 am

Post Posted July 1st, 2021, 10:33 am

Didn't work for me.

dickvl

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

Post Posted July 1st, 2021, 3:16 pm

Try the code in my reply on page one of this thread.
viewtopic.php?p=14894226#p14894226

alshu
 
Posts: 4
Joined: July 1st, 2021, 6:51 am

Post Posted July 1st, 2021, 8:11 pm

It works. Thank you!

alshu
 
Posts: 4
Joined: July 1st, 2021, 6:51 am

Post Posted July 1st, 2021, 10:00 pm

del

SouzaRM
 
Posts: 3
Joined: December 11th, 2011, 2:34 pm

Post Posted August 1st, 2021, 10:56 am

Working fine for me!
MFF NighTly 92.0a1 x64 [Release; 2021-08-01].

Thanks @AceDonno

Lunar

User avatar
 
Posts: 492
Joined: July 6th, 2004, 5:08 am
Location: Texas, США

Post Posted June 28th, 2022, 7:15 pm

dickvl wrote:Try the code in my reply on page one of this thread.
viewtopic.php?p=14894226#p14894226


FYI:
404 - 'file not found' on your ghub...
'Microsucks' made me nuts, Linux is making me crazy...
...at least with Linux, I can afford the therapy.. : )
openSuSE | KDE | enlightenment | mozilla Aurora 55 / Nightly 106 Konqueror /Opera/ Aurora Dev Ed | Now, down to Firefox 45 52 ESR as the 'new' direction... sxxxs!

jscher2000

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

Post Posted June 28th, 2022, 8:54 pm

Why Firefox 89?

Return to Firefox Support


Who is online

Users browsing this forum: No registered users and 7 guests