Customizing the new Firefox Megabar with userChrome.css

Customizing the new Firefox Megabar with userChrome.css

Firefox 75 brings this new Megabar interface to improve the speed at which you find websites such as using the sites you visit most to improve results. Pretty cool right? But even with its "mega-ness" I'm not a fan of it being somewhat gaudy and oversized in relation to other browser elements. Thankfully there's a way to tame this thing back down to a reasonable size.

The userChrome.css is a file that exists in your Firefox profile directory that gives some UI customization options in the same manner as your would apply a CSS file to a website.  

To find your profile directory open it form the Help menu under Troubleshooting Information. Or simply type this in that nifty new Megabar of yours about:support

From within that folder create a new folder named chrome and then add a userChrome.css file within that.  Now you can customize to your hearts content!  Here's one I use that includes a style to decrease the Megabar size hopefully once and for all.

The final step to enabling this fancy new userChrome file is to tell Firefox to actually look for it on startup. Enter about:config in the Megabar and accept the "risk" dialog that appears. Then once you set the toolkit.legacyUserProfileCustomizations.stylesheets config property to true your new customizations will appear on the next browser restart!

Show Comments