X
Tap here to go to the mobile version of the site.

Fóram Tacaíochta

Tabs on Bottom

Postáilte

Hi

Running Firefox 71.0 (64 bit)

Well seems Firefox has been messing this up again.

Anyone have the new work around solution to get my tabs back on the bottom again. They were fine this morning then shut down and went out to lunch and when I came back they were back on the top again after months of being where I wanted them below my bookmark bar.

Thoughts on this?

Thanks Dave

Hi Running Firefox 71.0 (64 bit) Well seems Firefox has been messing this up again. Anyone have the new work around solution to get my tabs back on the bottom again. They were fine this morning then shut down and went out to lunch and when I came back they were back on the top again after months of being where I wanted them below my bookmark bar. Thoughts on this? Thanks Dave

Réiteach roghnaithe

Hi.

You can move the CSS code for tabs on bottom that works in Firefox71 to its own file (e.g. tabs-on-bottom.css). Do NOT place the default @namespace line at the top of this tabs-on-bottom.css file. Add a line above the @namespace line in userChrome.css to import this file. If you do not have other CSS code in userChrome.css then you can consider to keep the code in userChrome.css and only remove the @namespace line.

See also:

userChrome.css:

@import url("tabs-on-bottom.css");
@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); /* only needed once */

tabs-on-bottom.css working code for Firefox 71 posted in this thread.

UPDATE: This code works for me with the @namespace line, so you can place it in userChrome.css if necessary (I prefer separate files to make it easier to keep track of required changes).

/* TABS: bottom - Firefox 65 and newer; should for now work with XUL @namespace */

#navigator-toolbox toolbar:not(#nav-bar):not(#toolbar-menubar) {
  -moz-box-ordinal-group: 10 !important;
}

#TabsToolbar {
  -moz-box-ordinal-group: 1000 !important;
  display: block !important;
  position: absolute !important;
  bottom: 0 !important;
  width: 100vw !important;
}

#tabbrowser-tabs {
  width: 100vw !important;
}

*|*:root:not([chromehidden*="toolbar"]) #navigator-toolbox {
  padding-bottom: calc(var(--tab-min-height) + 1px) !important; /*adjust*/
}

/* position Tab bar with Menu bar and Title bar hidden for Firefox 65-73 - omit in Firefox 74 (Nightly) */
*|*:root[tabsintitlebar]:not([inFullscreen="true"]):not([sizemode="maximized"])
 #toolbar-menubar[autohide="true"] ~ #xTabsToolbar{
  bottom: var(--tab-min-height) !important;
  padding-top: calc(var(--tab-min-height) - 20px) !important; /*adjust*/
}

/* TABS: height */
*|*:root {
  --tab-toolbar-navbar-overlap: 0px !important;
  --tab-min-height: 25px !important; /*adjust to set height or omit to use density*/
  --tab-min-width:  80px !important; /*adjust to set width or omit to use default*/
}

#TabsToolbar {
  height: var(--tab-min-height) !important;
  margin-bottom: 1px !important; /*adjust*/
  box-shadow: ThreeDShadow 0 -1px inset, -moz-dialog 0 1px !important; /*omit*/
  background-color: var(--toolbar-bgcolor) !important;
  color: var(--toolbar-color) !important;
}

/* indicators - hide  */
.private-browsing-indicator {display: none !important;}
.accessibility-indicator    {display: none !important;}

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

/* caption buttons - hide */
*|*:root[tabsintitlebar]:not([inFullscreen="true"])
 #toolbar-menubar[autohide="true"] ~ #TabsToolbar
 .titlebar-buttonbox-container {display: none !important;}

If you want to have the caption buttons visible on the Tab bar with the Menu bar and Title bar hidden then use this code as a start to replace the above posted "caption buttons - hide" rule. The caption button are positioned absolutely via a top property, so this is affected by the Bookmarks Toolbar (PersonalToolbar) being visible or hidden. Use either of the two "--personal-toolbar-height" settings that apply to the state (collapsed/hidden) of the Bookmarks Toolbar.

