Firefox with userChrome.css

How to Zoom out Firefox bookmarks spacing

4.7
(20)

Firefox Update enlarges the bookmarks menu under the toolbar. Reduce spacing between bookmarks by userChrome.css

As we can see after the Mozilla Firefox Update 92, the bookmarks menu spacing under the toolbar now appears much larger. A comparison to Chrome shows the bookmark padding between the bookmarks is now twice as large.

If we try the Firefox Toolbar settings by click the menu button    and choose More tools and open Customize toolbar with click the Density button and choose “Normal” does not really shows a reduction. If there are a large number of bookmark items in a folder, depending on the screen resolution, the menus can sometimes overlapping.

How to Customize Firefox Bookmark Spacing

  As announced, in the current release of Firefox 92 the menu spacing can only be reduced via userChrome.css.

By creating the file userChrome.css the bookmark menu (menuitem) can be adjust using style sheets. Before that, however, Firefox 69 and later must set the default setting on the about:config-page from false to true to enable userChrome.css and userContent.css in the Chrome folder, to do it with pasting about:config in the firefox address bar and hit Enter

  Proceed with Caution. Click button Accept the Risk and Continue

Next in the search box type or paste the line below into “Search preference name” and hit Enter

toolkit.legacyUserProfileCustomizations.stylesheets

The option for Customize Style Sheets opens, click on the switch icon on the right to set it to true.

Next for the style sheet files create a folder chrome (if not already exist), this under the Firefox profile folder, this profile folder is easy find by click the Firefox menu button    choose Help and open More troubleshooting information, then scroll down a bit and click on the Open Folder button at Profile Folder.

Firefox More troubleshooting Information – Profile Folder

Click to Open Folder button just opens in Windows File Explorer. Now create the chrome folder here.

  You’ll need to tell Windows to show you file extensions, if you haven’t already. Windows hides file extensions by default to simplify things. On Windows 8 or 10, you can simply click the View tab on the ribbon and check the File name extensions box to make them visible.

userChrome.css is a style sheet with special importance to Firefox. The rules in userChrome.css under the profile folder are applied to the user interface, and can override nearly every built-in style rule.

  This userChrome.css has nothing to do with Google Chrome. Chrome refers to the user interface of the web browser, which is what Google Chrome was named after.

menupopup > menuitem, menupopup > menu {
 padding-block: 2px !important; /*adjust: 0px-4px*/
 min-height: 22px !important; /*adjust: 21px-24px or unset*/
}

*|*:root {--arrowpanel-menuitem-padding: 2px 8px !important;}

Add the CSS code into Notepad Editor and save them with the file name userChrome.css. Copy the file under the Firefox profile folder to the chrome folder. The next time you open Firefox, the bookmarks under the toolbar appear smaller again.

If you also want to change the font size, the default font-size can be adjust by inserting the CSS code line.

/*
 * Make all the default font sizes 8 pt:
 */
* {
font-size: 8pt !important
}

  Whenever you edit your userChrome.css file, you will have to close all open tabs and relaunch Firefox for your changes to take effect.

How useful was this post?

Click on a star to rate it!

Average rating 4.7 / 5. Vote count: 20

No votes so far! Be the first to rate this post.

4 thoughts on “How to Zoom out Firefox bookmarks spacing”

  1. A great solution now that Firefox 108.0.1 totally broke the tabs functions if you had Lepton.

    I just need the bookmarks to be in a compact formatting.

    I do not have the time to learn the specific modes of Firefox styling, despite knowing CSS, and this post took me out of a blue funk.

    Thank you!

  2. This is a life-saver! I have looked and looked for simple to follow instructions for enabling compact mode for the newer releases of Firefox and this by far was the easiest for me to follow. I have zero coding experience and between this and one other site to help create the css file, I am stoked that I have compact mode back!

Leave a Reply

Your email address will not be published. Required fields are marked *