Firefox with userChrome.css

How to Zoom out Firefox bookmarks spacing

0
(0)

Firefox Update enlarges bookmark context menu spacing. Reduce menu spacing via userChrome.css

As we can easily see after the Mozilla Firefox Update 92, the bookmark context menu under the toolbar now appears much larger. A comparison to Chrome shows the menu spacing (padding) between the bookmark items 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 Toolbar

  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

Firefox Advanced Preferences about:config

  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
Firefox More troubleshooting Information – Profile Folder

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

Mozilla Firefox default pofile path to userChrome.css

  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.

Windows File Explorer View File name extensions

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.

Mozilla Firefox with using Customized userChrome.css

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 0 / 5. Vote count: 0

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

We are sorry that this post was not useful for you!

Let us improve this post!

Tell us how we can improve this post?

Leave a Reply

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