Reposition Tabs at bottom, directly above web page in Firefox 65.0? -- for Windows 10 - not for MacOSX
Can anyone supply updated code for the userChrome.css for restoring Tabs to below Menu bar, Location bar, and Personal Toolbar? The code below was working until I upgraded to 65.0.
/* tabs on bottom */
- navigator-toolbox toolbar:not(#nav-bar):not(#toolbar-menubar) {-moz-box-ordinal-group:10}
- TabsToolbar {-moz-box-ordinal-group:1000!important}
Thank you for the help.
edited the title of this thread to include Windows 10 as the operating system the OP posted from
Moambuepyre the-edmeister rupive
Ñemoĩporã poravopyre
EDIT: I've updated the code to work with recent Firefox builds (tested with Fx 65-71).
You can adjust the two --tab-min-height definition under the Height section to suit your needs (default:33px; compact:29px; touch:43px). There are a few more variables that may need adjustment.
Add code to the userChrome.css file below the default @namespace line.
- http://kb.mozillazine.org/userChrome.css
- https://www.userchrome.org/how-create-userchrome-css.html
- https://www.userchrome.org/what-is-userchrome-css.html
@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
/* TABS: bottom - Firefox 65 and newer; should for now work again with XUL @namespace */
#navigator-toolbox toolbar:not(#nav-bar):not(#toolbar-menubar) {
-moz-box-ordinal-group: 10 !important;
}
#TabsToolbar {
-moz-box-ordinal-group: 1000 !important;
display: block !important;
position: absolute !important;
bottom: 0 !important;
width: 100vw !important;
}
#tabbrowser-tabs {
width: 100vw !important;
}
*|*:root:not([chromehidden*="toolbar"]) #navigator-toolbox {
padding-bottom: calc(var(--tab-min-height) + 1px) !important; /*adjust*/
}
/* position Tab bar with Menu bar and Title bar hidden for Firefox 65-73 - omit in Firefox 74 (Nightly) */
*|*:root[tabsintitlebar]:not([inFullscreen="true"]):not([sizemode="maximized"])
#toolbar-menubar[autohide="true"] ~ #xTabsToolbar{
bottom: var(--tab-min-height) !important;
padding-top: calc(var(--tab-min-height) - 20px) !important; /*adjust*/
}
/* TABS: height */
*|*:root {
--tab-toolbar-navbar-overlap: 0px !important;
--tab-min-height: 25px !important; /*adjust to set height or omit to use density*/
--tab-min-width: 80px !important; /*adjust to set width or omit to use default*/
}
#TabsToolbar {
height: var(--tab-min-height) !important;
margin-bottom: 1px !important; /*adjust*/
box-shadow: ThreeDShadow 0 -1px inset, -moz-dialog 0 1px !important; /*omit*/
background-color: var(--toolbar-bgcolor) !important;
color: var(--toolbar-color) !important;
}
/* indicators - hide */
.private-browsing-indicator {display: none !important;}
.accessibility-indicator {display: none !important;}
/* window controls hide*/
#TabsToolbar #window-controls {display: none !important;}
/* caption buttons - hide */
*|*:root[tabsintitlebar]:not([inFullscreen="true"])
#toolbar-menubar[autohide="true"] ~ #TabsToolbar
.titlebar-buttonbox-container {display: none !important;}
If you want to have the caption buttons visible on the Tab bar with the Menu bar and Title bar hidden then use this code as a start to replace the above posted "caption buttons - hide" rule. The caption button are positioned absolutely via a top property, so this is affected by the Bookmarks Toolbar (PersonalToolbar) being visible or hidden. Use either of the two --personal-toolbar-height settings that apply to the state (collapsed/hidden) of the Bookmarks Toolbar.
/* caption buttons - PersonalToolbar hidden/visible */
*|*:root {--personal-toolbar-height: 0px !important} /*PersonalToolbar collapsed*/
*|*:root {--personal-toolbar-height: 24px !important} /*PersonalToolbar visible*/
*|*:root {--caption-buttons-adjust: -12px !important} /*caption buttons - adjustment*/
*|*:root[tabsintitlebar]:not([inFullscreen="true"]) #toolbar-menubar[autohide="true"]
~ #TabsToolbar .titlebar-buttonbox-container {
position: fixed !important;
display: block !important;
right: 0 !important;
top: calc(var(--tab-min-height) + var(--personal-toolbar-height) + var(--caption-buttons-adjust));
visibility: visible !important;
height: var(--tab-min-height) !important;
}
/* Caption Buttons - HEIGHT */
.titlebar-buttonbox-container toolbarbutton {
height: var(--tab-min-height) !important;
margin: 0px -5px 0px -5px !important; /*adjust margin-left and margin-right*/
padding: 0 !important;
}
/* Caption Buttons - PADDING */
*|*:root[tabsintitlebar]:not([inFullscreen="true"])
#toolbar-menubar[autohide="true"] ~
#TabsToolbar {
padding-right: 100px !important; /*adjust*/
}
Emoñe’ẽ ko mbohavái ejeregua reheve
👍 12
Opaite Mbohovái (3)
malaus1 said
I had copied ALL the first solution text from this site & pasted into Notepad. This brought the first line as well as the scroll bars into play. Once I only copied the text...
It would be great if this site had a better "copy code" process. Because of the way the code box works, not only is code sometimes parsed poorly for display, but it can be tough to copy the correct text, as you discovered.
I am glad that you are almost where you want to be.
I believe that Firefox 65 has finally broken the ColorfulTabs add-on. You could try playing with the CSS in userChrome.css ( :-) ) following the example in this thread.
Yep, Colorful Tabs just can't keep up with the changes (nor can I for that matter). Thanks for the suggestion but I have no idea how to put that code into the existing one. Tried just dropping it in about halfway down but made no difference. I'm not smart enough to understand what the code is doing but thanks again.
Asked and answered for the OP and marked as solved.
Since this thread is veered off-topic and beyond the scope of the original topic I am locking this thread due to its length.
Please ask a new question for additional help for this topic or similar topics about "tabs", or any other topic.