Firefox is on point.

Level: Pulp Fiction

I love Firefox, and I’d like to share a small customization — how I tweak the browser’s appearance to suit my taste. That’s what we’ll cover in this article.

1. Let’s enable vertical tabs like in Arc.
2. We’ll save some vertical space by enabling compact mode.
3. And we’ll move the search bar to the top, just like in Chrome.
4. Oh yeah, this is the interface god mode.

Let’s take one last look at Firefox’s default appearance.

Let’s tweak some settings to give Firefox a fresh new look.

1. Vertical Tabs

First, let’s enable vertical tab mode.

An example of what it looks like with vertical tabs enabled

Example of pinned tabs

2. Compact Mode

Now I suggest making the top bar and the overall Firefox UI more compact. Go to about:config and search for the setting browser.uidensityset it to 1

Done — the interface instantly looks more compact.

3. Search bar on the page

I’d prefer the search bar to be at the top.

So I suggest using some of Firefox’s built-in features to tweak the interface.

Open about:config again and set the toolkit.legacyUserProfileCustomizations.stylesheets preference to true.

Now open about:support, find the Profile Folder line, and click Show in Finder Folder.

In your profile folder, create a folder named chrome, and inside it, a file called userChrome.css. We’ll be editing userChrome.css, so open it with your favorite editor.

Open chrome/userChrome.css and add the following CSS code to it:

.browserContainer > findbar {
   order: -1;
}

Great! Restart Firefox, and press CMD+F on a page to see that the search bar now appears at the top.

4. Pandora’s box

It looks like you’ve unlocked an ancient Firefox customization skill — trust me, it’s hard to stop once you start. But I’d like to make just a few more tweaks as an example of how you can play around with it.

Let’s add a few more lines to chrome/userChrome.css, and in the end, the entire file will look like this:

.browserContainer > findbar {
   order: -1;
}

:root{
   --bookmark-block-padding: 5px !important; 
}

&:nth-child(1 of :not([hidden], [pinned])) {
 padding-block-start: 0px !important;
}

& .tabbrowser-tab {
 padding-block: 0px !important;
}

Let’s restart Firefox and see the result!

Don’t hesitate to use your new knowledge to channel your hyperfocus into useless tweaking things 😅