How to get a multirow bookmarks toolbar in Firefox 74?
Hi,
Today I installed the new Firefox 74 but now my multirow bookmarks toolbar is not working correct anymore. They are not side by side, they are now among one another. See attached screen, ca. 75% of the screen is used by the bookmarks.
The following code is contained in my userChrome.css file:
/* Multi-Row Bookmarks Toolbar Firefox 66+ */
#PersonalToolbar {
min-height: unset !important;
max-height: unset !important;
/* text-align: center !important; */
}
#PersonalToolbar #PlacesToolbarItems {
overflow-x: visible !important;
overflow-y: visible !important;
display: inline-block !important;
}
#PlacesToolbarItems > .bookmark-item > .toolbarbutton-icon[label]:not([label=""]) {
/* Reduce padding on individual bookmarks to fit rows closer together */
margin-inline-end: 0px !important;
}
Does anybody have a solution for this?
PS: If you need more info, please ask...
Best regards heusmich
Modified by cor-el
All Replies (20)
Chosen Solution
Try this code:
Modified by cor-el
Modified by heusmich
Why don't they just build this feature in so users don't have to keep trying to figure it out when they decide to come out with yet another update?
Tried this code here, not working.
Modified by FF_Help_user
cor-el said
Try this code:
I was having the same problem after upgrading to 74 and this fixed it, thanks.
I installed the new Firefox 74 yesterday and about one out of 4 times new Firefox updates hose my Bookmark Toolbar - badly! This is the 4th time now! Took me about 2 hours of splicing other CSS files together to get the new version 74 to work! I didn't write the code but I did modify and splice 4 pieces of code together. I really like the outcome!
Here is the solution. This makes the bookmark icons span multiple rows and wraps the icons, it removes the icon text, has hover readability for the icons, and it rounds the square tabs and also puts them at the bottom. I think everybody will like this one!
.tabbrowser-tab {
box-sizing: border-box;
margin: 0 1px 0 1px !important;
border-radius: 5px 5px 0 0 !important;
}
.tabbrowser-tab .tab-text.tab-label {
color: black !important; /* tab text color - customizable */
}
.tabbrowser-tab[selected="true"] .tab-text.tab-label {
color: black !important; /* tab text color - customizable */
}
.tabbrowser-tab[selected="true"] .tab-background {
border: 1px solid gray !important; /* color is customizable */
border-bottom: none !important;
opacity: 1;
}
#tabbrowser-tabs {
min-height: unset !important;
padding-inline-start: 0px !important;
}
.tab-background {
border: none !important;
border-radius: 5px 5px 0 0 !important;
background: black;
opacity: .1;
}
.tab-line { /* = light top line in selected tab in Quantum default */
display: none !important;
}
.tabbrowser-tab:hover,
.tabbrowser-tab .tab-text.tab-label:hover {
cursor: pointer !important;
}
.tabbrowser-tab:hover {
border: 1px solid grey !important;
}
.tabbrowser-tab[selected="true"]:hover {
border: none !important;
}
[tabsintitlebar]:root:not([extradragspace]) .tabbrowser-tab::after,
.tabbrowser-tab:hover::after,
#tabbrowser-tabs:not([movingtab])>.tabbrowser-tab[beforehovered]::after {
border: none !important; /* leave as is; affects the New Tab icon (the plus) */
}
/* BOOKMARK ICON COLORIZATION */
#bookmarks-view treechildren::-moz-tree-image(container),
#PlacesToolbarItems toolbarbutton[container="true"] .toolbarbutton-icon,
#PlacesToolbarItems menu[container="true"] .menu-iconic-left,
#BMB_bookmarksPopup menu[container="true"] .menu-iconic-icon,
#bookmarksMenu menu[container="true"] .menu-iconic-icon {
fill: #FFCC00 !important; /* orange; customizable */
margin-right: 8px; /* correction for the Firefox default imperfection */
}
/* ADDRESS BAR ICONS CLEAN-UP */
#pageActionSeparator, #pocket-button, #pageActionButton {
display: none !important; /* customizable: delete if you want the objects back */
}
/* 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 {
display: block !important;
position: absolute !important;
bottom: 0 !important;
width: 100vw !important;
}
#main-window:not([chromehidden*="toolbar"]) #navigator-toolbox {
padding-bottom: var(--tab-min-height) !important;
}
#tabbrowser-tabs {
width: 100vw !important;
}
#TabsToolbar #window-controls {
display: none !important;
}
/*
To show the text of a bookmark, hover the bookmark
at least a quarter second (250 milliseconds).
Once shown on hover, they remain for 2 seconds
after hover ends before collapsing out again.
*/
toolbarbutton.bookmark-item .toolbarbutton-text {
visibility: collapse !important;
opacity: 0 !important;
transition: all 250ms 2s ease-in-out !important;
}
toolbarbutton.bookmark-item:hover .toolbarbutton-text {
visibility: visible !important;
opacity: 1 !important;
transition: all 250ms 250ms ease-in-out !important;
}
/* Makes bookmarks toolbar span multiple rows */
#PersonalToolbar{
--multirow-bmb-n-rows: 3; /* 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) 2px !important; }
#personal-bookmarks .bookmark-item > .toolbarbutton-text { display:none !important; }
Modified by cor-el
FF_Help_user said
Why don't they just build this feature in so users don't have to keep trying to figure it out when they decide to come out with yet another update? Tried this code here, not working.
Got it working, it finally took with this code:
/* Makes bookmarks toolbar span multiple rows */
#PersonalToolbar{
--multirow-bmb-n-rows: 3; /* 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; }
Modified by cor-el
I don't know, it is getting more than frustrating using Firefox when they don't think these changes though. I preferred the older Firefox because of it's plugins, but now you have to modify it through the CSS file. And I'm not a programmer, I just know enough to figure it out with some difficulty, and by cutting and pasting code pieces I always fix it. Still this fix took me two hours!
Modified by mjs50
Hi,
Today I installed the new Firefox 74 but now my multirow bookmarks toolbar is not working correct anymore. They are not side by side, they are now among one another. See attached screen, ca. 75% of the screen is used by the bookmarks.
Same problem. I went back to Firefox 73. I will try the code(s) posted with my current userChrome.css file but do not have much faith.
I've set Firefox 73 to NOT automatically update but there seems to be no way to stop the popup update nag. I'm afraid I'll click the update option by accident.
Any suggestions to kill the popup?
Use this userChrome.css file and it should fix version 74.
.tabbrowser-tab {
box-sizing: border-box;
margin: 0 1px 0 1px !important;
border-radius: 5px 5px 0 0 !important;
}
.tabbrowser-tab .tab-text.tab-label {
color: black !important; /* tab text color - customizable */
}
.tabbrowser-tab[selected="true"] .tab-text.tab-label {
color: black !important; /* tab text color - customizable */
}
.tabbrowser-tab[selected="true"] .tab-background {
border: 1px solid gray !important; /* color is customizable */
border-bottom: none !important;
opacity: 1;
}
#tabbrowser-tabs {
min-height: unset !important;
padding-inline-start: 0px !important;
}
.tab-background {
border: none !important;
border-radius: 5px 5px 0 0 !important;
background: black;
opacity: .1;
}
.tab-line { /* = light top line in selected tab in Quantum default */
display: none !important;
}
.tabbrowser-tab:hover,
.tabbrowser-tab .tab-text.tab-label:hover {
cursor: pointer !important;
}
.tabbrowser-tab:hover {
border: 1px solid grey !important;
}
.tabbrowser-tab[selected="true"]:hover {
border: none !important;
}
[tabsintitlebar]:root:not([extradragspace]) .tabbrowser-tab::after,
.tabbrowser-tab:hover::after,
#tabbrowser-tabs:not([movingtab])>.tabbrowser-tab[beforehovered]::after {
border: none !important; /* leave as is; affects the New Tab icon (the plus) */
}
/* BOOKMARK ICON COLORIZATION */
#bookmarks-view treechildren::-moz-tree-image(container),
#PlacesToolbarItems toolbarbutton[container="true"] .toolbarbutton-icon,
#PlacesToolbarItems menu[container="true"] .menu-iconic-left,
#BMB_bookmarksPopup menu[container="true"] .menu-iconic-icon,
#bookmarksMenu menu[container="true"] .menu-iconic-icon {
fill: #FFCC00 !important; /* orange; customizable */
margin-right: 8px; /* correction for the Firefox default imperfection */
}
/* ADDRESS BAR ICONS CLEAN-UP */
#pageActionSeparator, #pocket-button, #pageActionButton {
display: none !important; /* customizable: delete if you want the objects back */
}
/* 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 {
display: block !important;
position: absolute !important;
bottom: 0 !important;
width: 100vw !important;
}
#main-window:not([chromehidden*="toolbar"]) #navigator-toolbox {
padding-bottom: var(--tab-min-height) !important;
}
#tabbrowser-tabs {
width: 100vw !important;
}
#TabsToolbar #window-controls {
display: none !important;
}
/* at least a quarter second (250 milliseconds).
Once shown on hover, they remain for 2 seconds
after hover ends before collapsing out again.
*/
toolbarbutton.bookmark-item .toolbarbutton-text {
visibility: collapse !important;
opacity: 0 !important;
transition: all 250ms 2s ease-in-out !important;
}
toolbarbutton.bookmark-item:hover .toolbarbutton-text {
visibility: visible !important;
opacity: 1 !important;
transition: all 250ms 250ms ease-in-out !important;
}
/* Makes bookmarks toolbar span multiple rows */
#PersonalToolbar{
--multirow-bmb-n-rows: 3; /* 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,3px))))) !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) 2px !important; }
#personal-bookmarks .bookmark-item > .toolbarbutton-text { display:none !important; }
/* Curve the background tabs at the upper left and right corners
May not work on add-on themes. */
.tabbrowser-tab {
border-radius: 10px 10px 0px 0px / 15px 15px 0px 0px !important;
}
/* Curve active tab and slightly overlap neighboring tabs */
.tabbrowser-tab .tab-background[selected="true"] {
margin-left: -1px !important;
margin-right: -1px !important;
border-radius: 10px 10px 0px 0px / 15px 15px 0px 0px !important;
}
/* Shorten the tab line along the tops of tabs */
.tab-line {
margin-left: 9px !important;
margin-right: 9px !important;
}
/* Shorten the vertical lines between background tabs */
.tabbrowser-tab::before, .tabbrowser-tab::after {
margin-top: 9px !important;
}
/** "Light" Theme (Dark Text) **/
/* Border the background tabs (10% gray) for greater visibility */
#main-window:not([lwthemetextcolor="bright"]) .tabbrowser-tab:not([selected="true"]) {
border: 1px solid rgba(0,0,0,.1) !important;
border-bottom-color: transparent !important;
margin-right: -1px !important;
}
/* Remove short vertical lines between background tabs */
#main-window:not([lwthemetextcolor="bright"]) .tabbrowser-tab::before,
#main-window:not([lwthemetextcolor="bright"]) .tabbrowser-tab::after {
border: none !important;
}
Modified by cor-el
Did not work
Restored Firefox 73.
Hi AIVAS
Did you try this CSS code in Firefox 74?
If you have other code in userChrome.css then try with a fresh userChrome.css with only this code.
Spent 2 days trying to get Firefox 74 to display the way I had in Firefox 73 (and before). Made many experimental changes to userchrome.css with very poor results.
Finally, I reverted to Firefox 73 and I am happy...with one problem:
Firefox's continuing nags to update (now to Firefox 75.
I want a simple solution to STOP these nags!
Does not work in Firefox 76!
I'm using that script on 76.0.1 and it is working for me just fine.
mjs50 said
I'm using that script on 76.0.1 and it is working for me just fine.
Wondering why its not working in my browser Win10 and FF 76.0.1 both 64-bit! Used same code you provided but no luck unfortunately.
I hate that Firefox keeps changing the browser and I only keep using it because of the ability to use plug-ins and scripts. I'm not really much of a software guy but I know how to copy and paste script pieces together. I've been using this same script for at least the last 3 Firefox updates and it actually fixes three things I hate about the default Firefox. Perhaps your problem is copy and pasting my script into a text file and the way things are set up here is confusing as hell? I see no way to attach an actual text file on this site. I can send you the actual script text file in an email if you want to send me a private message. It's worth a try. Let me know?
You can upload the file to a website like Pastebin if you can't post the content of the file in a reply.
I created an account there but it doesn't save it for me. Try this link? https://pastebin.com/saCb9r3J
Modified by mjs50
Hi mjs50
I notice a comment section that lacks the opening '/*' comment tag (underlined below) that will prevent the following code from working.
/* at least a quarter second (250 milliseconds). Once shown on hover, they remain for 2 seconds after hover ends before collapsing out again. */
I see Windows 10 is mentioned above. Could it be that it does not work with Windows 8.1 (64-bit)?
I am still looking for an answer to:
Finally, I reverted to Firefox 73 and I am happy...with one problem:
Firefox's continuing nags to update (now to Firefox 75.
I want a simple solution to STOP these nags!