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)
I've tried many solutions but haven't found one that provides 1) Menu bar on top, followed by 2) the URL/Bookmarks bar AND 3) scroll-able multi-row tabs. Would also like to have no text on the Tab icons. I'm using Windows 10, 64-bit with Firefox 76.0.1 64-bit .
I appreciate any assistance.
Modified by Jeffrey
Been trying for months to "restore" this functionality. No dice. Posts keep repeating files that do not work and FF keeps issuing updates (that in the past has made the problem worse).
Lately I've been looking at the new Chrome Edge. It is still in that "new" phase but, hopefully, it will do better than FF has done recently.
Good luck.
Here is proof my script works on Firefox 76.01, Windows 10 64bit. I've taken a screen shot of my multi-row bookmarks, tabs at the bottom, and rounded tabs too! Yes, it does it all in this script! You must create a folder called chrome in Firefox like below, and then put the userChome script in that folder.
Here is my path to userChrome.css but yours will be slightly different due to your computers name. MJS and xgh2s736.default-1563217141943 will be different in your path.
c:\Users\MJS\AppData\Roaming\Mozilla\Firefox\Profiles\xgh2s736.default-1563217141943\chrome\userChrome.css
Modified by mjs50
Hi Jeffrey, if you are new to userChrome.css, there is an internal setting you also need to switch so Firefox will look for the file at startup. You can look at this article for more setup details (allow 10-15 minutes the first time):
Willing to give it a try. How about posting the full userChrome.css?
If you post your current userChrome.css and also detail about its location then we can check out if something is wrong.
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:
- https://www.userchrome.org/what-is-userchrome-css.html
- https://www.userchrome.org/how-create-userchrome-css.html
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:
I don't like the way scripts are displayed on this site, very confusing! I wish we could just paste the complete css file without all the reply boxes. I posted the entire file on Pastbin.com. See if you can get to it there? Just copy and save it as "userChrome.css", without the quotes. https://pastebin.com/saCb9r3J
Modified by mjs50
OK. Your userChrome.css file does wrap the bookmark toolbar, however what happened to the bookmark names and descriptive icons?
Image attached.
Otherwise: Instead of "orange" file folder icons, I used to have icons associated to the link or, at least, the folder name (e.g. "Newspaper", "TV", "AccuW", etc).
I chose not to display the text because it takes up too much space. For some people, it will take a little bit of time to get used to it. But it still displays the text by hovering your mouse cursor over the icon, so displaying double the text is a redundant action. After a few days you will know what site each icon is anyway, and if you forget, just hover over it. I chose this form because I use a lot of links, and wanted to display as many icons as I could per row, while still not making my Firefox full screen. I frequently wrap to 3 rows, and at least 40 icons per row, but normally I'm using only two rows. I noticed that you can only display 16 icons per row because you like the see the text displayed by each icon too. That is a chronic waste of space for me. You can also experiment with the size of the icons - if you want to modify the program yourself? And since I have a very clear 24" monitor, the size I made them are right for me, but may be too small for you? Anyway, experiment a little, that is what I did. I actually combined 3-4 different scripts together and changed a few lines of code to get it to do what Multi-row Bookmarks used to do. That is not possible now with the new Firefox to get it exactly like the Multi-row Bookmarks, but my script is very close. I'm not a programmer, I'm was mainly a hardware engineer in my day job before I retired, but I can generally figure out a few lines of code by modifying them to see how it was changed when I run it.
Modified by mjs50
Hi AIVAS and mjs50, I suggest focusing on the rules that affect .toolbarbutton-text if you want to control whether bookmark names appear and how they look.
Just trying to be helpful and explain a little how it works. What I posted should be enough to help more people. The bigger issue is the Firefox programmers hosing it up. Wish they'd not do that every few updates. This is the 3rd time I've had to fix it!
mjs50: I have 2 monitors, 18" each. On the other hand, I am a senior citizen in need of new glasses but eye doctors are locked down (just like me). Screen print gets smaller every year (monthly lately). At most I had/would have 2 rows.
jscher2000: I have not found ".toolbarbutton-text" in FF (via "about:config") on in "userChrome.css".
AIVAS said
jscher2000: I have not found ".toolbarbutton-text" in FF (via "about:config") on in "userChrome.css".
I was looking at the set of rules on Pastebin. I thought you were working with those now.
cor-el said
If you post your current userChrome.css and also detail about its location then we can check out if something is wrong.
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:
- https://www.userchrome.org/what-is-userchrome-css.html
- https://www.userchrome.org/how-create-userchrome-css.html
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:
Thank you very much. In fact, even on lot of other threads these settings are missing and after a week my hope won after applying these settings!
mjs50 said
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! [Please se near top of thread]
Modified by Furleigh Merryweather
I am thrilled with you mjs50....... .............Oh wow look at my lovely, lovely tabs!!....long-lost BM's right THERE!! You say with admirable honesty that you did not write the code, but I am certain that a hell of a lot of thoughtful effort went into bringing all parts of your solution together. I gave up on multirow BM's ages ago, So FF.77 has just dropped and out of curiosity I tried your work.....cynical as hell tbh cos css/userchrome has always refused to work for me. SUDDENLY... ....my FF is super usable and looks great again! real, actual, customization! like it was when we had all the old tools. Tabs where they make sense... Heartfelt thanks to all who put time into fixing the css: Certainly mjs50 your effort deserves some love. For me this stuff is hard. Truly, thank you. ...Mozilla, please take some notice, This is really why FF stood out at all......why make it so bloody hard?!
Thanks for your kind words, it took me only a couple of hours on a rainy Sunday to get it to work again. I save chunks of code as text files and then paste them together. I'm primarily a hardware engineer that tinkers in my retirement, but I'm very persistent and logical in my thinking. What I know about writing code fits in the tip of my smallest finger. Glad you like it, because I'm sure Firefox programmers will screw up the Bookmark Toolbar and Tabs at the bottom again. Like I said before, this is the 4th time I've had to fix it after a FF upgrade!
Per "Furleigh Merryweather, 6/16/20, 5:53 PM
I am thrilled with you mjs50....... ............."
I would love to see your version of the userChrome.css.
Send me a PM, and I will send it to you via email. Somehow trying to post it on this site, it gets messed up when you save it as a text file.