If you’re using a vanilla GNOME session on Ubuntu with the Adwaita theme, and want to make Firefox look a little more at home, you can.
In fact, with a bit of custom CSS you can make Firefox look like Epiphany (aka GNOME Web), the core browser that ships with the GNOME desktop environment.
Firefox UserChrome.css
The Firefox 57 release back in November came with a huge set of changes in tow. Alongside an all-new rendering engine, multi-thread processes, new browser features and other niceties was Photon — a newer, cleaner, and modern user interface and layout.
On the negative side, Firefox 57 doesn’t allow browser add-ons to change the look or layout of the new Photon interface.
But the look of Firefox can be modified using a cascading style sheet (CSS).
Using CSS you can, among other things:
- Hide menu items
- Reposition the tab bar
- Adjust sizing, spacing and margins
- Change fonts
- Restyle buttons
- Add extra tab or bookmarks rows
Admittedly, editing the UserChrome.css isn’t something to be done idly, but so long as you’re careful you’re unlikely to mess things up.
Wait: do i really need to do this?
No.
Like Google Chrome, Firefox is now great at matching whatever GTK theme you’re already using. It picks up highlight colors, reuses widgets, menus colors, and so on. There’s no real need to modify or change anything: vanilla Firefox looks great out of the box on Linux.
But — and it’s a big but — the new UI doesn’t work for everyone. Those of you who want to take GTK theme integration further, move tabs under the URL bar, prune down the menu, and so on, can do so using user a userchrome.css file.
How to Edit Firefox Userchrome.css
To make use of a custom userchrome.css style you’ll first need to know where to place it, and that’s your Firefox profile folder.
On the Firefox profile folder on Linux is located in the following directory:
~/.mozilla/firefox/<profile folder>/chrome
To show hidden files in Nautilus you just need to press Ctrl + H (other file managers may differ).
The <profile folder> name inside the firefox directory should be a string of random numbers and letters. If you have more than one Firefox profile you’ll have multiple profiles folders, do make sure you place the relevant files (see below) in the correct folder.
Adwaita Firefox UserChrome.css
If you use the GNOME Adwaita theme, like the look of the Web (aka Epiphany) web-browser, but don’t want to abandon Firefox you can use the (obliquely named) ‘Firefox GNOME Theme‘ user chrome style.
This style rejigs the layout of Firefox to bring it inline with the Adwaita theme and the default GNOME Web browser. It restyles navigation buttons, moves tabs below the address bar, and tweaks the color scheme.
The style supports both regular Adwaita and Adwaita dark.
This style will work on Firefox 57 (and presumably later versions, incase you’re reading from the future).
You can find more details on the style, including how to enable/disable the light and dark modes, on the Github project page:
If you want Adwaita dark simply download this zip and extract. Inside the extracted folder copy the userchrome.css, usercontent.css and UI folder to your ~/.mozilla/firefox/<profile folder> directory. Restart the browser.
If you want to the normal version of Adwaita download this zip and extract. Inside the extracted folder copy only the userchrome.css and UI folder to your ~/.mozilla/firefox/<profile folder> directory.
Next, open the css file in Gedit. Comment out the dark theme and uncomment the light theme so that the file reads like this:
/* Here you can switch between the dark and the light theme. Don't use both, coz * it ain't gonna work. */ /* Dark theme */ /*@import "ui/theme-dark.css"; /**/ /* Light theme */ @import "ui/theme-light.css"; /**/ /* Symbolic tab icons */ /*@import "ui/symbolic-tab-icons.css"; /**/
Save your changes and restart Firefox.
Bonus Themes
Safari UserChrome.css
If you followed our guide on how to make Ubuntu look like a Mac you can up the Apple ante on your system somewhat by using CSS to make Firefox look more like Safari.
The following is not 100% perfect (especially while we wait for CSD) but it’s a good enough imitation:
Minimal UserChrome.css
If you’re less concerned with theme integration and more with maximum want a condensed layout with tight padding, reduced margins and a double-hight tab bar you have to choice out suFFiciently_compact style by Marcus W:
If you know of any other great userchrome.css tweaks/themes do let us know about them using the tip form, or by sharing them in the comments below.