How do I get the tabs to show in between location & search bar but ABOVE bookmark toolbar?

[aris-t2]

How do I get the tabs to show in between location & search bar but ABOVE bookmark toolbar?

[fiesata]

Create folder in Firefox profile folder name it Chrome
create a new text pad and name it userChrome.css
then paste in this code and that should give the order you want

#TabsToolbar { -moz-box-ordinal-group: 2; }
#nav-bar{ border-top-width: 0px !important; }

/* bookmarks toolbar */
#navigator-toolbox #PersonalToolbar {
-moz-box-ordinal-group: 3 !important;
}

[Aris-t2]

@asiaxo
You can not move address bar to another toolbar with CSS.

[Aris-t2]

Well you are on CustomCSSforFx ;-)
All files work as a simulated extension/add-on where you can configure stuff editing userChrome.css, userContent.css and some configuration files. Firefox 65 changes a lot of stuff, so you need to do a few things, if you want to achieve something as close as before.
https://github.com/Aris-t2/CustomCSSforFx/releases

You need to paste code into userChrome.css from here:
https://github.com/Aris-t2/CustomCSSforFx/blob/master/classic/css/tabs/tabs_below_navigation_toolbar.css
here:
https://github.com/Aris-t2/CustomCSSforFx/blob/master/classic/css/tabs/tabs_below_navigation_toolbar_fx65.css
and this one:

#main-window:not([chromehidden*="toolbar"]) #navigator-toolbox {
  padding-bottom: calc(2px + (2 * var(--tab-min-height_tnot))) !important;
}

* #TabsToolbar {
  bottom: 26px !important;
}

#PersonalToolbar {
  position: absolute !important;
  bottom: 0 !important;
  width: 100vw !important;
}

#PersonalToolbar toolbarbutton.bookmark-item:not(.subviewbutton) {
  min-height: 24px !important;
}

[asiaxo]

wow! Thanks fiesata! That worked like a charm! I wasted 2 hours trying to figure this out on my own. Lol :(
okay- one more question (not even sure if possible) but is it possible to move the address & search bars up and next to where it says File/edit/view/history etc?

thanks so much!!

[asiaxo]

Hello @Aris-t2 . FF broke my toolbars again. Lol. The fixes I see moves the tabs on bottom but I want my bookmark tool bar on the very bottom. Know how to fix? Thank you!

Here is the current code I have in userchrome.css but this puts my bookmark tool bar in the middle where I'd like it under the nav tabs.

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

/* hide windows-controls */
#TabsToolbar #window-controls {display:none!important;}

/* move caption buttons to right of Tab bar */
#main-window[tabsintitlebar]:not([inFullscreen="true"]) #toolbar-menubar[autohide="true"] ~ #TabsToolbar .titlebar-buttonbox-container {
 position: fixed !important;
 right: 0 !important;
 top: calc(6px + var(--tab-min-height)) !important;
 display: block !important;
 visibility: visible !important;
}

[Aris-t2]

It is not possible to achieve this the way it was before.

Use full CustomCSSforFx package, enable tabs_below_navigation_toolbar_fx65.css and add this dirty hack (needs adjustment) to userChrome.css files bottom area:

#main-window:not([chromehidden*="toolbar"]) #navigator-toolbox {
  padding-bottom: calc(2px + (2 * var(--tab-min-height_tnot))) !important;
}

* #TabsToolbar {
  bottom: 26px !important;
}

#PersonalToolbar {
  position: absolute !important;
  bottom: 0 !important;
  width: 100vw !important;
}

#PersonalToolbar toolbarbutton.bookmark-item:not(.subviewbutton) {
  min-height: 24px !important;
}

[asiaxo]

_It is not possible to achieve this the way it was before.

Use full CustomCSSforFx package, enable tabs_below_navigation_toolbar_fx65.css and add this dirty hack (needs adjustment) to userChrome.css files bottom area:_

okay sorry, I feel dumb but I have no idea what that means ^. But I went ahead and copied your suggestion into a blank userChrome.css and took a SS of what happened (looks like addy bar shrank lol). I'm pretty sure I missed a complete step. Could u tell me where go get the customcssforfx. Thanks.

[asiaxo]

Oh. Lol. I even googled "customcssforfx" :D 🤦‍♀️ 🤣 .

Like magic it WORKED!! Thanks so much! May i make a small donation for your time?? Where to?

Thanks again :) 👍 😘

[Aris-t2]

Thanks.
Donations are welcome. Use the [Paypal Me] link: https://github.com/Aris-t2/CustomCSSforFx#want-to-support-this-project

[asiaxo]

This new update created the issue again :( And that big grey bar.. is there easy fix to get it back like how we did up there? ^

[Aris-t2]

Are you using the latest files as base?

[Aris-t2]

Nothing happened for a while here.