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

منتدى الدعم

change browser tabs location to below bookmarks toolbar

Posted

long story short l had to reinstall my laptop, it was long overdue (by two years lol) now lve gotten everything reinstalled but lm having a problem getting my tabs below my bookmarks toolbar, the userchorme.css l kept a backup of doesnt seem to be working any more, surely theres a simpler way to sort this now, or if someone could direct me to some working code to get me tabs back to below my bookmarks toolbar ld be extremely grateful..

long story short l had to reinstall my laptop, it was long overdue (by two years lol) now lve gotten everything reinstalled but lm having a problem getting my tabs below my bookmarks toolbar, the userchorme.css l kept a backup of doesnt seem to be working any more, surely theres a simpler way to sort this now, or if someone could direct me to some working code to get me tabs back to below my bookmarks toolbar ld be extremely grateful..

Chosen solution

so, it turns out that l was editing the wrong profile.. or should l say the location this install was completely different than the last, you see my old files were still on my system, when l reinstalled it kept some of my appdata folders and when l navigated to them via the shortcut in the folde l kept the usercrome.css file with the edits.

l remembered serveral mins ago there was a way to go straight to my profile from help > troubleshooting and noticed there was a descrepancy of where my profile was, not to mention there wasnt a Chrome folder, so l created it then popped the *.css in there and its worked. my fault really, however l really wish this was an option rather than a css edit.

now l just need to find out where the seperators have gone in customisations, only thing l see is flexible space.

Read this answer in context 0
Quote

Additional System Details

Application

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

More Information

cor-el
  • Top 10 Contributor
  • Moderator
17567 solutions 158896 answers

See this thread for updated userChrome.css code for Firefox 65 to move the tabs to the lower position.

See also:

See this thread for updated userChrome.css code for Firefox 65 to move the tabs to the lower position. *[[/questions/1248277]] Reposition Tabs at bottom, directly above web page in Firefox 65.0? See also: *https://support.mozilla.org/en-US/kb/forum-response-tabs-below-url-bar
Was this helpful to you? 0
Quote

Helpful Reply

neither of these solutions worked on 68.* which confuses me because my previous install evewrything was set up the way l liked it with tabs below my bookmarks toolbar, but the same edits l did before arent working.

neither of these solutions worked on 68.* which confuses me because my previous install evewrything was set up the way l liked it with tabs below my bookmarks toolbar, but the same edits l did before arent working.
Was this helpful to you? 1
Quote
cor-el
  • Top 10 Contributor
  • Moderator
17567 solutions 158896 answers

In what way isn't the code working?

Did you check with a clean userChrome.css with only the @namespace line and the new code?

You did place userChrome.css in the chrome folder and made sure that the file is a plain text file and doesn't have a a hidden .txt or .css file extension ?

In what way isn't the code working? Did you check with a clean userChrome.css with only the @namespace line and the new code? You did place userChrome.css in the chrome folder and made sure that the file is a plain text file and doesn't have a a hidden .txt or .css file extension ?
Was this helpful to you?
Quote

Question owner

downloaded a clean version popped it into the chrome folder named as userChrome.css

and this is its content (tabs havent changed location and are still above my search bar rather than below my bookmarks toolbar):

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

/* TABS: on bottom */

  1. navigator-toolbox toolbar:not(#nav-bar):not(#toolbar-menubar) {-moz-box-ordinal-group:10}
  2. TabsToolbar {-moz-box-ordinal-group:1000!important}
  1. TabsToolbar {
position: absolute !important;
bottom: 0 !important;
width: 100vw !important;

}

  1. tabbrowser-tabs {
 width: 100vw !important;

}

  1. 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;

}

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

}

  1. tabbrowser-tabs,
  2. 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 */

  1. navigator-toolbox[movingtab] > #titlebar > #TabsToolbar {
 padding-bottom: unset !important;

}

  1. navigator-toolbox[movingtab] #tabbrowser-tabs {
 padding-bottom: unset !important;
 margin-bottom: unset !important;

}

  1. navigator-toolbox[movingtab] > #nav-bar {
 margin-top: unset !important;

}

/* hide windows-controls */

  1. TabsToolbar #window-controls {display:none!important;}

/* move caption buttons to right of Tab bar */

  1. 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;

}

  1. toolbar-menubar[autohide="true"] ~ #TabsToolbar {padding-right: 100px !important;}
