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
17530 個解決方法 158511 個答案

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
這篇文章有幫助嗎? 0
引用

有幫助的回覆

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.
這篇文章有幫助嗎? 1
引用
cor-el
  • Top 10 Contributor
  • Moderator
17530 個解決方法 158511 個答案

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;}
這篇文章有幫助嗎? 0
引用

提出問題者

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
17530 個解決方法 158511 個答案

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)
這篇文章有幫助嗎? 0
引用

提出問題者

thanks :)

thanks :)
這篇文章有幫助嗎?
引用
cor-el
  • Top 10 Contributor
  • Moderator
17530 個解決方法 158511 個答案

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>
這篇文章有幫助嗎?
引用
問個問題

如果您還沒有帳號,您必須先 登入您的帳號 來回覆文章。請 開始一個新問題