- Open about:config and set toolkit.legacyUserProfileCustomizations.stylesheets to true.
- Open a new tab on about:support and click the button next to "Profile Folder"
- Go to the "chrome" directory at the profile folder, or create it if it doesn't exist.
- Create a file named "userChrome.css" (if it doesn't exist) and open it in a text editor.
- Copy the css code from below
- Paste it into userChrome.css and save.
- Restart Firefox
#PersonalToolbar{
--multirow-bmb-n-rows: 5; / Control how many rows are shown before scrolling /
--multirow-bmb-row-margin: 2px; / Control how much spacing is between rows /
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,2px))))) !important;
overflow-y:auto;
scrollbar-color: var(--lwt-accent-color) var(--toolbar-bgcolor) ;
scrollbar-width: thin;
}
/ Hide the all-bookmarks button /
#PlacesChevron{ display: none }
/ Add some spacing between rows /
#PlacesToolbarItems > .bookmark-item{ margin: var(--multirow-bmb-row-margin) 3px !important; }
2022. fix
@namespace url("https://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); /* only needed once */
/* Multi-Row Bookmarks Toolbar */
#PersonalToolbar {
/* Override max-height */
min-height: unset !important;
max-height: unset !important;
}
#PersonalToolbar #PlacesToolbarItems {
/* Override hiding */
overflow-x: visible !important;
overflow-y: visible !important;
display: inline-block !important;
padding-bottom: 1px;
}
#PersonalToolbar #PlacesToolbarItems .bookmark-item {
/* Reduce padding to fit rows closer together */
padding-top: 1px !important;
padding-bottom: 1px !important;
}
One of the important steps you need to take is to go to Firefox's configuration folder by typing "about:support" in Firefox's address bar and pressing Enter. Then, in the "Configuration" section, you will see the path to Firefox's configuration folder.
The purpose of the CSS code you supplied is to make the bookmarks toolbar more personalized and to add more rows of bookmarks. If you're seeking a tab-related solution, you might want to consider exploring other CSS codes or extensions that cater to multi-row tabs.
This guide provides a step-by-step process to enable multi-row tabs in Firefox 83 using the userChrome.css file. By following these instructions, you can customize Firefox to display multiple rows of tabs, enhancing your browsing experience.