/* caption buttons - PersonalToolbar hidden/visible */
*|*:root {--personal-toolbar-height: 0px !important}   /*PersonalToolbar collapsed*/
*|*:root {--personal-toolbar-height: 24px !important}  /*PersonalToolbar visible*/
*|*:root {--caption-buttons-adjust: -12px !important}  /*caption buttons - adjustment*/

*|*:root[tabsintitlebar]:not([inFullscreen="true"]) #toolbar-menubar[autohide="true"]
 ~ #TabsToolbar .titlebar-buttonbox-container {
  position: fixed !important;
  display: block !important;
  right: 0 !important;
  top: calc(var(--tab-min-height) + var(--personal-toolbar-height) + var(--caption-buttons-adjust));
  visibility: visible !important;
  height: var(--tab-min-height) !important;
}

/* caption buttons - HEIGHT */
.titlebar-buttonbox-container toolbarbutton {
  height: var(--tab-min-height) !important;
  margin: 0px -5px 0px -5px !important;
  padding: 0 !important;
}

/* caption buttons - PADDING */
*|*:root[tabsintitlebar]:not([inFullscreen="true"])
 #toolbar-menubar[autohide="true"] ~
  #TabsToolbar {
   padding-right: 100px !important; /*adjust*/
}
Read this answer in context 1

Tuilleadh mionsonraí faoin chóras

Feidhmchlár

  • User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:71.0) Gecko/20100101 Firefox/71.0

Tuilleadh Eolais

Sentient6 0 réiteach 3 freagra

Freagra Cabhrach

I love Firefox. I love the privacy work they're doing, I love the community support, and I love the customization options. Which is why it drives me insane that there isn't an option to put those goddamn tabs on the bottom, AND that every big update breaks the workaround scripts the community made.

I suppose it will take time for people to figure out how to unfuck the scripts, and that work will be greatly appreciated.

I love Firefox. I love the privacy work they're doing, I love the community support, and I love the customization options. Which is why it drives me insane that there isn't an option to put those goddamn tabs on the bottom, AND that every big update breaks the workaround scripts the community made. I suppose it will take time for people to figure out how to unfuck the scripts, and that work will be greatly appreciated.
cor-el
  • Top 10 Contributor
  • Moderator
17692 réiteach 160067 freagra

See:

In Firefox 69 and later you need this pref set to true on the about:config page to enable userChrome.css and userContent.css in the chrome folder.

See: *https://support.mozilla.org/en-US/kb/forum-response-tabs-below-url-bar In Firefox 69 and later you need this pref set to true on the <b>about:config</b> page to enable userChrome.css and userContent.css in the chrome folder. *toolkit.legacyUserProfileCustomizations.stylesheets = true *https://www.userchrome.org/firefox-changes-userchrome-css.html

Úinéir na ceiste

cor-el said

See: In Firefox 69 and later you need this pref set to true on the about:config page to enable userChrome.css and userContent.css in the chrome folder.

yeah that doesn't work though as I already tried this from another thread I found later and it just leaves the tabs where they are and the config is already marked true as this was working fine up until yesterday