downloaded a clean version popped it into the chrome folder named as userChrome.css and this is its content (tabs havent changed location and are still above my search bar rather than below my bookmarks toolbar): @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 { 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; background-color: var(--toolbar-bgcolor) !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; } #toolbar-menubar[autohide="true"] ~ #TabsToolbar {padding-right: 100px !important;}
Was this helpful to you? 0
Quote

Question owner

sorry for the crappy formatting of the reply, dont know the code to get the post to format properly as code.

sorry for the crappy formatting of the reply, dont know the code to get the post to format properly as code.
Was this helpful to you?
Quote

Chosen Solution

so, it turns out that l was editing the wrong profile.. or should l say the location this install was completely different than the last, you see my old files were still on my system, when l reinstalled it kept some of my appdata folders and when l navigated to them via the shortcut in the folde l kept the usercrome.css file with the edits.

l remembered serveral mins ago there was a way to go straight to my profile from help > troubleshooting and noticed there was a descrepancy of where my profile was, not to mention there wasnt a Chrome folder, so l created it then popped the *.css in there and its worked. my fault really, however l really wish this was an option rather than a css edit.

now l just need to find out where the seperators have gone in customisations, only thing l see is flexible space.

so, it turns out that l was editing the wrong profile.. or should l say the location this install was completely different than the last, you see my old files were still on my system, when l reinstalled it kept some of my appdata folders and when l navigated to them via the shortcut in the folde l kept the usercrome.css file with the edits. l remembered serveral mins ago there was a way to go straight to my profile from help > troubleshooting and noticed there was a descrepancy of where my profile was, not to mention there wasnt a Chrome folder, so l created it then popped the *.css in there and its worked. my fault really, however l really wish this was an option rather than a css edit. now l just need to find out where the seperators have gone in customisations, only thing l see is flexible space.
Was this helpful to you?
Quote
cor-el
  • Top 10 Contributor
  • Moderator
17567 solutions 158896 answers

Firefox only comes with flexible spacer in the Customize palette. You will first have to place a flexible spacer and then edit the browser.uiCustomization.state pref. This pref is in JSON format, so be cautious not to break this JSON code ({"key":"value"} pairs). If you do it this way then Firefox takes care to add a unique ID number, so you only need to edit the type.

You should have the item(s) on the toolbar after you have restarted Firefox. Make sure to keep a backup of the current value of the browser.uiCustomization.state pref.

customizableui-special-separator## (separator)
customizableui-special-spacer##    (spacer)
customizableui-special-spring##    (spring)
Firefox only comes with flexible spacer in the Customize palette. You will first have to place a flexible spacer and then edit the browser.uiCustomization.state pref. This pref is in JSON format, so be cautious not to break this JSON code ({"key":"value"} pairs). If you do it this way then Firefox takes care to add a unique ID number, so you only need to edit the type. You should have the item(s) on the toolbar after you have restarted Firefox. Make sure to keep a backup of the current value of the browser.uiCustomization.state pref. customizableui-special-separator## (separator) customizableui-special-spacer## (spacer) customizableui-special-spring## (spring)
Was this helpful to you? 0
Quote

Question owner

thanks :)

thanks :)
Was this helpful to you?
Quote
cor-el
  • Top 10 Contributor
  • Moderator
17567 solutions 158896 answers

Helpful Reply

Note that there is a change in Firefox 71 that requires to add a "display: block;" rule to the #TabsToolbar container to get the tab on bottom.

/* required for Firefox 71+ */
#TabsToolbar {
 position: absolute !important;
 bottom: 0 !important;
 width: 100vw !important;
 display: block !important;
}
Note that there is a change in Firefox 71 that requires to add a "display: block;" rule to the #TabsToolbar container to get the tab on bottom. *https://www.reddit.com/r/FirefoxCSS/comments/da72wv/psa_for_nightly_users_potential_breakage_or_even/ <pre><nowiki>/* required for Firefox 71+ */ #TabsToolbar { position: absolute !important; bottom: 0 !important; width: 100vw !important; display: block !important; }</nowiki></pre>
Was this helpful to you? 4
Quote
mara1618 0 solutions 4 answers

Thanks cor-el. You've saved my sanity! Went to check if there were any updates within Firefox and ended up with Firefox 71 without being asked.

And then found that my tabs were no long at at the bottom. Not a happy bunny!

For non-experts like me, I wonder if it would be good if someone could come up with a new .css file we can just copy, rather than dabbling in notebook changes to files we don't understand.

fyi I found you because of the "71" reference in your message.

And I'm echoing others in saying that I'd prefer Firefox to have a simple option to set tabs at the bottom, which is were they belong logically (imho!)

