diff --git a/Firefox-Multirow-Bookmarks-Toolbar.md b/Firefox-Multirow-Bookmarks-Toolbar.md new file mode 100644 index 0000000..bc3e6b7 --- /dev/null +++ b/Firefox-Multirow-Bookmarks-Toolbar.md @@ -0,0 +1,66 @@ +## Description + +Below URL bar can be shown Bookmarks Toolbar, but it is only one row of bookmarks. This is how to show all rows. + +## What webbrowser to use? + +Works in Firefox based browsers, like: + +- Firefox +- Waterfox, privacy focused webbrowser https://www.waterfox.net + +## Where this info is from? + +- https://github.com/MrOtherGuy/firefox-csshacks +- https://raw.githubusercontent.com/MrOtherGuy/firefox-csshacks/master/chrome/multi-row_bookmarks.css + +## Install + +1. At your webbrowser, go to URL `about:support` +2. Click Application Basics / Profile Directory / Open Directory. It opens directory like `abcde.default-default` +3. In File Manager, create directory `chrome` +4. Copy Paste below code to that directory `chrome` to textfile `userChrome.css` +5. Close webbrowser +6. Open webbrowser +7. Enjoy Multirow Bookmarks Toolbar ! + +## `chrome/userChrome.css` + +``` +/* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/multi-row_bookmarks.css made available under Mozilla Public License v. 2.0 +See the above repository for updates as well as full license text. */ + +/* 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:not(#PlacesToolbarDropIndicatorHolder){ + 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) * (4px + 1em + (2 * (var(--multirow-bmb-row-margin) + var(--uc-bm-padding,var(--bookmark-block-padding)))))) !important; + overflow-y:auto; + scrollbar-color: var(--lwt-accent-color) var(--toolbar-bgcolor); + scrollbar-gutter: stable; + 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; + visibility: visible !important; /* Just in case they would be hidden for some reason */ +} +``` +