How to (re)position the tab bar under the address bar in Firefox 89?
Solved
fredbxlbe2021
Posted messages
9
Status
Member
-
Bene -
Bene -
Hello,
I was successfully using the modification of the userchrome.css file until this new version of Firefox.
The tab bar has become almost invisible, so I searched for what was blocking it, and I believe it's the line "position: absolute !important;" in #TabsToolbar.
By removing it, I restore my usual environment (visible and well-calibrated tab bar) except that it has moved back between the menu bar and the address bar....
Any ideas on how to move it back under the personal toolbar (which was the original goal)?
Note: this all concerns Firefox 89, restricted by setting the first four lines of the "Proton" search in about:config to (False).
Thank you for any suggestions and have a great weekend ;-)
Fred
I was successfully using the modification of the userchrome.css file until this new version of Firefox.
The tab bar has become almost invisible, so I searched for what was blocking it, and I believe it's the line "position: absolute !important;" in #TabsToolbar.
By removing it, I restore my usual environment (visible and well-calibrated tab bar) except that it has moved back between the menu bar and the address bar....
Any ideas on how to move it back under the personal toolbar (which was the original goal)?
Note: this all concerns Firefox 89, restricted by setting the first four lines of the "Proton" search in about:config to (False).
Thank you for any suggestions and have a great weekend ;-)
Fred
17 answers
-
Hi.
Yes, we can put the famous bar back under the address bar.
Personally, I prefer, in this order:
- Having the address bar at the top
- Then having the personal bar.
- Then having the tab bar.
Like this:
If the interface suits you:
you need to change a preference in about:config
-> Open Firefox, type about:config, and search with: legacy
-> Locate the following line: toolkit.legacyUserProfileCustomizations.stylesheets
-> Change it to true, by clicking the button or double-clicking
Then, check if the extensions are visible:
-> Open any folder
-> In the menu, tab view: check the box Filename extensions
Then:
-> Open Firefox
-> menu > Help > More troubleshooting information
-> Then, locate Profile Folder > Then click Open Folder
-> Once the folder is open, create a chrome folder. If it already exists, back up its contents, so that the folder is empty.
-> Then create a file named: userChrome.txt and open it
-> Put this in that file: https://pastebin.com/28RyCx6E
-> Save the file and close it.
-> Rename userChrome.txt to userChrome.css
Note:Thank you for the suggestion but I still prefer the tab bar a bit too high and keeping the rest of my previous layout (menu + size, highlight and font of the tabs).
In that case, adjust the userChrome file to your liking.
++
As a wise man once told me: "In France, we have the right to do everything....
Just have to not get caught." -
@fabul : re
Try this, in your userChrome
https://pastebin.com/xYnBdfWd
++
--
As a wise person told me: "In France, we have the right to do anything...
Just make sure not to get caught."-
That one seems to work, I found it on Reddit but I just tested it, I'm copying it here:
/* Fichier source https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/tabs_on_bottom.css mis à disposition sous la Mozilla Public License v. 2.0 Voir le dépôt ci-dessus pour des mises à jour ainsi que le texte de licence complet. */ /* Modifier pour changer la largeur de l'espace de glissement de la fenêtre */ /* Utilisez tabs_on_bottom_menubar_on_top_patch.css si vous avez la barre de menus toujours activée et souhaitez la placer en haut */ /* IMPORTANT */ /* Obtenez window_control_placeholder_support.css Les contrôles de fenêtre seront tous incorrects sans cela. De plus, sur Linux, vous pouvez avoir besoin d'obtenir : linux_gtk_window_control_patch.css */ :root{ --uc-titlebar-padding: 0px; } @media (-moz-os-version: windows-win10){ :root[sizemode="maximized"][tabsintitlebar]{ --uc-titlebar-padding: 8px } } #toolbar-menubar[autohide="true"] > .titlebar-buttonbox-container, #TabsToolbar > .titlebar-buttonbox-container{ position: fixed; display: block; top: var(--uc-titlebar-padding,0px); right:0; height: 40px; } /* Spécifique à Mac. Vous devriez définir cette préférence de lissage des polices sur vrai si vous êtes sur une plateforme où les contrôles de fenêtre sont à gauche */ @supports -moz-bool-pref("layout.css.osx-font-smoothing.enabled"){ :root{ --uc-titlebar-padding: 0px !important } .titlebar-buttonbox-container{ left:0; right: unset !important; } } :root[uidensity="compact"] #TabsToolbar > .titlebar-buttonbox-container{ height: 32px } #toolbar-menubar[inactive] > .titlebar-buttonbox-container{ opacity: 0 } #navigator-toolbox{ padding-top: var(--uc-titlebar-padding,0px) !important; } .titlebar-buttonbox-container > .titlebar-buttonbox{ height: 100%; } #titlebar{ -moz-box-ordinal-group: 2; -moz-appearance: none !important; --tabs-navbar-shadow-size: 0px; } .titlebar-placeholder, #TabsToolbar .titlebar-spacer{ display: none; } /* Masquer également la bordure inférieure de la boîte à outils qui n'est pas en bas avec cette configuration */ #navigator-toolbox::after{ display: none !important; } @media (-moz-gtk-csd-close-button){ .titlebar-button{ -moz-box-orient: vertical } } /* Ceux-ci existent uniquement pour la compatibilité avec autohide-tabstoolbar.css */ toolbox#navigator-toolbox > toolbar#nav-bar.browser-toolbar{ animation: none; } #navigator-toolbox:hover #TabsToolbar{ animation: slidein ease-out 48ms 1 } /* Fichier source https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/tabs_on_bottom_menubar_on_top_patch.css mis à disposition sous la Mozilla Public License v. 2.0 Voir le dépôt ci-dessus pour des mises à jour ainsi que le texte de licence complet. */ /* Patch de barre de menus en haut - utiliser avec tabs_on_bottom.css */ /* Vraiment utile seulement si la barre de menus est TOUJOURS visible */ :root{ --uc-window-control-width: 0px !important } #navigator-toolbox{ padding-top: calc(29px + var(--uc-titlebar-padding,0px)) !important } #toolbar-menubar{ position: fixed; display: flex; top: var(--uc-titlebar-padding,0px); height: 29px; width: 100%; overflow: hidden; } #toolbar-menubar > .titlebar-buttonbox-container{ height: 29px; order: 100; } #toolbar-menubar > [flex]{ flex-grow: 100; } #toolbar-menubar > spacer[flex]{ order: 99; flex-grow: 1; min-width: var(--uc-window-drag-space-width,20px); } #toolbar-menubar .titlebar-button{ padding: 2px 17px !important; } #toolbar-menubar .toolbarbutton-1 { --toolbarbutton-inner-padding: 3px } /* ONGLETS : hauteur */*|*:root { --tab-toolbar-navbar-overlap: 0px !important; --tab-min-height: 25px !important; --tab-min-width: 80px !important; #tabbrowser-tabs { width: 100vw !important; } #main-window:not([chromehidden*="toolbar"]) #navigator-toolbox {padding-bottom: var(--tab-min-height) !important;} .tab-background { border-radius: 8px 8px 0px 0px !important; border-image: none !important; } .tab-line { display: none; } .tab-close-button { color: red!important; }- We tested the same source I think ;)
https://www.reddit.com/r/FirefoxCSS/comments/nq2d0q/tabs_on_bottom_for_firefox_89/
++
-
-
Do you have this one?
And copied below
https://forums.commentcamarche.net/forum/affich-37239970-comment-re-mettre-la-barre-d-onglets-sous-la-barre-d-adresse-de-firefox89#7 -
Hello,
I also struggled to set up FIREFOX my way. I don't know CSS.
Below is "my FIREFOX" after adding data to USERCHROME.css
I still have a small issue.
The Menu bar (File, Edit, ...) is placed at the very top of the line... I would like to center it to make it more visible.
Example with different colors
I am sharing my USERCHROME.CSS data.
Bookmark bar on multiple lines
/* 1-BOOKMARKS TAB multiple rows - bookmark bar on multiple lines */
#PersonalToolbar{
--multirow-bmb-n-rows: 5; /* Number of rows for the bookmark bar modifiable */
--multirow-bmb-row-margin: 50px; /* Controls the space between the lines */
max-height: none !important;
}
#PlacesToolbar > hbox{
display: block;
width: 100vw;
}
#PlacesToolbarItems{
display: flex;
flex-wrap: wrap;
/* --uc-bm-padding is defined in autohide_bookmarks_toolbar.css */
max-height: calc(var(--multirow-bmb-n-rows) * (5px + 1em + (2 * (var(--multirow-bmb-row-margin) + var(--uc-bm-padding,3px))))) !important;
overflow-y:auto;
scrollbar-color: var(--lwt-accent-color) var(--toolbar-bgcolor) ;
scrollbar-width: thin;
font-size: 18px !important; /* Font height modifiable */
font-style: italic; /* Font format modifiable */
font-family:calibri ; /* Font family modifiable */
}
Color of folders in the bookmark bar
/* 2-Color of bookmark folders--- */
/*
Colored folders for Bookmarks Menus, Bookmarks Sidebar, Bookmarks Toolbar, Library window, Add/Edit Bookmarks dialog
Substitutes a Firefox 57-style folder icon for the new wireframe folder icon- //* Standard folder -- on Toolbar and Menus */#PlacesToolbarItems toolbarbutton[container="true"]:not([query="true"]) .toolbarbutton-icon,:-moz-any(#PlacesToolbarItems,#PlacesChevronPopup,#BMB_bookmarksPopup,#bookmarksMenu,#OtherBookmarksPopup) menu[container="true"]:not([query="true"]) > .menu-iconic-left > .menu-iconic-icon,/* Standard folder -- in Sidebar, Library, Add/Edit Bookmark dialog */:-moz-any(#bookmarks-view, #editBMPanel_folderTree, #placesList, #placeContent) treechildren::-moz-tree-image(container), #editBMPanel_folderMenuList > .menulist-label-box > .menulist-icon,#editBMPanel_folderMenuList menupopup menuitem, #editBMPanel_folderMenuList { fill: #e8bb00 !important; /* Color of folders modifiable */ /* Specify icon for Firefox 89 Proton (base 64 conversion from old SVG with gold color) */ list-style-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0iI2U4YmIwMCIgZmlsbC1vcGFjaXR5PSJjb250ZXh0LWZpbGwtb3BhY2l0eSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICA8cGF0aCBkPSJNMTQuNSAzSDYuOTE0YS41LjUgMCAwIDEtLjM1NC0uMTQ2TDUuMTQ2IDEuNDM5QTEuNDkxIDEuNDkxIDAgMCAwIDQuMDg2IDFIMS41QTEuNSAxLjUgMCAwIDAgMCAyLjV2MTFBMS41IDEuNSAwIDAgMCAxLjUgMTVoMTNhMS41IDEuNSAwIDAgMCAxLjUtMS41di05QTEuNSAxLjUgMCAwIDAgMTQuNSAzem0uNSAxMC41YS41LjUgMCAwIDEtLjUuNWgtMTNhLjUuNSAwIDAgMS0uNS0uNVY2aDE0ek0xIDVWMi41YS41LjUgMCAwIDEgLjUtLjVoMi41ODZhLjUuNSAwIDAgMSAuMzU0LjE0NmwxLjQxNCAxLjQxNUExLjQ5MSAxLjQ5MSAwIDAgMCA2LjkxNCA0SDE0LjVhLjUuNSAwIDAgMSAuNS41VjV6Ii8+CiAgPHBhdGggZD0iTTE1IDEzLjVhLjUuNSAwIDAgMS0uNS41aC0xM2EuNS41IDAgMCAxLS41LS41VjZoMTR6IiBmaWxsLW9wYWNpdHk9Ii4yIi8+CiAgPHBhdGggZD0iTTEgNVYyLjVhLjUuNSAwIDAgMSAuNS0uNWgyLjU4NmEuNS41IDAgMCAxIC4zNTQuMTQ2bDEuNDE0IDEuNDE1QTEuNDkxIDEuNDkxIDAgMCAwIDYuOTE0IDRIMTQuNWEuNS41IDAgMCAxIC41LjVWNXoiIGZpbGwtb3BhY2l0eT0iLjEiLz4KICA8cGF0aCBkPSJNMTUgMTMuNWEuNS41IDAgMCAxLS41LjVoLTEzYS41LjUgMCAwIDEtLjUtLjVWMTNoMTR6IiBmaWxsLW9wYWNpdHk9Ii4wNSIvPgo8L3N2Zz4=") !important;}/* Smart bookmark folder -- on Toolbar and Menus */#PlacesToolbarItems toolbarbutton[container="true"][query="true"] .toolbarbutton-icon,:-moz-any(#PlacesToolbarItems,#PlacesChevronPopup,#BMB_bookmarksPopup,#bookmarksMenu,#OtherBookmarksPopup) menu[container="true"][query="true"] > .menu-iconic-left > .menu-iconic-icon,/* Smart bookmark folder -- in Sidebar, Library, Add/Edit Bookmark dialog */:-moz-any(#bookmarks-view, #editBMPanel_folderTree, #placesList, #placeContent) treechildren::-moz-tree-image(container, query) { /* Specify icon for Firefox 89 Proton to override basic folder */ list-style-image: url("chrome://browser/skin/places/folder-smart.svg") !important; fill: #69c !important; /* similar to blue smart folder color */}/*** Top-level "container" icons (otherwise would be Standard folder color) ***//* Bookmarks Menu -- in Sidebar, Library, Add/Edit Bookmark dialog */:-moz-any(#bookmarks-view, #editBMPanel_folderTree, #placesList, #placeContent) treechildren::-moz-tree-image(container, OrganizerQuery_BookmarksMenu),:-moz-any(#bookmarks-view, #editBMPanel_folderTree, #placesList, #placeContent) treechildren::-moz-tree-image(container, queryFolder_menu________),#editBMPanel_bmRootItem > .menu-iconic-left, #editBMPanel_folderMenuList[selectedIndex="1"] > .menulist-label-box > .menulist-icon, #editBMPanel_folderMenuList[selectedGuid="menu________"] { /* Specify icon for Firefox 89 Proton to override basic folder */ list-style-image: url("chrome://browser/skin/places/bookmarksMenu.svg") !important; fill: olive !important;}/* Bookmarks Toolbar -- on Menus */#BMB_bookmarksPopup #BMB_bookmarksToolbar > .menu-iconic-left > .menu-iconic-icon,#bookmarksMenuPopup #bookmarksToolbarFolderMenu > .menu-iconic-left > .menu-iconic-icon,/* Bookmarks Toolbar -- in Sidebar, Library, Add/Edit Bookmark dialog */:-moz-any(#bookmarks-view, #editBMPanel_folderTree, #placesList, #placeContent) treechildren::-moz-tree-image(container, OrganizerQuery_BookmarksToolbar),:-moz-any(#bookmarks-view, #editBMPanel_folderTree, #placesList, #placeContent) treechildren::-moz-tree-image(container, queryFolder_toolbar_____),#editBMPanel_toolbarFolderItem > .menu-iconic-left, #editBMPanel_folderMenuList[selectedIndex="0"] > .menulist-label-box > .menulist-icon, #editBMPanel_folderMenuList[selectedGuid="toolbar_____"] { /* Specify icon for Firefox 89 Proton to override basic folder */ list-style-image: url("chrome://browser/skin/places/bookmarksToolbar.svg") !important; fill: olive !important;}/* Other Bookmarks -- on Menus */#BMB_bookmarksPopup #BMB_unsortedBookmarks > .menu-iconic-left > .menu-iconic-icon,#bookmarksMenuPopup #menu_unsortedBookmarks > .menu-iconic-left > .menu-iconic-icon,/* Other Bookmarks -- in Sidebar, Library, Add/Edit Bookmark dialog */:-moz-any(#bookmarks-view, #editBMPanel_folderTree, #placesList, #placeContent) treechildren::-moz-tree-image(container, OrganizerQuery_UnfiledBookmarks),:-moz-any(#bookmarks-view, #editBMPanel_folderTree, #placesList, #placeContent) treechildren::-moz-tree-image(container, queryFolder_unfiled_____),#editBMPanel_unfiledRootItem > .menu-iconic-left, #editBMPanel_folderMenuList[selectedIndex="2"] > .menulist-label-box > .menulist-icon, #editBMPanel_folderMenuList[selectedGuid="unfiled_____"],#OtherBookmarksPopup + .toolbarbutton-icon { /* Specify icon for Firefox 89 Proton (base 64 conversion from old SVG with olive color) */ list-style-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ib2xpdmUiIGZpbGwtb3BhY2l0eT0iY29udGV4dC1maWxsLW9wYWNpdHkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPHBhdGggZmlsbC1vcGFjaXR5PSIuMDUiIGQ9Ik0xMi43LDFIMy4zbC0uMi42TC4xLDksMCw5LjJWMTNhMi4wMDYsMi4wMDYsMCwwLDAsMiwySDE0YTIuMDA2LDIuMDA2LDAsMCwwLDItMlY5LjJMMTUuOSw5bC0zLTcuNEwxMi43LDFaIi8+CiAgPHBhdGggZD0iTTEyLDJsMyw3LjRWMTNhLjk0NS45NDUsMCwwLDEtMSwxSDJhLjk0NS45NDUsMCwwLDEtMS0xVjkuNEw0LDJoOG0uNy0xSDMuM0wuMSw5LjEsMCw5LjJWMTNhMi4wMDYsMi4wMDYsMCwwLDAsMiwySDE0YTIuMDA2LDIuMDA2LDAsMCwwLDItMlY5LjJMMTUuOSw5LDEyLjcsMVoiLz4KICA8cGF0aCBmaWxsLW9wYWNpdHk9Ii4wNSIgZD0iTTE0Ljk4OCw5LDEyLDJINEwuODUxLDlINS4wMjNBMi45MzEsMi45MzEsMCwwLDAsOCwxMS42LDIuODg5LDIuODg5LDAsMCwwLDExLjAxMiw5WiIvPgogIDxwYXRoIGQ9Ik0xMCw5QTIsMiwwLDAsMSw2LDlIMHYxSDUuMTg0YTIuOTgzLDIuOTgzLDAsMCwwLDUuNjMzLDBIMTZWOVoiLz4KPC9zdmc+") !important;}/* (Older Firefox) Avoid overriding classic Bookmarks Toolbar and Other Bookmarks icons in menus */#BMB_bookmarksPopup #BMB_bookmarksToolbar.menu-iconic-icon, #bookmarksMenu #bookmarksToolbarFolderMenu.menu-iconic-icon { list-style-image: url("chrome://browser/skin/places/bookmarksToolbar.png") !important;}#BMB_bookmarksPopup #BMB_unsortedBookmarks.menu-iconic-icon, #bookmarksMenu #menu_unsortedBookmarks.menu-iconic-icon { /* Specify icon for Firefox 89 Proton (base 64 conversion from old SVG with olive color) */ list-style-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ib2xpdmUiIGZpbGwtb3BhY2l0eT0iY29udGV4dC1maWxsLW9wYWNpdHkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPHBhdGggZmlsbC1vcGFjaXR5PSIuMDUiIGQ9Ik0xMi43LDFIMy4zbC0uMi42TC4xLDksMCw5LjJWMTNhMi4wMDYsMi4wMDYsMCwwLDAsMiwySDE0YTIuMDA2LDIuMDA2LDAsMCwwLDItMlY5LjJMMTUuOSw5bC0zLTcuNEwxMi43LDFaIi8+CiAgPHBhdGggZD0iTTEyLDJsMyw3LjRWMTNhLjk0NS45NDUsMCwwLDEtMSwxSDJhLjk0NS45NDUsMCwwLDEtMS0xVjkuNEw0LDJoOG0uNy0xSDMuM0wuMSw5LjEsMCw5LjJWMTNhMi4wMDYsMi4wMDYsMCwwLDAsMiwySDE0YTIuMDA2LDIuMDA2LDAsMCwwLDItMlY5LjJMMTUuOSw5LDEyLjcsMVoiLz4KICA8cGF0aCBmaWxsLW9wYWNpdHk9Ii4wNSIgZD0iTTE0Ljk4OCw5LDEyLDJINEwuODUxLDlINS4wMjNBMi45MzEsMi45MzEsMCwwLDAsOCwxMS42LDIuODg5LDIuODg5LDAsMCwwLDExLjAxMiw5WiIvPgogIDxwYXRoIGQ9Ik0xMCw5QTIsMiwwLDAsMSw2LDlIMHYxSDUuMTg0YTIuOTgzLDIuOTgzLDAsMCwwLDUuNjMzLDBIMTZWOVoiLz4KPC9zdmc+") !important;}
Tabs bar below
/* 3-Tabs bar below */
@supports -moz-bool-pref("layout.css.osx-font-smoothing.enabled"){
:root{ --uc-titlebar-padding: 0px !important }
.titlebar-buttonbox-container{ left:0; right: unset !important; }}
:root[uidensity="compact"] #TabsToolbar > .titlebar-buttonbox-container{ height: 32px }
#toolbar-menubar[inactive] > .titlebar-buttonbox-container{ opacity: 0 }
#navigator-toolbox{ padding-top: var(--uc-titlebar-padding,0px) !important; }
.titlebar-buttonbox-container > .titlebar-buttonbox{ height: 100%; }
#titlebar{-moz-box-ordinal-group: 2;-moz-appearance: none !important;--tabs-navbar-shadow-size: 0px;}
.titlebar-placeholder,
#TabsToolbar .titlebar-spacer{ display: none; }
/* Also hide the toolbox bottom border which isn't at bottom with this setup */
#navigator-toolbox::after{ display: none !important; }
@media (-moz-gtk-csd-close-button){ .titlebar-button{ -moz-box-orient: vertical } }
/* These exist only for compatibility with autohide-tabstoolbar.css */
toolbox#navigator-toolbox > toolbar#nav-bar.browser-toolbar{ animation: none; }
#navigator-toolbox:hover #TabsToolbar{ animation: slidein ease-out 48ms 1 }
Tab color
/* 4-Color TABS - tab color */
tab {
font-size: 15px !important; /* Font height modifiable */
font-family: Arial !important;} /* Font family modifiable */
/* Use color and shape to make the tabs look more like tabs */
.tab-background {
background: #dbdbdb ; /* Background color modifiable */
border-radius: 0px 20px 0 0 !important;
margin-bottom: 0px !important;
box-shadow: 0 0 2px 2px rgba(0,0,0,0.1) !important;
border: 1px solid rgba(255,0,0,.5) !important;
border-bottom-width: 0px !important;
}
/* Selected tabs I want a bright background with a dark foreground */
.tabbrowser-tab[selected] .tab-background {
background: #ffffff !important; /* Background color modifiable */
}
.tabbrowser-tab[selected] .tab-label {
color: red !important; /* Foreground color modifiable */
font-weight: normal !important;}
/* Draw a solid line underneath to make the selected tab look *connected* to the rest of the browser */
#TabsToolbar {
border-bottom: 5px solid #ff0000 !important; /* Background color modifiable */
}
/* Hover over tabs */
.tabbrowser-tab:hover .tab-background:not([selected]) {
background: #afedaf !important; /* Background color modifiable */
}
Menu bar at the top
/* 5-Menu bar at the top - use with tabs_on_bottom.css */
/* Menubar on top patch - use with tabs_on_bottom.css */
/* Only really useful if menubar is ALWAYS visible */
:root:not([sizemode="fullscreen"]){ --uc-window-control-width: 0px !important }
:root{
/* height if native titlebar is enabled, assumes empty menubar */
--uc-menubar-height: 20px;
}
:root[tabsintitlebar]{
/* height when native titlebar is disabled, more roomy so can fit buttons etc. */
--uc-menubar-height: 29px;
}
#navigator-toolbox{ padding-top: calc(var(--uc-menubar-height) + var(--uc-titlebar-padding,0px)) !important }
:root[sizemode="fullscreen"] #navigator-toolbox{ padding-top: 0px !important; }
#toolbar-menubar{
position: fixed;
display: flex;
top: var(--uc-titlebar-padding,0px);
height: var(--uc-menubar-height);
width: 100%;
overflow: hidden;
}
#toolbar-menubar > .titlebar-buttonbox-container{ height: 100%; order: 100; }
#toolbar-menubar > [flex]{ flex-grow: 100; }
#toolbar-menubar > spacer[flex]{
order: 99;
flex-grow: 1;
min-width: var(--uc-window-drag-space-width,20px);
}
#toolbar-menubar .titlebar-button{ padding: 2px 17px !important; }
#toolbar-menubar .toolbarbutton-1 { --toolbarbutton-inner-padding: 3px }
NB. I made changes in ABOUT:CONFIG
To disable Proton:
---------------------------
browser.proton.contextmenus.enabled = false
browser.proton.doorhangers.enabled = false
browser.proton.enabled = false
browser.proton.modals.enabled = false
To reactivate compact mode (disappeared with Proton):
--------------------------------------------------------------
browser.compactmode.show = true
browser.uidensity = 1 (0 = Normal, 2 = Touch).
To reactivate userChrome.css which is sometimes disabled by Firefox during a new version:
-----------------------------------------------------------------------------------------------------------
toolkit.legacyUserProfileCustomizations.stylesheets = true
Philippe -
Good evening everyone,
I'm not well-versed in CSS, but I've compiled various proposed solutions based on some of the codes from BRABRA62400, reworked with snippets of code used before '89 (for dimensions and colors of tabs, lettering, etc.) and I'm satisfied. Purists may find some contradictory or redundant lines, but it works for me... so I'm sharing my userchrome.css
/* 3-Tab bars below */
@supports -moz-bool-pref("layout.css.osx-font-smoothing.enabled"){
:root{ --uc-titlebar-padding: 0px !important }
.titlebar-buttonbox-container{ left:0; right: unset !important; }}
:root[uidensity="compact"] #TabsToolbar > .titlebar-buttonbox-container{ height: 32px }
#toolbar-menubar[inactive] > .titlebar-buttonbox-container{ opacity: 0 }
#navigator-toolbox{ padding-top: var(--uc-titlebar-padding,0px) !important; }
.titlebar-buttonbox-container > .titlebar-buttonbox{ height: 100%; }
#titlebar{-moz-box-ordinal-group: 2;-moz-appearance: none !important;--tabs-navbar-shadow-size: 0px;}
.titlebar-placeholder,
#TabsToolbar .titlebar-spacer{ display: none; }
/* Also hide the toolbox bottom border which isn't at bottom with this setup */
#navigator-toolbox::after{ display: none !important; }
@media (-moz-gtk-csd-close-button){ .titlebar-button{ -moz-box-orient: vertical } }
/* These exist only for compatibility with autohide-tabstoolbar.css */
toolbox#navigator-toolbox > toolbar#nav-bar.browser-toolbar{ animation: none; }
#navigator-toolbox:hover #TabsToolbar{ animation: slidein ease-out 48ms 1 }
/* 5-Menu bar at the top - use with tabs_on_bottom.css */
/* Menubar on top patch - use with tabs_on_bottom.css */
/* Only really useful if menubar is ALWAYS visible */
:root:not([sizemode="fullscreen"]){ --uc-window-control-width: 0px !important }
:root{
/* height if native titlebar is enabled, assumes empty menubar */
--uc-menubar-height: 20px;
}
:root[tabsintitlebar]{
/* height when native titlebar is disabled, more roomy so can fit buttons etc. */
--uc-menubar-height: 29px;
}
#navigator-toolbox{ padding-top: calc(var(--uc-menubar-height) + var(--uc-titlebar-padding,0px)) !important }
:root[sizemode="fullscreen"] #navigator-toolbox{ padding-top: 0px !important; }
#toolbar-menubar{
position: fixed;
display: flex;
top: var(--uc-titlebar-padding,0px);
height: var(--uc-menubar-height);
width: 100%;
overflow: hidden;
}
#toolbar-menubar > .titlebar-buttonbox-container{ height: 100%; order: 100; }
#toolbar-menubar > [flex]{ flex-grow: 100; }
#toolbar-menubar > spacer[flex]{
order: 99;
flex-grow: 1;
min-width: var(--uc-window-drag-space-width,20px);
}
#toolbar-menubar .titlebar-button{ padding: 2px 17px !important; }
#toolbar-menubar .toolbarbutton-1 { --toolbarbutton-inner-padding: 3px }
/* Tab width */
.tabbrowser-tab:not([pinned]) {
max-width: 150px !important; min-width: 30px !important; }
.tabbrowser-tab:not([fadein]) {
max-width: 1px !important; min-width: 1px !important; }
.tab-background[selected="true"] {
background-attachment: none!important;
background-color: red!important;
background-image: none!important;
}
/* Make menus big, pretty and readable */
menubar, menubutton, menulist, menu, menuitem {
font-size: 16px !important
}
#TabsToolbar {
width: 100vw !important;
font-size: 18px !important;
} -
-
Hello, thank you, I really like using your "userChrome" and I wanted to ask you:
1-if it is possible to reduce the gap between the tab bar and the personal bar (see my attached screenshot)
2-if we can modify the height of the tab boxes.
3-and if we can either change the color of the red line at the bottom or remove it (I find it too flashy).
I tried to modify your "userChrome" file with Notepad++, but when I saw all the information in it, I was afraid of making a mistake (or worse ^_^) so I preferred to contact you.
Thanks again.- To remove the red line under the tabs, you need to modify the line
/* Draw a solid line underneath to make the selected tab look *connected* to the rest of the browser */
#TabsToolbar {
border-bottom: 5px solid #ff0000 !important; /* Modifiable background color */
}
replace border-bottom: 5px
with border-bottom: 0px
for the color, you need to replace the color reference #ff0000 with another one.
-
-
That said, I would like to further refine my interface (and learn a bit more about CSS :-).....)
1) In both window sizes (see next point), I would like to refine my address bar;
2) My menu bar is perfectly sized when my window is in intermediate size (even stretched to 100%), but it narrows (too much) when I switch to "maximized" window;
Could one of you let me know if these parameters are addressed in the above CSS (previous message); otherwise, the codes to adjust them?
Thank you in advance.
F. -
Hello,
Without the menu bar, it's doable: https://forums.commentcamarche.net/forum/affich-37238875-liste-marques-pages-firefox-89#8
but if, like fabul, you use the menu bar???
--
a foreigner is a friend we haven't met yet. -
Thanks for the suggestion, but I still prefer the tab bar a tad too high and to keep the rest of my previous layout (menu + size, highlight, and font of the tabs).
I guess in a few weeks a new userchrome.css tweak will be available to sort all this out.
See you.
F. -
Thank you little boy62 for your contribution and for the almost complete tutorial ;-)
It works for me (menu then address then personal bar then tab bar) except that like fabul, the entire tab bar is 50% covered by the main window (except for the active tab which goes above the main window)....
I couldn't attach a screenshot to my message....(jpg or png).
F.-
At home with the userChrome.css that I copied last, it looks like this:
https://img-19.ccm2.net/YOqb6hHWAlygT_BvDWfN9gbn-PY=/696254c6c4c542528c6663cdf73d92fb/ccm-ugc/Capture.JPG
-
-
Hello, I have the same issue as fredbxlbe2021, with the tab bar hidden at 50% and a separation between my personal bar and my tab bar (which is unnecessary; if possible, I would like to reduce it).
Fabul, in the screenshot you shared, I see that you only have one tab open, and when fredbxlbe2021 and I say that the tabs are hidden at 50% and the opened tabs are secondary, the main tab is displayed at 100%.
If anyone has a solution, I am interested, thank you.
Honestly, why are the Mozilla programmers always removing useful features for everyone to limit our choices? It was the same mess back in the day for version 56 (if I remember the number correctly). -
September 12, 2021
Hello,
Once again, the issue with the tab bar needing to be moved back to the bottom with FF 92 (I didn't pay attention and the update happened..). I spent the morning looking for a working "css," and if anyone needs it, I can post it on the forum.. -
A purist will certainly find some inconsistencies, but it works:
/* 3-Tab bars below */
@supports -moz-bool-pref("layout.css.osx-font-smoothing.enabled"){
:root{ --uc-titlebar-padding: 0px !important }
.titlebar-buttonbox-container{ left:0; right: unset !important; }}
:root[uidensity="compact"] #TabsToolbar > .titlebar-buttonbox-container{ height: 32px }
#toolbar-menubar[inactive] > .titlebar-buttonbox-container{ opacity: 0 }
#navigator-toolbox{ padding-top: var(--uc-titlebar-padding,0px) !important; }
.titlebar-buttonbox-container > .titlebar-buttonbox{ height: 100%; }
#titlebar{-moz-box-ordinal-group: 2;-moz-appearance: none !important;--tabs-navbar-shadow-size: 0px;}
.titlebar-placeholder,
#TabsToolbar .titlebar-spacer{ display: none; }
/* Also hide the toolbox bottom border which isn't at bottom with this setup */
#navigator-toolbox::after{ display: none !important; }
@media (-moz-gtk-csd-close-button){ .titlebar-button{ -moz-box-orient: vertical } }
/* These exist only for compatibility with autohide-tabstoolbar.css */
toolbox#navigator-toolbox > toolbar#nav-bar.browser-toolbar{ animation: none; }
#navigator-toolbox:hover #TabsToolbar{ animation: slidein ease-out 48ms 1 }
/* Only really useful if menubar is ALWAYS visible */
:root:not([sizemode="fullscreen"]){ --uc-window-control-width: 0px !important }
:root{
/* height if native titlebar is enabled, assumes empty menubar */
--uc-menubar-height: 20px;
}
:root[tabsintitlebar]{
/* height when native titlebar is disabled, more roomy so can fit buttons etc. */
--uc-menubar-height: 29px;
}
#navigator-toolbox{ padding-top: calc(var(--uc-menubar-height) + var(--uc-titlebar-padding,0px)) !important }
:root[sizemode="fullscreen"] #navigator-toolbox{ padding-top: 0px !important; }
#toolbar-menubar{
position: fixed;
display: flex;
top: var(--uc-titlebar-padding,0px);
height: var(--uc-menubar-height);
width: 100%;
overflow: hidden;
}
#toolbar-menubar > .titlebar-buttonbox-container{ height: 100%; order: 100; }
#toolbar-menubar > [flex]{ flex-grow: 100; }
#toolbar-menubar > spacer[flex]{
order: 99;
flex-grow: 1;
min-width: var(--uc-window-drag-space-width,20px);
}
#toolbar-menubar .titlebar-button{ padding: 2px 17px !important; }
#toolbar-menubar .toolbarbutton-1 { --toolbarbutton-inner-padding: 3px }
/* Tab width */
.tabbrowser-tab:not([pinned]) {
max-width: 150px !important; min-width: 30px !important; }
.tabbrowser-tab:not([fadein]) {
max-width: 1px !important; min-width: 1px !important; }
.tab-background[selected="true"] {
background-attachment: none!important;
background-color: red!important;
background-image: none!important;
}
/* Make menus big, pretty and readable */
menubar, menubutton, menulist, menu, menuitem {
font-size: 18px !important
}
#TabsToolbar {
width: 100vw !important;
font-size: 18px !important;
}
/*** Tighten up drop-down/context/popup menu spacing ***/
menupopup > menuitem, menupopup > menu {
padding-block: 0px !important;
}
:root {
--arrowpanel-menuitem-padding: 0px 0px !important;
}-
Good evening Fred..2021,
I just tested your CSS and I'm going back to mine (windows shorter and no red color in a tab, but useful if we want to learn how to modify a color),
For your information, my CSS comes from https://support.mozilla.org/en-US/questions/1339095?page=2 found this morning while surfing the net: "FF92 Tabs toolbar on bottom" ..
-
-
Good evening fredbxlbe2021,
so I put the 'mine' which works very well, I just modified tab-min-height in * root at the beginning and changed it from 40 to 30px.
----------------------------------------------------
@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
/* TABS: bottom - Firefox 65 and later - updated for 89+ */
/* https://searchfox.org/mozilla-release/source/browser/themes/shared/tabs.inc.css */
/* https://github.com/Aris-t2/CustomCSSforFx/blob/master/classic/css/tabs/tabs_below_navigation_toolbar_fx89.css */
/* https://developer.mozilla.org/en-US/docs/Tools/Browser_Toolbox */
/* ROOT - VARS */
/* you can adjust the CSS variables until it looks correct */- |*:root {
--tab-toolbar-navbar-overlap: 0px !important;
--tab-min-height: 30px !important;/* original file 40 */
--tab-min-width: 60px !important;
--tab-adjust: 0px; /* adjust tab bar - only for 68-73 */
--tab-caption: 5px; /* caption buttons on tab bar */
}
/* TAB BAR - below nav-bar */
#navigator-toolbox toolbar:not(#nav-bar):not(#toolbar-menubar) {-moz-box-ordinal-group:10 !important;}
#TabsToolbar {-moz-box-ordinal-group:1000 !important;}
#TabsToolbar {
display: block !important;
position: absolute !important;
bottom: 0 !important;
width: 100vw !important;
}
#tabbrowser-tabs {
width: 100vw !important;
}
/* navigator-toolbox - PADDING */- |*:root:not([chromehidden*="toolbar"]) #navigator-toolbox {
position: relative !important; /*89+*/
padding-bottom: calc(var(--tab-min-height) + 1px) !important; /*ADJUST*/
background-color: var(--toolbar-bgcolor) !important;
}
/* TabsToolbar with menubar and titlebar hidden - rules for Firefox 65-73 */- |*:root[tabsintitlebar]:not([inFullscreen="true"]):not([sizemode="maximized"]) #toolbar-menubar[autohide="true"] ~
#TabsToolbar{
bottom: var(--tab-adjust); /*ADJUST*/
}
/* TABS: height */
#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;
}
#TabsToolbar {
height: var(--tab-min-height) !important;
margin-bottom: 1px !important;
box-shadow: ThreeDShadow 0 -1px inset, -moz-dialog 0 1px !important; /*OPTIONAL*/
background-color: var(--toolbar-bgcolor) !important;
color: var(--toolbar-color) !important;
}
/* indicators *//*- |*:root[privatebrowsingmode=temporary] .private-browsing-indicator {
position: absolute !important;
display: block !important;
right: 0px !important;
bottom: 0px !important;
width: 14px !important;
pointer-events: none !important;
}- /
.private-browsing-indicator {display: none !important;}
.accessibility-indicator {display: none !important;}
/* Indicators - HIDE *//*- |*:root:not([accessibilitymode]) .accessibility-indicator {display: none !important}
- |*:root:not([privatebrowsingmode=temporary]) .private-browsing-indicator {display: none !important}
- /
/* Drag Space */
.titlebar-spacer[type="pre-tabs"],
.titlebar-spacer[type="post-tabs"] {
width: 20px !important;
}
/* 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 window-controls and caption buttons on Tab Bar */
#TabsToolbar #window-controls {display: none !important;}
#TabsToolbar .titlebar-buttonbox-container {display: none !important;}
------------------------------------
P.S.: I will test your version tomorrow (fred..2021)..- Good evening everyone following this new version of FF 92... **
-
Hello,
You no longer need the line ==►@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");at the beginning of your userchrome file.
The XUL namespace is no longer relevant.
The Fabul file I commend works with Firefox version 92.
If you have other .css codes, place your tab CSS code at the end of the userchrome file.
Check the support for userChrome.css in Firefox
It’s in this practical guide on CCM.
See you!- Hi Pistouri,
I haven't tested mine yet with version 92, but to have the Compact mode, I had to also put the compact on top, it looks like this:
/*** Tighten up drop-down/context/popup menu spacing ***/ menupopup > menuitem, menupopup > menu { padding-block: 2px !important; } :root { --arrowpanel-menuitem-padding: 2px 2px !important; } /* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/tabs_on_bottom.css made available under Mozilla Public License v. 2.0 See the above repository for updates as well as full license text. */ /* Modify to change window drag space width */ /* Use tabs_on_bottom_menubar_on_top_patch.css if you have menubar permanently enabled and want it on top */ /* IMPORTANT */ /* Get window_control_placeholder_support.css Window controls will be all wrong without it. Additionally on Linux, you may need to get: linux_gtk_window_control_patch.css */ :root{ --uc-titlebar-padding: 0px; } @media (-moz-os-version: windows-win10){ :root[sizemode="maximized"][tabsintitlebar]{ --uc-titlebar-padding: 8px } } #toolbar-menubar[autohide="true"] > .titlebar-buttonbox-container, #TabsToolbar > .titlebar-buttonbox-container{ position: fixed; display: block; top: var(--uc-titlebar-padding,0px); right:0; height: 40px; } /* Mac specific. You should set that font-smoothing pref to true if you are on any platform where window controls are on left */ @supports -moz-bool-pref("layout.css.osx-font-smoothing.enabled"){ :root{ --uc-titlebar-padding: 0px !important } .titlebar-buttonbox-container{ left:0; right: unset !important; } } :root[uidensity="compact"] #TabsToolbar > .titlebar-buttonbox-container{ height: 32px } #toolbar-menubar[inactive] > .titlebar-buttonbox-container{ opacity: 0 } #navigator-toolbox{ padding-top: var(--uc-titlebar-padding,0px) !important; } .titlebar-buttonbox-container > .titlebar-buttonbox{ height: 100%; } #titlebar{ -moz-box-ordinal-group: 2; -moz-appearance: none !important; --tabs-navbar-shadow-size: 0px; } .titlebar-placeholder, #TabsToolbar .titlebar-spacer{ display: none; } /* Also hide the toolbox bottom border which isn't at bottom with this setup */ #navigator-toolbox::after{ display: none !important; } @media (-moz-gtk-csd-close-button){ .titlebar-button{ -moz-box-orient: vertical } } /* These exist only for compatibility with autohide-tabstoolbar.css */ toolbox#navigator-toolbox > toolbar#nav-bar.browser-toolbar{ animation: none; } #navigator-toolbox:hover #TabsToolbar{ animation: slidein ease-out 48ms 1 } /* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/tabs_on_bottom_menubar_on_top_patch.css made available under Mozilla Public License v. 2.0 See the above repository for updates as well as full license text. */ /* Menubar on top patch - use with tabs_on_bottom.css */ /* Only really useful if menubar is ALWAYS visible */ :root{ --uc-window-control-width: 0px !important } #navigator-toolbox{ padding-top: calc(29px + var(--uc-titlebar-padding,0px)) !important } #toolbar-menubar{ position: fixed; display: flex; top: var(--uc-titlebar-padding,0px); height: 29px; width: 100%; overflow: hidden; } #toolbar-menubar > .titlebar-buttonbox-container{ height: 29px; order: 100; } #toolbar-menubar > [flex]{ flex-grow: 100; } #toolbar-menubar > spacer[flex]{ order: 99; flex-grow: 1; min-width: var(--uc-window-drag-space-width,20px); } #toolbar-menubar .titlebar-button{ padding: 2px 17px !important; } #toolbar-menubar .toolbarbutton-1 { --toolbarbutton-inner-padding: 3px } /* TABS: height */*|*:root { --tab-toolbar-navbar-overlap: 0px !important; --tab-min-height: 25px !important; --tab-min-width: 80px !important; #tabbrowser-tabs { width: 100vw !important; } #main-window:not([chromehidden*="toolbar"]) #navigator-toolbox {padding-bottom: var(--tab-min-height) !important;} .tab-background { border-radius: 8px 8px 0px 0px !important; border-image: none !important; } .tab-line { display: none; } .tab-close-button { color: red!important; }
-
Hello,
I'm testing the Fabul version tomorrow,
and congratulations to the forum for this reactivation after three months of calm..
See you! -
pistouri Posted messages 19010 Registration date Status Contributor Last intervention Ambassador 8 732
Hi Pomlj,
CCM Forum (tabs under the address bar of Firefox)
After the calm, the storm or vice versa :-)
Is there another one planned for FF93?
If needed, copy and paste the lines from this userchrome file ==► Tabs under Firefox address bar 92
In Fabul's userchrome file, he added at the end, because at the beginning he has:
/*** Tighten up drop-down/context/popup menu spacing ***/
menupopup > menuitem, menupopup > menu {
padding-block: 2px !important;
}
:root {
--arrowpanel-menuitem-padding: 2px 2px !important;
}
This code is to reduce the spacing of Bookmarks.
Good luck.
See you later.
-
Thank you Pistouri,
I think I'm going to need a good week to analyze it, maybe more..
I hadn't noticed a spacing in the bookmarks yet..
Thanks again for this code..
See you..
