Before adding the userChrome.css, you must enable loading it in the Firefox config (Firefox 69+):
- In Firefox, browse to
about:config(accept the warning prompt) - search for
toolkit.legacyUserProfileCustomizations.stylesheets - double click the entry so it says
true
Here is how to find your Firefox profile folder:
- Windows Default:
%APPDATA%\Mozilla\Firefox\Profiles\xxxxxxxx.default\ - Ubuntu Default (apt):
~/.mozilla/firefox/xxxxxxxx.default/ - Ubuntu Default (snap):
~/snap/firefox/common/.mozilla/firefox/xxxxxxxx.default/
Find via Firefox: Menu > Help > More Troubleshooting Information > Application Basics > Profile Directory
In your profile folder, create/edit the file chrome/userChrome.css, then add the following contents:
/*
* Recreates the basic functionality of the popular Roomy Bookmarks Toolbar add-on in Firefox 57+.
* Uncomment the section with the functionality that you want, leave all other sections commented.
* This only affects toplevel toolbar bookmarks and folders, bookmarks and subfolders in folders are unaffected.
* The tooltips on long hover (showing bookmark name and link) are unaffected.
*/
/* Remove some space between bookmark icons. If you like having things a bit more spaced out, you can instead add the padding statements. */
#PlacesToolbarItems > .bookmark-item {
margin-left: -1px !important;
margin-right: -1px !important;
/*
padding-left: 6px !important;
padding-right: 6px !important;
*/
}
/* Center bookmark toolbar items */
#PlacesChevron {
margin: 0px !important;
padding: 0px !important;
}
#PlacesToolbarItems {
width: 100%;
display: flex;
justify-content: center;
}
#PlacesToolbarItems > .bookmark-item:last-child {
margin-right: 0px !important;
}
/* Center url input bar text */
#urlbar-input {
text-align: center !important;
}
/* Hide "Other Bookmarks" folder in the bookmarks toolbar */
#PlacesToolbar #OtherBookmarks { display: none !important; }
/* No text on toolbar bookmarks; No text on bookmark folders. No hover effect. */
#PlacesToolbarItems > .bookmark-item:not([open="true"]) > .toolbarbutton-text {
display: none !important;
}
#PlacesToolbarItems > .bookmark-item:not([open="true"]) > .toolbarbutton-icon[label]:not([label=""]) {
margin-inline-end: 0px !important;
}
/* No text on toolbar bookmarks; Text on bookmark folders. No hover effect. */
/*
#PlacesToolbarItems > .bookmark-item:not([container]):not([open="true"]) > .toolbarbutton-text {
display: none !important;
}
#PlacesToolbarItems > .bookmark-item:not([container]):not([open="true"]) > .toolbarbutton-icon[label]:not([label=""]) {
margin-inline-end: 0px !important;
}
*/
/* No text on toolbar bookmarks; No text on bookmark folders. Show bookmark text on hover. */
/*
#PlacesToolbarItems > .bookmark-item:not(:hover):not([open="true"]) > .toolbarbutton-text {
display: none !important;
}
#PlacesToolbarItems > .bookmark-item:not(:hover):not([open="true"]) > .toolbarbutton-icon[label]:not([label=""]) {
margin-inline-end: 0px !important;
}
*/
/* No text on toolbar bookmarks; Text on bookmark folders. Show bookmark text on hover. */
/*
#PlacesToolbarItems > .bookmark-item:not(:hover):not([container]):not([open="true"]) > .toolbarbutton-text {
display: none !important;
}
#PlacesToolbarItems > .bookmark-item:not(:hover):not([container]):not([open="true"]) > .toolbarbutton-icon[label]:not([label=""]) {
margin-inline-end: 0px !important;
}
*/- Do not forget to uncomment the section of code with the functionality you want. Available are:
- No text on toolbar bookmarks; Text on bookmark folders. No hover effect.
- No text on toolbar bookmarks; No text on bookmark folders. Show bookmark text on hover.
- No text on toolbar bookmarks; Text on bookmark folders. Show bookmark text on hover.
- Tested on Windows 11 and Ubuntu 22.04, on the latest stable release of Firefox, unless otherwise stated here.
@cyberfunk In the first example, I'm not sure because I don't see that amount of space. There is only ever at most one bookmark worth of space between the overflow icon and the last bookmark for me.
I suppose what you could try is reducing the margin space for the overflow icon (also try values <0 for just margin-left):
In the second case, the space is obviously caused by the flexible space. I think you might have more luck using the userChrome.css to center it manually, and I think it's actually a nice addition that I might use myself 👍 . Remove the flexible spaces and add the relevant css like in the example in the gist.