Same problem for me. It looks like the original userChrome.css fix stopped working due to some change in Firefox v65.0.

This user has some comprehensive CSS fixes which includes a v65.0-compatible tabs-on-bottom solution: https://github.com/Aris-t2/CustomCSSforFx

I didn't want to run their whole solution yet so just copied and pasted what I thought were the relevant bits into my userChrome.css and it looks like it's working fine again. My userChrome.css is available here here if you just want to copy/paste, but I recommend looking at the above Github as well as it looks like there are a bunch of other cool changes!

Hi Trogau,

Thanks for getting back to me so quick. I'm really sorry, I'm not great at this and must be missing something blindingly obvious, I can't see which bit of code I should be looking at to copy.

When I went into userchrome I've literally just got this in there:

1. nav-bar { /* main toolbar containing address bar, search bar, add-on icons */

-moz-box-ordinal-group: 1 !important;

}

1. PersonalToolbar { /* bookmarks toolbar */

-moz-box-ordinal-group: 2 !important;

}

1. TabsToolbar { /* tab bar */

-moz-box-ordinal-group: 3 !important;

}

Would you mind pointing me to the bit of code I should be looking at please? I'm sorry to need baby steps like this but I couldn't find anything obvious as 'tabs on bottom' even after a good half hour and 6 or 7 attempts. I'm willing to try but not sure what to try!

Yep, that's what I had in my userChrome.css originally as well.

What I did was:

1) delete the previous code in your userChrome.css (note: if you have other tweaks, make sure to only delete the code relating to tabs-on-bottom. If not it's probably safe to remove it all, but it's worth backing up your previous file just in case). 2) go to my combined CSS code here and click 'Raw' to get the raw code 3) copy that and paste it into your userChrome.css 4) save and relaunch and you should have tabs on bottom again.

You'll see instantly that the new CSS code is much more complex and does much more stuff - note that I have only glanced through it so I'm not sure what other changes are made, so you may see other effects. Use with caution :)

Edit #2: I recommend the CSS in this solution as it is less code & thus simpler! I adjusted the `min-height` fields to 32px.

(edited first point to clarify as it doesn't appear in context now that it's marked a solution)

Hooray! That did it! Thank you so much! No immediately obvious weirdness but my tabs are back where they belong! I'll have a proper look through it when I've got more time :)

Thank you so much!

Deleted

trogau said

Yep, that's what I had in my userChrome.css originally as well. What I did was: 1) delete all that code 2) go to my combined CSS code here and click 'Raw' to get the raw code 3) copy that and paste it into your userChrome.css 4) save and relaunch and you should have tabs on bottom again. You'll see instantly that the new CSS code is much more complex and does much more stuff - note that I have only glanced through it so I'm not sure what other changes are made, so you may see other effects. Use with caution :)

Thank you. That helped me too.

Worked Perfectly! Thanks!

trogau', thanks, that fix worked. However, the icon spacing on the toolbar is too far apart. What can I do to reduce this spacing. Thanks!

On a sidenote, I'm a diehard Win7 UI fan, although I have Win10 on my laptop. My biggest gripe with Windows, Firefox, etc. is the incessant desire to change the US look and feel of things, especially when Win8+ arrived. As Dr. McCoy said, "I hate engineers. They love to change things." I've configured my laptop to have the look and feel of Win7 as much as possible, getting rig of all the GUI bells and whistles as much as I could. It's just me. I'm all for updating what's under the hood, but WHY do they ALWAYS have to repaint the body?

How do I get to the raw CSS code?

ctuna said

How do I get to the raw CSS code?

Just search RAW (CTRL+F) within the site.

Click on the link. At the line that says "477 lines", there's three icons, "Raw, Blame, and History". Click on the "Raw" icon.

Search from which search box . If I do control F I get a search box at the bottom If I put RAW in it nothing happens. I guess it can find it same with 477 lines.

Sorry I get it now the links that you referenced. Looks like it will be a struggle.

Do you have a link to the 477 lines? Never mind I found it.

I hope 65 solves the freeze up problems I have been getting lately . I tried the hardware acceleration off and increasing the processes to max but it still was happening.

Alright, the CSS solution provided here did help to bring tabs to the bottom, but things still don't look quite right to me. Here are my questions:

1). There is a thick blue line on top of a currently active tab. How can I make it thinner/recolor it? Also the line becomes black instead of blue when using Office 2010 Aero theme, so I guess it's color is not even set in stone somehow? I really want to recolor it and make it so that the recolor would work on all themes.

2). Using Office 2010 Aero theme makes borders between inactive Tabs and Bookmarks disappear (only an active tab have border, but it's too thick and of a wrong color, as I've already told). How can I force those borders to always display regardless of a theme?

3). How do I get Tab and Bookmark panels taller?

It has all been set up perfectly in the old CSS for me, but Mozilla just have to screw things up regularly...

See also:

• /questions/1248277 Reposition Tabs at bottom, directly above web page in Firefox 65.0?

Ok, after some googling I was able to modify the CSS to make the interface better.

1). To get rid of the annoying thick blue/black line at the top of an active tab, go here: https://support.mozilla.org/en-US/questions/1189959

2). To modify Tab panel heigh go here: https://support.mozilla.org/en-US/questions/1248277

3). To modify Bookmark panel height add this code to the bottom of your CSS:

toolbarbutton.bookmark-item {

 padding-top: 3px !important;
 padding-bottom: 2px !important;
 margin: 0px !important;

}

Modify "padding-top" and "padding-bottom" to your needs.

Half a day wasted, but here is a way to restore borders between inactive Tabs and Bookmarks when using non-default themes:

.tab-background:not([selected]) {

 border-top-color: #b9bdc2 !important;
 margin-right: -1px !important;
 margin-left: -1px !important;

}

First, thanks for the great work. There's one tweak I really need, where the bookmark icon spacing is now too wide. Is there a way to reduce it to just a few pixels? See image. Thanks.

Also, on a separate subject, while we're talking about mods for 65.x, here's some code I gleaned to reduce the line spacing for the Bookmark Sidebar and Font, and Bookmark editor. I added this to "my_userChrome.css", as suggested.

/***************************************************************************************/ /************** Change Bookmark Sidebar and Bookmark Editor Line Spacing ***************/ /***************************************************************************************

/* change sidebar font style */
#bookmarks-view {
  font-size: 10pt !important;
  font-family: Calibri !important;
  border-width: 0px !important; 
  padding: 0px !important;
  margin-top: 0px !important;
  margin-bottom: 0px !important;
}

/* negative amounts, when allowed, can pack lines close */
#bookmarks-view treechildren::-moz-tree-row {
   margin-top: -4px !important;
   margin-bottom: -3px !important;
}

/* reduce bookmark editor line spacing */
/* line below starts with ":-moz-any(" but doesn't show in this post */

-moz-any(#historyTree, #editBMPanel_folderTree, #placesList, #placeContent) treechildren::-moz-tree-row {

 margin-top: -1px !important;
 min-height: 14px !important;
 height: 14px !important;

}

• • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • /

trogau said

Yep, that's what I had in my userChrome.css originally as well. What I did was: 1) delete the previous code in your userChrome.css (note: if you have other tweaks, make sure to only delete the code relating to tabs-on-bottom. If not it's probably safe to remove it all, but it's worth backing up your previous file just in case). 2) go to my combined CSS code here and click 'Raw' to get the raw code 3) copy that and paste it into your userChrome.css 4) save and relaunch and you should have tabs on bottom again. You'll see instantly that the new CSS code is much more complex and does much more stuff - note that I have only glanced through it so I'm not sure what other changes are made, so you may see other effects. Use with caution :) Edit #2: I recommend the CSS in this solution as it is less code & thus simpler! I adjusted the `min-height` fields to 32px. (edited first point to clarify as it doesn't appear in context now that it's marked a solution)

Tried option 1 first and no good as the tabs and bookmark bar were overlapping then I noticed you had a second option and that one worked like a charm!

I then added this to it to chnage back the color on my folders and worked perfectly. Add this to your code if you want yellow folders rather then that boring grey color!

/* Colored bookmark sidebar, toolbar, menu button containers */

 /* Standard folder */
 #bookmarks-view treechildren::-moz-tree-image(container),
 #PlacesToolbarItems toolbarbutton[container="true"] .toolbarbutton-icon,
 #PlacesToolbarItems menu[container="true"] .menu-iconic-left,
 #BMB_bookmarksPopup menu[container="true"] .menu-iconic-icon {
   fill: gold !important;
 }
 /* Live Bookmark (RSS Feed) */
 #bookmarks-view treechildren::-moz-tree-image(container, livemark),
 #PlacesToolbarItems toolbarbutton[container="true"][livemark="true"] .toolbarbutton-icon,
 #PlacesToolbarItems menu[container="true"][livemark="true"] .menu-iconic-left,
 #BMB_bookmarksPopup menu[container="true"][livemark="true"] .menu-iconic-icon {
   fill: orange !important;
 }
 /* Smart bookmark folder */
 #bookmarks-view treechildren::-moz-tree-image(container, query),
 #PlacesToolbarItems toolbarbutton[container="true"][query="true"] .toolbarbutton-icon,
 #PlacesToolbarItems menu[container="true"][query="true"] .menu-iconic-left,
 #BMB_bookmarksPopup menu[container="true"][query="true"] .menu-iconic-icon {
   fill: dimtan !important;
 }
 /* These "containers" are SVG in the sidebar, not yet on the menu */
 #bookmarks-view treechildren::-moz-tree-image(container, OrganizerQuery_BookmarksMenu) {
   fill: tan !important;
 }
 #bookmarks-view treechildren::-moz-tree-image(container, OrganizerQuery_BookmarksToolbar) {
   fill: tan !important;
 }
 #bookmarks-view treechildren::-moz-tree-image(container, OrganizerQuery_UnfiledBookmarks) {
   fill: tan !important;
 }

This is neither a solution nor a comment, because I am going to have to try these various suggestions later.

I just want to say, after all these years, and the countless number of complaints they have received on this ONE topic, when the hell is "tabs on bottom" simply going to be part of the Customize menu for the toolbars? It is ridiculous that all of us non-programmers have to go through this process of finding hidden files and copying and pasting code - that we don't understand and can't adjust if it doesn't work - every single time FF updates. I don't want to switch browsers. I'm in my 60's and don't want to learn to use a different one. But this is SO ANNOYING and really makes me think FF programmers are paying no attention to us users.