X
Tryk her for at gå til webstedets mobilversion.

Supportforum

change browser tabs location to below bookmarks toolbar

Skrevet

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

Valgt løsning

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.

Læs dette svar i sammenhæng 0
Citér

Yderligere systemdetaljer

Program

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

Yderligere information

Luk
cor-el
  • Top 10 Contributor
  • Moderator
17567 løsninger 158896 svar

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
Fandt du dette nyttigt? 0
Citér

Nyttigt svar

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.
Fandt du dette nyttigt? 1
Citér
cor-el
  • Top 10 Contributor
  • Moderator
17567 løsninger 158896 svar

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 ?
Fandt du dette nyttigt?
Citér

Spørgsmålsstiller

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;}
Fandt du dette nyttigt? 0
Citér

Spørgsmålsstiller

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.
Fandt du dette nyttigt?
Citér

Valgt løsning

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.
Fandt du dette nyttigt?
Citér
cor-el
  • Top 10 Contributor
  • Moderator
17567 løsninger 158896 svar

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)
Fandt du dette nyttigt? 0
Citér

Spørgsmålsstiller

thanks :)

thanks :)
Fandt du dette nyttigt?
Citér
cor-el
  • Top 10 Contributor
  • Moderator
17567 løsninger 158896 svar

Nyttigt svar

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>
Fandt du dette nyttigt? 4
Citér
mara1618 0 løsninger 4 svar

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
Fandt du dette nyttigt? 1
Citér
willy6560 0 løsninger 5 svar

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!
Fandt du dette nyttigt?
Citér
AnotherDesign 0 løsninger 8 svar

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; }
Fandt du dette nyttigt? 0
Citér
willy6560 0 løsninger 5 svar

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
Fandt du dette nyttigt?
Citér
AnotherDesign 0 løsninger 8 svar

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.
Fandt du dette nyttigt?
Citér
Stil et spørgsmål

Du skal logge ind på din konto for at svare på et indlæg. Start et nyt spørgsmål, hvis du ikke har en konto endnu.