I'd like tabs below bookmarks in FF 113

[LisbethGit]

Hi. I just updated to FF 113.0.1 and my tabs bar has moved back up. It now sits below the menu bar and above the URL bar. Unfortunately, I didn't think to make a backup of the userChrome.css file in my FF profile before updating, and now I can't seem to find it again online. Do you have one that is up to date? I would like the tool bars in the following top-to-bottom order:

• Menu bar
• URL bar
• Bookmarks
• Tabs

Many thanks.

[MrOtherGuy]

Sure, just get up-to-date versions of these three styles:

• window_control_placeholder_support.css
• tabs_on_bottom.css
• tabs_on_bottom_menubar_on_top_patch.css

Firefox updates don't touch userChrome.css at all, unless something causes Firefox to create new profile for you. So your old file should still be there.

[bb84000]

Hello ! Fine. Works with 113.0.1. But now, menupar is between bookmarks and tabsq. How can I have menubar just below windows title ? And how can I reduce tabs height ? Thanks

[MrOtherGuy]

But now, menupar is between bookmarks and tabsq.

tabs_on_bottom_menubar_on_top_patch.css should change that so that menubar is the topmost toolbar.

[bb84000]

OK It works.!! And for tabs height change ? Thanks,

[bb84000]

Hello found the way to change tabs height. Added at the beginning of tabs_on_bottom.css this

/*Addded by bb to change tabs height */
:root {
  --tab-min-height: 30px !important;
}

[MrOtherGuy]

Yea, that should work, at least unless you need to decrease the height a lot.

[vanhauser-thc]

hmm it does not work for me. I have those three imports as recommended above:

$ grep -w import userChrome.css
@import url(chrome/tab_close_button_always_on_hover.css);
@import url(chrome/tab_loading_progress_throbber.css);
@import url(chrome/button_effect_scale_onclick.css);
@import url(chrome/blank_page_background.css);
@import url(chrome/autohide_menubar.css);
@import url(chrome/hide_toolbox_top_bottom_borders.css);
@import url(chrome/vertical_context_navigation.css);
@import url(chrome/button_effect_icon_glow.css);
@import url(chrome/urlbar_centered_text.css);
//NEW:
@import url(chrome/window_control_placeholder_support.css);
@import url(chrome/tabs_on_bottom.css);
@import url(chrome/tabs_on_bottom_menubar_on_top_patch.css);

But the tabs are still the top most bar:

[MrOtherGuy]

@vanhauser-thc Based on the icon in your Firefox titlebar your Firefox version is super old. But if that is not the case then make sure that Firefox is actually loading all those files.

Additionally, I don't think autohide_menubar.css is going to work with these... but I'm not sure about that.

[vanhauser-thc]

I disabled the autohide_menubar, still tabs are on top :( thanks for your tip though!

[MrOtherGuy]

Apparently you could just add this snip and then autohide_menubar.css would work at least mostly fine:

toolbox#navigator-toolbox{ padding-top: 0 !important; }
#toolbar-menubar{ z-index: 10 !important; }

As for why they don't seem to be loading I think the explanation is simply that you have put that one line //NEW: there. That is invalid syntax and the lines that follow it are thus ignored. CSS doesn't have line-comments, you must use block-comment like /* NEW: */

[vanhauser-thc]

That // New is not in the CSS, I put that in by hand here on github to mark the lines I added. the grep command would not have matched that line :) I do not care for the menu bar, I am getting crazy that the tabs are still on top ...

This is my full file without any modifications here:

/* Example userChrome.css file */

/* Import your desired components first */

@import url(chrome/tab_close_button_always_on_hover.css);
@import url(chrome/tab_loading_progress_throbber.css);
@import url(chrome/button_effect_scale_onclick.css);
@import url(chrome/blank_page_background.css);
//@import url(chrome/autohide_menubar.css);
@import url(chrome/hide_toolbox_top_bottom_borders.css);
@import url(chrome/vertical_context_navigation.css);
//@import url(chrome/minimal_popup_scrollbars.css);
@import url(chrome/button_effect_icon_glow.css);
//@import url(chrome/dark_context_menus.css);
//@import url(chrome/dark_additional_windows.css);
//@import url(chrome/dark_checkboxes_and_radios.css);
//@import url(chrome/minimal_text_fields.css);
//@import url(chrome/minimal_toolbarbuttons.css);
@import url(chrome/urlbar_centered_text.css);
@import url(chrome/window_control_placeholder_support.css);
@import url(chrome/tabs_on_bottom.css);
@import url(chrome/tabs_on_bottom_menubar_on_top_patch.css);

/* Apply your custom modifications after imports */

:root{
  --toolbar-bgcolor: rgb(36,44,59) !important;
  --uc-menu-bkgnd: var(--toolbar-bgcolor);
  --arrowpanel-background: var(--toolbar-bgcolor) !important;
  --autocomplete-popup-background: var(--toolbar-bgcolor) !important;
  --uc-menu-disabled: rgb(90,90,90) !important;
  --lwt-toolbar-field-focus: rgb(36,44,59) !important;
}

#sidebar-box{ --sidebar-background-color: var(--toolbar-bgcolor) !important; }
window.sidebar-panel{ --lwt-sidebar-background-color: rgb(36,44,59) !important; }

[MrOtherGuy]

You are still trying to use line-comments there. All those //@import are making things invalid.

[vanhauser-thc]

ahh!!! thanks for pointing out the obvious that I totally overlooked ... sorry!