Firefox, the most commonly bundled browser for Linux today. It can be easy to customize or sometimes rather left to the opinions of the development team. This writer is a WM enthusiast, ready to spill some beans on how you can adapt the look and feel of Firefox to look native in i3WM. This was a wonderful find for me. Making your browser appear how you would like. People have even made themes that look like Google Chrome browser if that is what you like. You can really go nuts! My interest was to limit the amount of space the top bars were taking up. Using a laptop most of the time, you want to take back some real estate. This is the same reason i3WM gaps does not appeal to me. It takes up space that could go to whatever the objective is, rather than adding to the clickable clutter.
So, we will go over what you need to do to get Firefox ready to use a custom style sheet. We will also set up our needed plugins and bookmarks to be visually accessible from one bar, rather than the three stack, if you like your bookmark bar visible. We will have to look in our directories to place a new directory with a new CSS (Cascading Style Sheets) file that will be used by Firefox. Finally, we will also show you how to set up a CSS workflow to edit your new custom configuration. You will be able to make it more intuitive and minimalistic. Making it your browser. In case you’re wondering, this also works on Librewolf. You can use the built-in theming, you can use CSS while socially coding like us today, or you can get prebuilt CSS that also heavily customize your experience without having to code. It is all up to you. You can do this on any Linux distribution to pull it into whatever style you want. Let’s do it!
Browser Prep
The first thing you want to do is install Firefox or one of its descendants like LibreWolf. We will be running Arch this time. So pacman is the primary package manager we will be using. We will also be using yay as it is the AUR helper or package manager helper. The AUR or Arch User Repository is the community contributed packages that work with Arch. Yay, basically helps pacman locate the packages and install them.
sudo pacman -S firefox sudo pacman -S yay sudo yay -S librewolf
Most ready to use distributions simply come with Firefox pre-installed. Librewolf can be found on Github, where you should be able to make it work with almost any distribution, using git to pull it down. So, you don’t even need a browser on Linux to download the browser you actually want. You can do that all in terminal. Now we will get into some basic configurations to help keep from making your browsing experience completely alien. For this, you want to first download some add-ons like Ublock, ClearURL, or anything else you may find productive.
Now you can change your settings however you think best, like HTTPS everywhere, or changing your search preferences. LibreWolf will pretty much have you covered if you want a “just works” privacy browsing experience. No real need to tweak the settings much after your add-ons. Now let’s make sure we have access to everything we need from the top bar, keeping in mind, if you don’t need it, don’t use it.
Now you can just right-click on the task bar, choose customize on the bottom of the dropdown menu. Then you can drag your bookmarks, add-ons and anything else you think you really need like a printer or settings icon to click, as you can see this will take the three stack comfortably down to two. With everything you require right there. You can stop here if that’s all the custom you want. What we will be doing next is enabling the CSS Boolean to be true, making the styling possible. Proceed with caution!
about:config
You will want to say yes when prompted to take caution by the browser. This menu has a lot of configuration changes in it. This can result in an unusable browser if you go crazy and do not research. We will go ahead and type the following in the search bar.
toolkit.legacyUserProfileCustomizations.stylesheet
As you my have noticed, it should autocomplete the correct configuration once you get to the first part of legacy. Now, we can add CSS to our browser, making it one of a kind or just using a theme we find on Github.
Directory Configuration
In Linux, all your applications are installed into directories. They often have a particular directory that they use. We will be looking at our home directory in terminal to see what’s in there, including your dot files. These files are hidden by default with a dot in the beginning.
ls -a
Now we will want to navigate to the .mozilla directory for Firefox. It will be .librewolf for Librewolf. We will need to go into the firefox directory for Firefox. You will not have an extra directory for Librewolf.
Firefox
cd ~/.mozilla/firefox
Librewolf
cd ~/.librewolf
In there, you can look around using ls again without the -a. This way, you can see the default-release directories name. Mine is named gt9vv87g.default-release.
ls
cd gt9vv87g.default-release
Inside this directory, you can create a new one called “chrome” ironically.
mkdir chrome
This is the folder in which you can place a file called “userChrome.css” that will then take over the styling of the browser itself. You can do this in a few ways. You can pull it down using Github, either by copying in the browser and copying it into a file you create using touch, or you can use the git command if you have it installed. Furthermore, you may also wish to go to Github to search for FireFox themes, tones of different style will come up. Amazing eye candy, even. For the purposes of i3WM modding, we went with simple and minimalistic, like the theme’s author. We forked it, so we can continue development, as it has been left to us to make any updates and tweaks by the original author.
Code Customization
We are going to show you how to change the colors of the tabs. So, you can make it match your theming a little better. Making all the difference for some of us. We will use Vim as always. But you can use Gedit or VS Code. Whatever you want to edit the file with that feels good.
Firefox
vim ~/.mozilla/firefox/gt9vv87g.default-release/chrome/userChrome.css
Librewolf
vim ~/.librewolf/gt9vv87g.default-release/chrome/userChrome.css
Remember, to use your default-release directory name, or this may not work. Now you can copy and paste the code in. It is just one file, if it was a lot more than git would be more ideal. Now let’s customize the tab colors. We chose gray, all you do is change the hex color value.
Now we can write and quit the file by hitting Esc and typing :wq. Now that everything is in place, you can go ahead and restart FireFox and see a beautiful minimalistic single bar, themed to fit in with i3WM. Full of all the stuff you decided to add to it. Now you are free to edit this code however you wish. You can even change the size of things and make favicons show up in your tabs. The list goes on, you can do what your eyes like. Thanks for reading!
