This site will have limited functionality while we undergo maintenance to improve your experience. If an article doesn't solve your issue and you want to ask a question, we have our support community waiting to help you at @FirefoxSupport on Twitter and/r/firefox on Reddit.

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

How to get a multirow bookmarks toolbar in Firefox 74?

  • 73 replies
  • 7 have this problem
  • 1 view
  • Last reply by jppp

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
Attached screenshots

Modified by cor-el

All Replies (13)

more options

If you quote a reply that has an external link then you should remove these links to prevent the reply getting placed in the moderator queue for approval (I notice three such attempts).


It is not that difficult to create userChrome.css if you have never used it.

The first step is to open the "Help -> Troubleshooting Information" page and find the button to access the profile folder.

You can find this button under the "Application Basics" section as "Profile Folder -> Open Folder".
If you click this button then you open the profile folder in the Windows File Explorer.
You need to create a folder with the name chrome in this folder (name is all lowercase).
In the chrome folder you need to create a plain text file with the name userChrome.css (name is case sensitive).
In this userChrome.css text file you paste the text posted.


In Windows saving the file is usually the only time things get more complicated because Windows can silently add a .txt file extension and you end up with a file named userChrome.css.txt.
To avoid this you need to make sure to select "All files" in the dialog to save the file in the text editor using "Save File as".

You need to close (Quit/Exit) and restart Firefox when you create or modify the userChrome.css file.

See also:

In Firefox 69 and later you need to set this pref to true on the about:config page to enable userChrome.css and userContent.css in the chrome folder.

  • toolkit.legacyUserProfileCustomizations.stylesheets = true

See:

more options
more options
more options

I've done all of this.

link text link text link text

more options

I've done all of the above. I've tried to attach links to screenshots to show so maybe someone can figure out something I've missed that I don't see but my posts don't show up if have a links in them.

more options

Okay, so I've tried a different userChrome.css content and this one does seem to 'work', accept it doesn't do what I want. It basically just gives me only one tab at a random place. This is the one posted by mjs50.

At least I know this process does work, now to find something that does what I want; multirow tabs.

more options

Try this modification of mjs50's code.

.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: yellow !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;
}


/* Move Find Bar above the page - I added 07-17-2020 */
.browserContainer > findbar {
  -moz-box-ordinal-group: 0;
}

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

/* --> Remarked out to return Bookmarks names 07-17-2020 --> #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

more options

Note that for the multi-row bookmarks toolbar you only need this code, the remainder is about extras that you may or may not want/need.

/* 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

more options

I tried cor-el's .css but that doesn't make a visible difference from having no .css

edit: unless I'm mistaking this is the same as the suggestion at the top of this thread form MrOtherGuy, which already didn't do anything for me.

Modified by iluvatar1979

more options

I also tried AIVAS' idea but that only results in my tab titles becoming bold and blurry, no multi-rows.

more options

That code still works for me in Firefox 78.

Did you try this code in userChrome.css with only this code ?

more options

I just pasted it into a textfile, renamed it userChrome.css and that's it.

more options

cor-el's code is working fine on 79.0, thank you so much for preserving my sanity <3

Modified by jppp

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