''cor-el [[#answer-1271420|said]]'' <blockquote> See: *https://support.mozilla.org/en-US/kb/forum-response-tabs-below-url-bar In Firefox 69 and later you need this pref set to true on the <b>about:config</b> page to enable userChrome.css and userContent.css in the chrome folder. *toolkit.legacyUserProfileCustomizations.stylesheets = true *https://www.userchrome.org/firefox-changes-userchrome-css.html </blockquote> yeah that doesn't work though as I already tried this from another thread I found later and it just leaves the tabs where they are and the config is already marked true as this was working fine up until yesterday
Sentient6 0 réiteach 3 freagra

cor-el said

See: In Firefox 69 and later you need this pref set to true on the about:config page to enable userChrome.css and userContent.css in the chrome folder.

This worked pre-71. Doesn't work now.

''cor-el [[#answer-1271420|said]]'' <blockquote> See: *https://support.mozilla.org/en-US/kb/forum-response-tabs-below-url-bar In Firefox 69 and later you need this pref set to true on the <b>about:config</b> page to enable userChrome.css and userContent.css in the chrome folder. *toolkit.legacyUserProfileCustomizations.stylesheets = true *https://www.userchrome.org/firefox-changes-userchrome-css.html </blockquote> This worked pre-71. Doesn't work now.
cor-el
  • Top 10 Contributor
  • Moderator
17692 réiteach 160067 freagra

You can add this rule to your userChrome.css or edit an existing rule for #TabsToolbar and add display: block !important;

#TabsToolbar {
 display: block !important;
}
You can add this rule to your userChrome.css or edit an existing rule for #TabsToolbar and add display: block !important; #TabsToolbar { display: block !important; }

Úinéir na ceiste

cor-el said

You can add this rule to your userChrome.css or edit an existing rule for #TabsToolbar and add display: block !important; #TabsToolbar { display: block !important; }

That didn't change anything tabs still on top.

''cor-el [[#answer-1271616|said]]'' <blockquote> You can add this rule to your userChrome.css or edit an existing rule for #TabsToolbar and add display: block !important; #TabsToolbar { display: block !important; } </blockquote> That didn't change anything tabs still on top.
cor-el
  • Top 10 Contributor
  • Moderator
17692 réiteach 160067 freagra

Did you check that the userChrome.css file doesn't have a hidden .txt or .css file extension appended ?

Can you post all details (userChrome.css file path and content), so we can check for errors ?

Did you check that the userChrome.css file doesn't have a hidden .txt or .css file extension appended ? Can you post all details (userChrome.css file path and content), so we can check for errors ?
rosawood 4 réiteach 53 freagra

Freagra Cabhrach

AGAIN! Tabs on bottom GONE! I am so tired of having to find another solution every time Firefox is updated. Updated this morning, and broken immediately. How do I go back to the last version, where I will STAY so I'm not constantly fixing this.

To the developers: Every other browser has tabs on top. Isn't Firefox supposed to be an alternative? GIVE US BACK A SETTING TO PUT THEM ON THE BOTTOM. EASILY. PLEASE!

AGAIN! Tabs on bottom GONE! I am so tired of having to find another solution every time Firefox is updated. Updated this morning, and broken immediately. How do I go back to the last version, where I will STAY so I'm not constantly fixing this. To the developers: Every other browser has tabs on top. Isn't Firefox supposed to be an alternative? GIVE US BACK A SETTING TO PUT THEM ON THE BOTTOM. EASILY. PLEASE!

Athraithe ag rosawood ar

Úinéir na ceiste

rosawood said

AGAIN! Tabs on bottom GONE! I am so tired of having to find another solution every time Firefox is updated. Updated this morning, and broken immediately. How do I go back to the last version, where I will STAY so I'm not constantly fixing this. To the developers: Every other browser has tabs on top. Isn't Firefox supposed to be an alternative? GIVE US BACK A SETTING TO PUT THEM ON THE BOTTOM. EASILY. PLEASE!

Agreed and sadly they don't even make it easy to downgrade even though I suspect if you had a recent back up of the profile that would work fine but that's just a guess and you would have to turn off auo updates which I am about to do if this stuff continues! I don't use most the new tools anyways just a waste of browser space.

https://support.mozilla.org/en-US/kb/install-older-version-of-firefox

''rosawood [[#answer-1271774|said]]'' <blockquote> AGAIN! Tabs on bottom GONE! I am so tired of having to find another solution every time Firefox is updated. Updated this morning, and broken immediately. How do I go back to the last version, where I will STAY so I'm not constantly fixing this. To the developers: Every other browser has tabs on top. Isn't Firefox supposed to be an alternative? GIVE US BACK A SETTING TO PUT THEM ON THE BOTTOM. EASILY. PLEASE! </blockquote> Agreed and sadly they don't even make it easy to downgrade even though I suspect if you had a recent back up of the profile that would work fine but that's just a guess and you would have to turn off auo updates which I am about to do if this stuff continues! I don't use most the new tools anyways just a waste of browser space. https://support.mozilla.org/en-US/kb/install-older-version-of-firefox

Úinéir na ceiste

cor-el said

Did you check that the userChrome.css file doesn't have a hidden .txt or .css file extension appended ? Can you post all details (userChrome.css file path and content), so we can check for errors ?

let me try something first I might have updated something wrong let me test it out have to go back and find the new code.

''cor-el [[#answer-1271642|said]]'' <blockquote> Did you check that the userChrome.css file doesn't have a hidden .txt or .css file extension appended ? Can you post all details (userChrome.css file path and content), so we can check for errors ? </blockquote> let me try something first I might have updated something wrong let me test it out have to go back and find the new code.

Úinéir na ceiste

cor-el said

Did you check that the userChrome.css file doesn't have a hidden .txt or .css file extension appended ? Can you post all details (userChrome.css file path and content), so we can check for errors ?

OK good news. One thing no one mentioned in all these posts is it had to be in the ROAMING folder not the LOCAL folder so I had been updating the wrong user css file but this morning when I was looking at About:Profiles I noticed roaming and thought perhaps I had updated the wrong file and that was the case so with some tweaks I managed to adjust the old code that jscher2000 helped me with.

I'll post the answer in a separate response

''cor-el [[#answer-1271642|said]]'' <blockquote> Did you check that the userChrome.css file doesn't have a hidden .txt or .css file extension appended ? Can you post all details (userChrome.css file path and content), so we can check for errors ? </blockquote> OK good news. One thing no one mentioned in all these posts is it had to be in the ROAMING folder not the LOCAL folder so I had been updating the wrong user css file but this morning when I was looking at About:Profiles I noticed roaming and thought perhaps I had updated the wrong file and that was the case so with some tweaks I managed to adjust the old code that jscher2000 helped me with. I'll post the answer in a separate response

Athraithe ag scottish2 ar

Úinéir na ceiste

OK for those in this thread needed it here is the full resolution to this.

First for all file and folder names note the Cap and Lower Case as these are case sensitive so they must be proper for them to work.

chrome userChrome.css

First open a new tab and in the address-bar type the below and hit enter

about:profiles

there will be two folder locations select the one for the ROAMING folder this will open up windows file explorer

This will open the root roaming folder. In this you may and may not see a chrome folder if you do then go into it and skip the next section


If you DO NOT see the chrome folder then right click somewhere on the right side of the screen in a white area and select new and then select folder. This will pop a new folder on the right simple name it chrome. If it does not let you set the name (It should by default but in case you click somewhere by mistake) just right click the NEW FOLDER and select rename and rename it chrome. one named go into the chrome folder


If you already have a userChrome.css file then skip this step!

If you chrome folder is empty then right click on the right like you did for the above step and select NEW and then in this drop down menu select text document and again name it as below making sure to remove all the old text first!

userChrome.css

when you click elsewhere to confirm the new name it's going to ask you if you want to change the extension just confirm yes!


Now for the code. Copy all the code below and then in there open the userChrome.css file then past the code below into the file and close and save it.

Restart your browser and the tabs should be on the bottom.

This code will also color the folders in your bookmark toolbar to a yellowish folder color. I found it better then the default grey. You can adjust the folder colors there also if you so chose in this code. NOTE this only changes the bookmark toolbar folder color I could not get the main bookmark menu to change to yellow but for me was never an issue so if you need to change the bookmark menu also you will need to ask a separate question in this to see if someone can help you with the menu.

I am sure if you need additional tweaks there are others here that can help you customize this code further but this will get you past the tabs on top issue for FF71

Copy everything below the bar until end of post


@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); /* only needed once */

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

/* 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;
  }
OK for those in this thread needed it here is the full resolution to this. First for all file and folder names note the Cap and Lower Case as these are case sensitive so they must be proper for them to work. <b>chrome</b> <b>userChrome.css</b> First open a new tab and in the address-bar type the below and hit enter about:profiles there will be two folder locations select the one for the <b>ROAMING</b> folder this will open up windows file explorer This will open the root roaming folder. In this you may and may not see a <b>chrome</b> folder if you do then go into it and skip the next section ------------------------------------------ If you DO NOT see the <b>chrome</b> folder then right click somewhere on the right side of the screen in a white area and select new and then select folder. This will pop a new folder on the right simple name it <b>chrome</b>. If it does not let you set the name (It should by default but in case you click somewhere by mistake) just right click the NEW FOLDER and select rename and rename it <b>chrome</b>. one named go into the <b>chrome</b> folder ------------------------------------------ If you already have a userChrome.css file then skip this step! If you <b>chrome</b> folder is empty then right click on the right like you did for the above step and select NEW and then in this drop down menu select <b>text document</b> and again name it as below making sure to remove all the old text first! userChrome.css when you click elsewhere to confirm the new name it's going to ask you if you want to change the extension just confirm yes! ------------------------------------------ Now for the code. Copy all the code below and then in there open the <b>userChrome.css</b> file then past the code below into the file and close and save it. Restart your browser and the tabs should be on the bottom. This code will also color the folders in your bookmark toolbar to a yellowish folder color. I found it better then the default grey. You can adjust the folder colors there also if you so chose in this code. NOTE this only changes the bookmark toolbar folder color I could not get the main bookmark menu to change to yellow but for me was never an issue so if you need to change the bookmark menu also you will need to ask a separate question in this to see if someone can help you with the menu. I am sure if you need additional tweaks there are others here that can help you customize this code further but this will get you past the tabs on top issue for FF71 Copy everything below the bar until end of post <hr> <pre> @namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); /* only needed once */ /* 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; /*required for 71+*/ 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: 27px !important; /* adjust to suit your needs */ } :root #tabbrowser-tabs { --tab-min-height: 27px !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; } /* 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; } </pre>

Athraithe ag scottish2 ar

rosawood 4 réiteach 53 freagra

I finally have tabs on bottom. Thank you for the code; it was very helpful. I tried using v. 71 with tabs on top, and it's just non-intuitive, so it's nice to have them back where I want them.

I finally have tabs on bottom. Thank you for the code; it was very helpful. I tried using v. 71 with tabs on top, and it's just non-intuitive, so it's nice to have them back where I want them.

Úinéir na ceiste

rosawood said

I finally have tabs on bottom. Thank you for the code; it was very helpful. I tried using v. 71 with tabs on top, and it's just non-intuitive, so it's nice to have them back where I want them.

No problem and while I posted what I had is really the code created here but several people putting it together over the years!

''rosawood [[#answer-1272757|said]]'' <blockquote> I finally have tabs on bottom. Thank you for the code; it was very helpful. I tried using v. 71 with tabs on top, and it's just non-intuitive, so it's nice to have them back where I want them. </blockquote> No problem and while I posted what I had is really the code created here but several people putting it together over the years!
Sentient6 0 réiteach 3 freagra

Thank you kindly, worked like a charm!

Thank you kindly, worked like a charm!
olds97_lss 0 réiteach 13 freagra

And now with 72... it's broken again.

And now with 72... it's broken again.
cor-el
  • Top 10 Contributor
  • Moderator
17692 réiteach 160067 freagra

Réiteach Roghnaithe

Hi.

You can move the CSS code for tabs on bottom that works in Firefox71 to its own file (e.g. tabs-on-bottom.css). Do NOT place the default @namespace line at the top of this tabs-on-bottom.css file. Add a line above the @namespace line in userChrome.css to import this file. If you do not have other CSS code in userChrome.css then you can consider to keep the code in userChrome.css and only remove the @namespace line.

See also:

userChrome.css:

@import url("tabs-on-bottom.css");
@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); /* only needed once */

tabs-on-bottom.css working code for Firefox 71 posted in this thread.

UPDATE: This code works for me with the @namespace line, so you can place it in userChrome.css if necessary (I prefer separate files to make it easier to keep track of required changes).

/* TABS: bottom - Firefox 65 and newer; should for now work with XUL @namespace */

#navigator-toolbox toolbar:not(#nav-bar):not(#toolbar-menubar) {
  -moz-box-ordinal-group: 10 !important;
}

#TabsToolbar {
  -moz-box-ordinal-group: 1000 !important;
  display: block !important;
  position: absolute !important;
  bottom: 0 !important;
  width: 100vw !important;
}

#tabbrowser-tabs {
  width: 100vw !important;
}

*|*:root:not([chromehidden*="toolbar"]) #navigator-toolbox {
  padding-bottom: calc(var(--tab-min-height) + 1px) !important; /*adjust*/
}

/* position Tab bar with Menu bar and Title bar hidden for Firefox 65-73 - omit in Firefox 74 (Nightly) */
*|*:root[tabsintitlebar]:not([inFullscreen="true"]):not([sizemode="maximized"])
 #toolbar-menubar[autohide="true"] ~ #xTabsToolbar{
  bottom: var(--tab-min-height) !important;
  padding-top: calc(var(--tab-min-height) - 20px) !important; /*adjust*/
}

/* TABS: height */
*|*:root {
  --tab-toolbar-navbar-overlap: 0px !important;
  --tab-min-height: 25px !important; /*adjust to set height or omit to use density*/
  --tab-min-width:  80px !important; /*adjust to set width or omit to use default*/
}

#TabsToolbar {
  height: var(--tab-min-height) !important;
  margin-bottom: 1px !important; /*adjust*/
  box-shadow: ThreeDShadow 0 -1px inset, -moz-dialog 0 1px !important; /*omit*/
  background-color: var(--toolbar-bgcolor) !important;
  color: var(--toolbar-color) !important;
}

/* indicators - hide  */
.private-browsing-indicator {display: none !important;}
.accessibility-indicator    {display: none !important;}

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

/* caption buttons - hide */
*|*:root[tabsintitlebar]:not([inFullscreen="true"])
 #toolbar-menubar[autohide="true"] ~ #TabsToolbar
 .titlebar-buttonbox-container {display: none !important;}

If you want to have the caption buttons visible on the Tab bar with the Menu bar and Title bar hidden then use this code as a start to replace the above posted "caption buttons - hide" rule. The caption button are positioned absolutely via a top property, so this is affected by the Bookmarks Toolbar (PersonalToolbar) being visible or hidden. Use either of the two "--personal-toolbar-height" settings that apply to the state (collapsed/hidden) of the Bookmarks Toolbar.

/* caption buttons - PersonalToolbar hidden/visible */
*|*:root {--personal-toolbar-height: 0px !important}   /*PersonalToolbar collapsed*/
*|*:root {--personal-toolbar-height: 24px !important}  /*PersonalToolbar visible*/
*|*:root {--caption-buttons-adjust: -12px !important}  /*caption buttons - adjustment*/

*|*:root[tabsintitlebar]:not([inFullscreen="true"]) #toolbar-menubar[autohide="true"]
 ~ #TabsToolbar .titlebar-buttonbox-container {
  position: fixed !important;
  display: block !important;
  right: 0 !important;
  top: calc(var(--tab-min-height) + var(--personal-toolbar-height) + var(--caption-buttons-adjust));
  visibility: visible !important;
  height: var(--tab-min-height) !important;
}

/* caption buttons - HEIGHT */
.titlebar-buttonbox-container toolbarbutton {
  height: var(--tab-min-height) !important;
  margin: 0px -5px 0px -5px !important;
  padding: 0 !important;
}

/* caption buttons - PADDING */
*|*:root[tabsintitlebar]:not([inFullscreen="true"])
 #toolbar-menubar[autohide="true"] ~
  #TabsToolbar {
   padding-right: 100px !important; /*adjust*/
}
Hi. You can move the CSS code for tabs on bottom that works in Firefox71 to its own file (e.g. tabs-on-bottom.css). Do NOT place the default @namespace line at the top of this tabs-on-bottom.css file. Add a line above the @namespace line in userChrome.css to import this file. If you do not have other CSS code in userChrome.css then you can consider to keep the code in userChrome.css and only remove the @namespace line. See also: *https://support.mozilla.org/en-US/kb/forum-response-tabs-below-url-bar <b>userChrome.css</b>: @import url("tabs-on-bottom.css"); @namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); /* only needed once */ <b>tabs-on-bottom.css</b> working code for Firefox 71 posted in this thread. UPDATE: This code works for me with the @namespace line, so you can place it in userChrome.css if necessary (I prefer separate files to make it easier to keep track of required changes). <pre><nowiki> /* TABS: bottom - Firefox 65 and newer; should for now work with XUL @namespace */ #navigator-toolbox toolbar:not(#nav-bar):not(#toolbar-menubar) { -moz-box-ordinal-group: 10 !important; } #TabsToolbar { -moz-box-ordinal-group: 1000 !important; display: block !important; position: absolute !important; bottom: 0 !important; width: 100vw !important; } #tabbrowser-tabs { width: 100vw !important; } *|*:root:not([chromehidden*="toolbar"]) #navigator-toolbox { padding-bottom: calc(var(--tab-min-height) + 1px) !important; /*adjust*/ } /* position Tab bar with Menu bar and Title bar hidden for Firefox 65-73 - omit in Firefox 74 (Nightly) */ *|*:root[tabsintitlebar]:not([inFullscreen="true"]):not([sizemode="maximized"]) #toolbar-menubar[autohide="true"] ~ #xTabsToolbar{ bottom: var(--tab-min-height) !important; padding-top: calc(var(--tab-min-height) - 20px) !important; /*adjust*/ } /* TABS: height */ *|*:root { --tab-toolbar-navbar-overlap: 0px !important; --tab-min-height: 25px !important; /*adjust to set height or omit to use density*/ --tab-min-width: 80px !important; /*adjust to set width or omit to use default*/ } #TabsToolbar { height: var(--tab-min-height) !important; margin-bottom: 1px !important; /*adjust*/ box-shadow: ThreeDShadow 0 -1px inset, -moz-dialog 0 1px !important; /*omit*/ background-color: var(--toolbar-bgcolor) !important; color: var(--toolbar-color) !important; } /* indicators - hide */ .private-browsing-indicator {display: none !important;} .accessibility-indicator {display: none !important;} /* window controls hide*/ #TabsToolbar #window-controls {display: none !important;} /* caption buttons - hide */ *|*:root[tabsintitlebar]:not([inFullscreen="true"]) #toolbar-menubar[autohide="true"] ~ #TabsToolbar .titlebar-buttonbox-container {display: none !important;} </nowiki></pre> ----- If you want to have the caption buttons visible on the Tab bar with the Menu bar and Title bar hidden then use this code as a start to replace the above posted "caption buttons - hide" rule. The caption button are positioned absolutely via a top property, so this is affected by the Bookmarks Toolbar (PersonalToolbar) being visible or hidden. Use either of the two "--personal-toolbar-height" settings that apply to the state (collapsed/hidden) of the Bookmarks Toolbar. <pre><nowiki> /* caption buttons - PersonalToolbar hidden/visible */ *|*:root {--personal-toolbar-height: 0px !important} /*PersonalToolbar collapsed*/ *|*:root {--personal-toolbar-height: 24px !important} /*PersonalToolbar visible*/ *|*:root {--caption-buttons-adjust: -12px !important} /*caption buttons - adjustment*/ *|*:root[tabsintitlebar]:not([inFullscreen="true"]) #toolbar-menubar[autohide="true"] ~ #TabsToolbar .titlebar-buttonbox-container { position: fixed !important; display: block !important; right: 0 !important; top: calc(var(--tab-min-height) + var(--personal-toolbar-height) + var(--caption-buttons-adjust)); visibility: visible !important; height: var(--tab-min-height) !important; } /* caption buttons - HEIGHT */ .titlebar-buttonbox-container toolbarbutton { height: var(--tab-min-height) !important; margin: 0px -5px 0px -5px !important; padding: 0 !important; } /* caption buttons - PADDING */ *|*:root[tabsintitlebar]:not([inFullscreen="true"]) #toolbar-menubar[autohide="true"] ~ #TabsToolbar { padding-right: 100px !important; /*adjust*/ }</nowiki></pre>

Athraithe ag cor-el ar

olds97_lss 0 réiteach 13 freagra

cor-el said

Hi. You can move the CSS code for tabs on bottom that works in Firefox71 to its own file (e.g. tabs-on-bottom.css). Do NOT place the default @namespace line at the top of this tabs-on-bottom.css file. Add a line above the @namespace line in userChrome.css to import this file. If you do not have other CSS code in userChrome.css then you can consider to keep the code in userChrome.css and only remove the @namespace line. userChrome.css: @import url("tabs-on-bottom.css"); @namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); /* only needed once */ tabs-on-bottom.css working code for Firefox 71 posted in this thread.
/* no @namespace line in tabs-on-bottom.css */

/* 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; /*required for 71+*/
 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 */
/* remainder of CSS code from userChrome.css */

Thank you! This appears to have worked. I just copied the part you said into a new css as mentioned then put the import part in the userChrome.css as mentioned while leaving the old section I had for the tabs commented out. Appears to have worked!

''cor-el [[#answer-1279083|said]]'' <blockquote> Hi. You can move the CSS code for tabs on bottom that works in Firefox71 to its own file (e.g. tabs-on-bottom.css). Do NOT place the default @namespace line at the top of this tabs-on-bottom.css file. Add a line above the @namespace line in userChrome.css to import this file. If you do not have other CSS code in userChrome.css then you can consider to keep the code in userChrome.css and only remove the @namespace line. <b>userChrome.css</b>: @import url("tabs-on-bottom.css"); @namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); /* only needed once */ <b>tabs-on-bottom.css</b> working code for Firefox 71 posted in this thread. <pre><nowiki>/* no @namespace line in tabs-on-bottom.css */ /* 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; /*required for 71+*/ 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 */ /* remainder of CSS code from userChrome.css */</nowiki></pre> </blockquote> Thank you! This appears to have worked. I just copied the part you said into a new css as mentioned then put the import part in the userChrome.css as mentioned while leaving the old section I had for the tabs commented out. Appears to have worked!

Úinéir na ceiste

Hi All

OK So looks like we been messed with again. My CSS code is close the tabs are still on the bottom, but instead of being at the very bottom then now overlap the bookmark bar. I assume it's just a matter of height but being I have to go out shortly to catch a flight I don't have time to deal with fiddling with the coding so was hoping someone might be able to take a look at my code and see what needs to be adjusted so that when I reach the hotel later today I might have a solution I can just plunk in. Below is my code Thanks in Advance for any help given!!

@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); /* only needed once */

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




/* 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;
  }
Hi All OK So looks like we been messed with again. My CSS code is close the tabs are still on the bottom, but instead of being at the very bottom then now overlap the bookmark bar. I assume it's just a matter of height but being I have to go out shortly to catch a flight I don't have time to deal with fiddling with the coding so was hoping someone might be able to take a look at my code and see what needs to be adjusted so that when I reach the hotel later today I might have a solution I can just plunk in. Below is my code Thanks in Advance for any help given!! <blockquote> <pre> @namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); /* only needed once */ /* 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; /*required for 71+*/ 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: 27px !important; /* adjust to suit your needs */ } :root #tabbrowser-tabs { --tab-min-height: 27px !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; } /* 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; } </blockquote>
rosawood 4 réiteach 53 freagra

olds97_lss said

And now with 72... it's broken again.

You'd think that with being a continual irritant to so many people, this would be checked before a release. Does Mozilla do any integration testing? Or do the developers just figure eventually they'll wear us down? I just don't get why this has to be an issue with every release.

That said, I do appreciate those who jump in to tell us how to get back the feature we all want.

''olds97_lss [[#answer-1279068|said]]'' <blockquote> And now with 72... it's broken again. </blockquote> You'd think that with being a continual irritant to so many people, this would be checked before a release. Does Mozilla do any integration testing? Or do the developers just figure eventually they'll wear us down? I just don't get why this has to be an issue with every release. That said, I do appreciate those who jump in to tell us how to get back the feature we all want.