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

Fóram Tacaíochta

change browser tabs location to below bookmarks toolbar

Postáilte

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

Réiteach roghnaithe

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
Luaigh

Tuilleadh mionsonraí faoin chóras

Feidhmchlár

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

Tuilleadh Eolais

cor-el
  • Top 10 Contributor
  • Moderator
17519 réiteach 158412 freagra

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
An bhfuil an freagra seo cabhrach? 0
Luaigh

Freagra Cabhrach

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.
An bhfuil an freagra seo cabhrach? 1
Luaigh
cor-el
  • Top 10 Contributor
  • Moderator
17519 réiteach 158412 freagra

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 ?
An bhfuil an freagra seo cabhrach?
Luaigh

Úinéir na ceiste

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;}
An bhfuil an freagra seo cabhrach? 0
Luaigh

Úinéir na ceiste

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.
An bhfuil an freagra seo cabhrach?
Luaigh

Réiteach Roghnaithe

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.
An bhfuil an freagra seo cabhrach?
Luaigh
cor-el
  • Top 10 Contributor
  • Moderator
17519 réiteach 158412 freagra

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)
An bhfuil an freagra seo cabhrach? 0
Luaigh

Úinéir na ceiste

thanks :)

thanks :)
An bhfuil an freagra seo cabhrach?
Luaigh
cor-el
  • Top 10 Contributor
  • Moderator
17519 réiteach 158412 freagra

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>
An bhfuil an freagra seo cabhrach?
Luaigh
Cuir ceist

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