[TABS BELOW CONTENT SUPPORT THREAD] - tabs on windows bottom

[gg2by2]

hello
what is the code to locate tabs at the bottom of the firefox 57 screen (just above the windows start button)?

it was suggested to try this=

/* Puts tabs on the bottom */
#TabsToolbar {
-moz-box-ordinal-group: 2;
border-bottom: 1px solid #888 !important;
}
#nav-bar{ border-top-width: 0px !important; }

but the tabs are still located near the top

[Aris-t2]

@gg2by2
You can not move tabs toolbar to windows bottom. moz-box-ordinal-group only works within top toolbar box.

The only code that can do it heavily breaks Firefox ui and is not part of this project.

[gg2by2]

The screen shot still shows tabs above the screen. Just received a response from the moderator that tabs below the screen CANNOT be done! That Firefox ui will not allow it! -- Sent from my Android Wednesday, 15 November 2017, 09:09AM -05:00 from PL_user notifications@github.com :

…

Try this: /* Tab bar below Navigation & Bookmarks Toolbars For best results, show Title Bar or Menu Bar */ #nav-bar { /* main toolbar */ -moz-box-ordinal-group: 1 !important; border-top-width: 0 !important; } #PersonalToolbar { /* bookmarks toolbar */ -moz-box-ordinal-group: 2 !important; } #TabsToolbar { /* tab bar */ -moz-box-ordinal-group: 3 !important; } from https://www.userchrome.org/what-is-userchrome-css.html — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub , or mute the thread .

[ghost]

The screen shot still shows tabs above the screen. Just received a response from the moderator that tabs below the screen CANNOT be done! That Firefox ui will not allow it!

Try - https://developer.mozilla.org/en-US/docs/Web/CSS/transform (many bugs to medium fix), many element transform blur fonts.

Or - position: fixed; bottom: 0 and remove bugs (hard to fix).

[ghost]

https://github.com/Okamoi/UserChrome-Tweaks/blob/07a8f3faee59184b3c81e60a6506ad5680352ca9/toolbars/bottom-of-window-tabbar-Windows7.css - I test morning.

➕

about:config ➡️ browser.tabs.drawInTitlebar false.

[Aris-t2]

Is this working better than the one available?

[ghost]

Is this working better than the one available?

Who knows, I do not used MixTabPlus and I was not looking this tweak in CustoCSSForFx or other project.

---

Bugged with:

• fullscreen (description marciiF, Okamoi)

• dpi +100% (if have appbutton on left in Windows)

• no maximized window (if have appbutton on left in Windows)

• no see menu toolbar ((description marciiF, Okamoi) any value "browser.tabs.drawInTitlebar")

  • 
  • 
  • 

Test on Windows 7 Aero / Basic / Classic (no test on Windows 10, GNU/Linux or MacOS).

screenshots browser.tabs.drawInTitlebar;true

browser.tabs.drawInTitlebar;true
Maximized	Normal
Classic Windows 7

screenshots browser.tabs.drawInTitlebar;false

browser.tabs.drawInTitlebar;false
Maximized	Normal
Classic Windows 7

---

Fonts is clear / spicy (not blur / fog), addons iframe works ok (e.g. uBlock Origin - element picker to block). Better than my first try to bottom.

[Aris-t2]

Switching browser.tabs.drawInTitlebar preference or changing Windows themes requires window maximizing/minimizing and/or a browser restart. Have you restarted Firefox after a change?
DPI of 200% is not officially supported on Windows. Even some default ui items don't scale properly.

[ghost]

Nope, use only about:config tweak DPI value without restart FX.

[ghost]

No works on Windows10 FCU (normal theme (no Classic, no Blur with third party software)), tomorow test with normal DPI windows 7 (reset with control panel and logout).

Windows 10, DPI 100% (normal): (wrong code / outdated) ⚠️

screenshots browser.tabs.drawInTitlebar;true

browser.tabs.drawInTitlebar;true

screenshots browser.tabs.drawInTitlebar;false

browser.tabs.drawInTitlebar;false

also no see menu toolbar

also no see menu toolbar

[Aris-t2]

With Firefox DPI set to 200% (layout.css.devPixelsPerPx; 2.0) I did not see this issue. Haven't tried within Windows settings, as I don't have a HiDPI screen and setting to such a high value would make it impossible to use Windows for tests.

I remember when using VMs layout.css.devPixelsPerPx settings does not offer the same results real DPI changes in Windows setting do. There is always something different.

[ghost]

I use 125% DPI (24" Full HD monitor). I try reset for first.

---

screenshot Bug - tabbar above windows task toolbar when menu toolbar active
(wrong code / outdated) ⚠️

Bug - tabbar above windows task toolbar when menu toolbar active

---

When use normal dpi in Control Panel - Classic Windows 7:
(wrong code / outdated) ⚠️

| | |

---|---|---|---

Maybe HiDPI test if find user with this monitor - in my opinion glitch with browser.tabs.drawInTitlebar;true is not a bug with deflaut CustomCSSforFx.

[Aris-t2]

• I have set DPI to 125% in Windows 10FCU settings and rebooted
• CustomCSSforFx 1.4.6
• tested Firefox 57.0.1 and 59 Nightly
• menubar on/off
• titlebar on/off
• dark/default themes
• normal/maximized mode
• uidensity compact/normal/touch

The glitch never occurred here. Are you sure there are no hiddden buttons on your tabs toolbar. They may cause different behavior.

Some screenshots

@ALL
Does anyone else has these kind of an issue?

[ghost]

I create new profile firefox, download new chrome.zip 1.4.6, add ⚠️ delete ⚠️ code marciiF, Okamoi (possible this is guilty - old code for Firefox 55-56, not 57+).

---

Outdate info: ^{_{I do not read comment about "tabs not on top" - no mistake this}} ⚠️

effect with mistake:

Classic

Areo

Basic

---

@import url(./css/tabs/tabs_below_navigation_toolbar.css); /**/
/*...*/
@import url(./css/tabs/tabs_below_main_content.css); /**/  /* <--- EXPERIMENTAL */

Works OK on Windows 7, I do test DPI 125%.

[Aris-t2]

Why did you mix "other" code with this projects code while testing? Clearly this was not what I tested. :)

