We're calling on all EU-based Mozillians with iOS or iPadOS devices to help us monitor Apple’s new browser choice screens. Join the effort to hold Big Tech to account!

Avatar for Username

Search Support

Avoid support scams. We will never ask you to call or text a phone number or share personal information. Please report suspicious activity using the “Report Abuse” option.

Learn More

Le thread ibilondoloziwe. Nceda ubuze umbuzo omtsha ukuba ufuna uncedo.

How to get a multirow bookmarks toolbar in Firefox 74?

  • 73 iimpendulo
  • 7 inale ngxaki
  • 1 view
  • Impendulo yokugqibela ngu jppp

heusmich
heusmich
more options

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

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: <pre><nowiki> /* 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; } </nowiki></pre> Does anybody have a solution for this? PS: If you need more info, please ask... Best regards heusmich
Iqhotyoshelwe imifanekiso ekwisikrini

Ilungisiwe ngu cor-el

Isisombulu esikhethiweyo

Try this code:

Funda le mpendulo kwimeko leyo 👍 4

All Replies (20)

cor-el
cor-el
  • Moderator
  • Top 10 Contributor
more options

Isisombululo esiKhethiweyo

Try this code:

Ilungisiwe ngu cor-el

heusmich
heusmich Umnini wombuzo
more options

cor-el said

Try this code:

Thank you very much for the fast help. It´s working!

Ilungisiwe ngu heusmich

FF_Help_user
FF_Help_user
more options

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.

Ilungisiwe ngu FF_Help_user

Jawzaa
Jawzaa
more options

cor-el said

Try this code:

I was having the same problem after upgrading to 74 and this fixed it, thanks.

mjs50
mjs50
more options

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; }

Ilungisiwe ngu cor-el

FF_Help_user
FF_Help_user
more options

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;  }

Ilungisiwe ngu cor-el

mjs50
mjs50
more options

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!

Ilungisiwe ngu mjs50

AIVAS
AIVAS
more options

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?

mjs50
mjs50
more options

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;
}

Ilungisiwe ngu cor-el

AIVAS
AIVAS
more options

Did not work

Restored Firefox 73.

cor-el
cor-el
  • Moderator
  • Top 10 Contributor
more options

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.

AIVAS
AIVAS
more options

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!

Sandip
Sandip
more options

Does not work in Firefox 76!

mjs50
mjs50
more options

I'm using that script on 76.0.1 and it is working for me just fine.

Sandip
Sandip
more options

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.

mjs50
mjs50
more options

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?

cor-el
cor-el
  • Moderator
  • Top 10 Contributor
more options

You can upload the file to a website like Pastebin if you can't post the content of the file in a reply.

mjs50
mjs50
more options

I created an account there but it doesn't save it for me. Try this link? https://pastebin.com/saCb9r3J

Ilungisiwe ngu mjs50

cor-el
cor-el
  • Moderator
  • Top 10 Contributor
more options

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.
*/
AIVAS
AIVAS
more options

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!

  1. 1
  2. 2
  3. 3
  4. 4