Thanks again

Thanks cor-el. You've saved my sanity! Went to check if there were any updates within Firefox and ended up with Firefox 71 without being asked. And then found that my tabs were no long at at the bottom. Not a happy bunny! For non-experts like me, I wonder if it would be good if someone could come up with a new .css file we can just copy, rather than dabbling in notebook changes to files we don't understand. fyi I found you because of the "71" reference in your message. And I'm echoing others in saying that I'd prefer Firefox to have a simple option to set tabs at the bottom, which is were they belong logically (imho!) Thanks again
Was this helpful to you? 1
Quote
willy6560 0 solutions 5 answers

I've tried to add "col-el"'s solution adding the block of code to my_userChrome.css, but what happens is that it moves the tabs on top and in-line with the bookmark line. No mater what other options I activate in the custom userChrome.css, the tabs stay on top. They only go low when "display: block !important;" is active, but covers up the bookmark line.

Thanks!

I've tried to add "col-el"'s solution adding the block of code to my_userChrome.css, but what happens is that it moves the tabs '''on top''' and in-line with the bookmark line. No mater what other options I activate in the custom userChrome.css, the tabs stay on top. They only go low when "display: block !important;" is active, but covers up the bookmark line. Thanks!
Was this helpful to you?
Quote
AnotherDesign 0 solutions 8 answers

If you have added the text below to Userchrome css

Then go to ' open Menu at right of Firefox screen > Customise > and at the bottom left click on ' Title Bar' that for me has sorted the half covering up of the tab bar, which for you might be the Bookmark line


/* required for Firefox 71+ */

  1. TabsToolbar {
position: absolute !important;
bottom: 0 !important;
width: 100vw !important;
display: block !important;

}

If you have added the text below to Userchrome css Then go to ' open Menu at right of Firefox screen > Customise > and at the bottom left click on ' Title Bar' that for me has sorted the half covering up of the tab bar, which for you might be the Bookmark line /* required for Firefox 71+ */ #TabsToolbar { position: absolute !important; bottom: 0 !important; width: 100vw !important; display: block !important; }
Was this helpful to you? 0
Quote
willy6560 0 solutions 5 answers

Thanks for the tip, however, all that unchecking the 'Title Bar' box does is remove the title bar, but has no other effect. I even went as far as removing Chrome from the profile, so FF 71 is loading defaults. Went to about:config, changed the "browser.tabs.onTop" to false (yes, a false hope), but has NO effect, as Mozilla has essentially disabled this feature.

Why can't they leave well enough alone?

Any help would be appreciated.

Thanks

Thanks for the tip, however, all that unchecking the 'Title Bar' box does is remove the title bar, but has no other effect. I even went as far as removing Chrome from the profile, so FF 71 is loading defaults. Went to about:config, changed the "browser.tabs.onTop" to false (yes, a false hope), but has NO effect, as Mozilla has essentially disabled this feature. Why can't they leave well enough alone? Any help would be appreciated. Thanks
Was this helpful to you?
Quote
AnotherDesign 0 solutions 8 answers

Hi, I have an extensive userchrome.css file which has been added to over numerous versions of FF as I have sought to keep tabs on the bottom, Bookmarks in the middle and the address bar at the top. Ideally I would cull stuff in this file but sadly I hardly know what I am doing, .... just solving the latest problem. This time I added the code above posted by cor-el and then ticked ( Not unticked) the title bar on the customise page. I have just done the same on my MacBook Pro and like this morning on Mac Pro it has worked. Why I do not know!, it may well be due to other code in my Userchrome file, or things I altered some time ago in the 'about.config' page. Like you I wish FF would not keep causing tabs to move to the top, or have a simple way of selectingwhere we can have them.

Hi, I have an extensive userchrome.css file which has been added to over numerous versions of FF as I have sought to keep tabs on the bottom, Bookmarks in the middle and the address bar at the top. Ideally I would cull stuff in this file but sadly I hardly know what I am doing, .... just solving the latest problem. This time I added the code above posted by cor-el and then ticked ( Not unticked) the title bar on the customise page. I have just done the same on my MacBook Pro and like this morning on Mac Pro it has worked. Why I do not know!, it may well be due to other code in my Userchrome file, or things I altered some time ago in the 'about.config' page. Like you I wish FF would not keep causing tabs to move to the top, or have a simple way of selectingwhere we can have them.
Was this helpful to you?
Quote
اطرح سؤالا

You must log in to your account to reply to posts. Please start a new question, if you do not have an account yet.