Firefox..move tabs below address bar

Burris said:

...Save it, restart firefox and it should work.

This one does not maintain accent color on Tab Bar and inactive tabs,
@bo elam 's does...

With Firefox 69 (Released Sept. 3, 2019) userchrome.css will no longer work unless enabled in about:config.
Type about:config into the address bar, hit enter. In the search box above the list, type or paste userprof
If you don't find it, then it's not the issue, but if you do find it, set the resulting toolkit.legacyUserProfileCustomizations.stylesheets preference to true. Restart your browser, and tabs should be on bottom.

The update to Firefox 71 breaks the code that puts tabs at the bottom as I posted it here:

Firefox..move tabs below address bar

The solution to fix it is simple, all that has to be done is add this line: display: block !important;

under: #TabsToolbar {

In the end, the new code looks like this:

@NamEspace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
/* 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 {
display: block !important;
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;}

The code as posted above, works for me for putting tabs under the address bar.

Bo

I have tried quite a few userChrome.css files to restore tabs on bottom on FIrefox 73.01. None of them work, including all the suggestions found on this page. Any help would be greatly appreciated.

OCGPA said:

I have tried quite a few userChrome.css files to restore tabs on bottom on FIrefox 73.01. None of them work, including all the suggestions found on this page. Any help would be greatly appreciated.

Hi OCGPA, sorry I did not see your post earlier. The release of Firefox 72 broke the old code (as posted in my previous post in this thread). The new code, as written below works in Firefox 73.0.1.

Code:

@-moz-document url(chrome://browser/content/browser.xul), url(chrome://browser/content/browser.xhtml) {

}
/* 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 {
display: block !important;
 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;}

Important: Make sure the preference below is set to true in about:config. This needs to be done in order for userChrome.css to work.

toolkit.legacyUserProfileCustomizations.stylesheets


Bo

Thanks for the reply, Bo. Unfortunately, your solution failed to work. I replaced the userChrome.css file (location is Users"username"\AppData\Roaming\Mozilla\Firefox\Profiles\chrome) with the code you provided. toolkit.legacyUserProfileCustomizations.stylesheets is set to true. Any suggestions?

OCGPA said:

Thanks for the reply, Bo. Unfortunately, your solution failed to work. I replaced the userChrome.css file (location is Users"username"\AppData\Roaming\Mozilla\Firefox\Profiles\chrome) with the code you provided. toolkit.legacyUserProfileCustomizations.stylesheets is set to true. Any suggestions?

You are welcome. The only thing I can think of is that your userChrome file is not saved as css. When you create the userChrome.css file, you have to make sure it gets saved as css. If you were not careful on this, the file gets saved as text. And that wouldn't work. If this is the first time you are trying to use userChrome.css, then this is probably the reason this is not working for you. Show the Extensions of files in File Explorer when you create the css file, doing this will help you make sure the file gets saved as css. The file should look like this if is created correctly.



If the file is created correctly, and you know that's so because you used css before, then I recommend you try placing the tabs on the bottom code on top of any other code you are using in your css file. In other words, on top of everything.else. Another thing you can try is create a new Firefox profile, and test the code using it. This code should work for you.

Bo

Thanks again. I am quite familiar with Windows - I have been working with it since version 3.1.

I did save the file with a .css extension. I have been performing this "fix" for the past 2 years. This problem occurred on a new installation on a different computer using Windows 10 Home, so there was no existing chrome folder or css file present. The code you provided is the only code I used in the css file. I will keep trying, however.

OCGPA, I uploaded the file here, link below (hopefully this is not against the rules here):

Zippyshare.com - userChrome.css

Make sure to place the file in the correct location:

AppData\Roaming\Mozilla\Firefox\Profiles\Default User\chrome

I change other stuff in the interface, but this is roughly what you ll get.



Get it done, don't give up.

Bo

Hi Bo,

I was having the same problem as OCGPA I saved your new style sheet as .css in a Chrome folder but it didn't work, then after a bit of reasoning I was able to get the new .css to work.

What I found was, the instructions for placement of the Chrome folder were confusing, hopefully I don't muddy the waters more by my explanation.

Burris the OP in post #10 says to place the chrome folder in: C:\users"your user name" without the quotes\appdata\roaming\mozilla\firefox\profiles in which you need to create a folder called chrome. and that's what I did - It didn't work. What that path was showing me was the chrome folder should be a separate folder in the Profiles folder.

Then OCGPA in post #16 says: (location is Users"username"\AppData\Roaming\Mozilla\Firefox\Profiles\chrome) This also doesn't work and only enforces the assumption that the chrome folder only needs to be placed as a separate folder in Profiles.

What lit up the bulb in my mind was when you said in post #19: AppData\Roaming\Mozilla\Firefox\Profiles\Default User\chrome and looking at your pix of the file explorer path in post #17 (thanks for posting that) I realized that the Chrome Folder with the new userChrome.css file needed to be placed within the Default User's profile.
When one drills down to Profiles you'll see a large Folder with an alphanumerical name, mine is: 9hond0lk.default-1406683553722 and it will have in my case just default in the name, Bo yours has default user in yours I don't know why the difference. You open that folder and place the Chrome folder within it.

Code:

My path: C:\Users\*****\AppData\Roaming\Mozilla\Firefox\Profiles\9hond0lk.default-1406683553722\Chrome

Once I made the adjustment, I closed Firefox then reopened, and my tabs were on the bottom.

Now I have another adjustment to make. After how many years? of getting used to, then working with tabs on top I have to get used to the way it was...