X
Нажмите здесь, чтобы перейти на мобильную версию сайта.

Форум поддержки

change browser tabs location to below bookmarks toolbar

Размещено

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

Выбранное решение

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.

Прочитайте этот ответ в контексте 0

Дополнительные сведения о системе

Приложение

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

Дополнительная информация

cor-el
  • Top 10 Contributor
  • Moderator
17699 решений 160142 ответов
Размещено

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
Размещено

Задавший вопрос

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.
cor-el
  • Top 10 Contributor
  • Moderator
17699 решений 160142 ответов
Размещено

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 ?
Размещено

Задавший вопрос

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;}
Размещено

Задавший вопрос

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.
Размещено

Выбранное решение

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.
cor-el
  • Top 10 Contributor
  • Moderator
17699 решений 160142 ответов
Размещено

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)
Размещено

Задавший вопрос

thanks :)

thanks :)
cor-el
  • Top 10 Contributor
  • Moderator
17699 решений 160142 ответов
Размещено

Полезный ответ

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>
mara1618 0 решений 4 ответов
Размещено

Полезный ответ

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
willy6560 0 решений 6 ответов
Размещено

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!
AnotherDesign 0 решений 9 ответов
Размещено

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; }
willy6560 0 решений 6 ответов
Размещено

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
AnotherDesign 0 решений 9 ответов
Размещено

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.
AnotherDesign 0 решений 9 ответов
Размещено

i have now realised that by activating the title bar the web page is shifted downwards a nuber of pixels which stops the tabs being cut in half horizontally by the web page.

i have now realised that by activating the title bar the web page is shifted downwards a nuber of pixels which stops the tabs being cut in half horizontally by the web page.
jscher2000
  • Top 10 Contributor
8839 решений 72253 ответов
Размещено

Hi willy6560, if you can disentangle the accumulated rules related to the tabs bar while keeping the other ones, try adding a fresh set:

https://www.userchrome.org/what-is-userchrome-css.html#movetabbar

Hi willy6560, if you can disentangle the accumulated rules related to the tabs bar while keeping the other ones, try adding a fresh set: https://www.userchrome.org/what-is-userchrome-css.html#movetabbar
willy6560 0 решений 6 ответов
Размещено

Well, I seemed to have resolved the issue, sort of. Using the original coding suggested by 'cor-el' (display: block), it didn't seem to work. This was placed in 'my_userChrome.css'.

Up until FF71.x, myself, like many others, I have used the 'Custom CSS for Firefox 60+' userChrome/userContent scripts (found on GitHub - https://github.com/aris-t2/customcssforfx with good results. As mentioned, my first attempt didn't work, so I tried various settings within the latest 2.9.0 (and 2.9.2. v2), and still no joy. Just for S&G's, I reverted back to the one of the earlier versions of Custom CSS, ver 2.3.9, and viola, it works again!

I'm running Win7-64 on my desktop, but I'm also running Win10-64 on my laptop with the same results. Tabs on bottom.

Again, this is what works for me. Here's a link to that older version. https://github.com/Aris-t2/CustomCSSforFx/releases/tag/2.3.9

Good luck, and thanks for all the feedback!

Well, I seemed to have resolved the issue, sort of. Using the original coding suggested by 'cor-el' (display: block), it didn't seem to work. This was placed in 'my_userChrome.css'. Up until FF71.x, myself, like many others, I have used the 'Custom CSS for Firefox 60+' userChrome/userContent scripts (found on GitHub - https://github.com/aris-t2/customcssforfx with good results. As mentioned, my first attempt didn't work, so I tried various settings within the latest 2.9.0 (and 2.9.2. v2), and still no joy. Just for S&G's, I reverted back to the one of the earlier versions of Custom CSS, ver 2.3.9, and viola, it works again! I'm running Win7-64 on my desktop, but I'm also running Win10-64 on my laptop with the same results. Tabs on bottom. Again, this is what works for me. Here's a link to that older version. https://github.com/Aris-t2/CustomCSSforFx/releases/tag/2.3.9 Good luck, and thanks for all the feedback!

Изменено willy6560