Yes, both tabs_below_navigation_toolbar.css and tabs_below_main_content.css have to be enabled, for things to work properly. I was too lazy to create more variations of tabs_below_main_content.css for other toolbar colors, but this might change with a future update.

[ghost]

Why did you mix "other" code with this projects code while testing? Clearly this was not what I tested. :)

Use only outdated, no enable form CustomCSSforFx. I mistake in userChrome.css in changelog.

---

Added spoilers and warnings in old comments.

---

Works OK with higher dpi (125%) [after almost an hour everything seems to be even bigger with higher dpi - strange feeling - maybe reset in registry Windows DPI]

[ghost]

Possible add lw-theme background instead / above black color (any position header image)?

other toolbar colors, but this might change with a future update.

OK.

[Aris-t2]

On 1.4.7 release tabs_below_main_content.css imports tabs_below_navigation_toolbar.css. The description does not tell users to import 'tabs not on top' anymore. This should make thing more understandable. As a side effect users now can chose which predefined toolbar background color they want and select the corresponding tabs_below_main_content_XYZ.css file.

[garywill]

I found tabs_below_main_content.css has problems on private window, buttons are messed.

Then simply I tried this js code

var tabsbar = document.getElementById("TabsToolbar");
const below_tabs = document.getElementById("browser-bottombox");
    
below_tabs.parentNode.appendChild(tabsbar, below_tabs);

and it works amazing. Just simply moved the entire tabbar object to bottom.
If you want to use this script, the css mustn't use toolbarbutton to execute js, or js will be executed repeatly when toolbar is changed.
Use

vbox#browser-bottombox {
  -moz-binding: url("./userChrome/userChrome.xml#execute_javascript_code");
}

instead.
I put the code here

[Aris-t2]

@garywill
There is always room for improvement inside tabs_below_main_content.css. I will fix the glitch in private mode on next update.

Using this by the way great JS code/tweak to actually append tabs toolbar to browsers bottom box works, but might cause CSS code issues with code relying on default internal toolbar order. For some it will be the perfect solution, while it won't work for others.

[LilMarvellous]

@Aris-t2
Hello mate
i eventually sorted it using as text editor the humble Notepad for userChrome.css from custom_css_for_fx_v2.4.0 instead of the sophisticated Notepad++
It worked as charm
Thks for the pack!

[cxen]

I have an issue with both "Tabs below nav bar" and "Multirow tabs".

On Firefox 68.0.1, with the same settings, CustomCSSforFx v2.6.2 is broken compared to using v2.4.9.

v2.4.9

v2.6.2

I've switched the appropriate lines on and off to achieve the same result (i.e. "****v3 for f68+" instead of "

***v2 for f65+") but it didn't fix the issue and even trying the exact same userChrome.css setup doesn't work.

[Aris-t2]

The combination of tabs_below_navigation_toolbar_fx65_v2.css and tabs_multiple_lines_v3.css works fine here even on Fx70.

[cxen]

I tried again with a fresh chrome folder and 2.6.2 and still get a broken Firefox window with a glitchy title bar.

[Aris-t2]

Different PC, FX 68.0.1, tabs_below_navigation_toolbar_fx65_v2.css and tabs_multiple_lines_v3.css, same result as before. I use the complete package with both options enabled in userChrome.css, make sure you do too, not just loose files...

[cxen]

Not sure what you mean. My chrome folder has everything that the .zip file contains.

Edit: Deleted chrome folder again and created a new one with the contents of v2.6.2 and tabs_multiple_lines_v3.css (also without tabs_below_navigation_toolbar_fx65_v2.css) still gives me a broken browser. Have menu bar showing also.

[R8s6]

In v3.0.5, when FF is unmaximized, and when @import "./css/tabs/tabs_below_navigation_toolbar_fx74.css"; /**/ is active, the tab doesn't line up with the horizontal separator, as the tab falls below the separator line. please see screenshot below:

This, however, is NOT present when the window is maximized, where the tab lines up perfectly with the separator line, as desired:

Steps to reproduce:
Activate:

@import "./config/general_variables.css"; /**/
@import "./css/tabs/tabs_below_navigation_toolbar_fx74.css"; /**/

All other options inactive.

Thanks!

[Aris-t2]

This does not happen here. Which OS are you using? Tabs below navigation toolbar differentiates between macOS and Windows/Linux settings.

[R8s6]

This does not happen here. Which OS are you using? Tabs below navigation toolbar differentiates between macOS and Windows/Linux settings.

Thanks for the reply. It’s Linux.

[Aris-t2]

Looks like this for me even on Fx77:

Tested on Ubuntu.

[Aris-t2]

I think this does not need to be an own discussion anymore. Main thread should be enough.
#454