arcadia
Custom FireFox CSS theme and User.js
Roles
User Interface Designer
CSS Engineer
Project Maintainer
Tools
CSS
GitHub
User.js
Deliverables
Fully Featured Firefox Theme
User.js Custom Config
GitHub Installation Tutorial
Duration
2022-Present
Overview
I fell in love with the Firefox web browser because of the entire UI being written in CSS.
I've always liked CSS and wanted to take on a challenge of redesigning the firefox UI with
my knowledge of CSS.
Project goals
Easy Installation
I wanted to create a project that let's even
non-tech savy users install and enjoy the project. So many technical things aren't
accessible for casual users because it's too complicated to setup.
Maintainance
After researching other FirefoxCSS themes the
community has made, I realized that they go unmaintained often and usually break after a
Firefox update from Mozilla. My goal was to update the theme whenever something in the
UI
breaks so users of the project have someone to rely on.
Minimal
Above all I wanted a design that I was happy with.
I wanted a minimal browser interface that didn't get in the way and didn't have any
distracting icons.
Process
Starting point
I found an abandoned FirefoxCSS project on GitHub that had a lot
of the elements that I was trying to replicate. It had a lot of broken parts, but it was
still a good starting place. I decided to fork the project and get started on fixing it up!
Minimum Viable Product
Fixing Broken Elements
A lot of elements of the UI had been naturally overwritten or
changed by Firefox updates so I took on the task of rewriting elements or adding new CSS
styles.
Adding More Functionality
Although this original project was great, it was a little too minimal
even for my taste. With this theme there was no way of accessing tracking protection for a
certain website or cookie settings because of the removal of certain buttons. They also didn't
have any back or forward buttons which I wanted back in the design.
Replacing Icons
Next I replaced and added some new icons for the browser UI. I tried
to use icons that had a really nice look together.
User.js and Installation Tutorial
Firefox has this awesome feature where you can have a User.js config
file that defines certain behaviors the browser should follow. One of these behaviors is the
required manual config variables that is needed to allow custom themes. I included this in the
User.js file to make it more user-friendly and painless. On my GitHub repository for this
project I have a formatted readme file with all the installation instructions. Super easy to
follow and setup.
Final Result
I achieved my goal of having a project that is constantly
maintained and minimal in nature. I learned a lot about this project and what it means to be
reliable for other people. This project is still ongoing and can be used by anyone by going to
my GitHub!
Takeaways
Reliability is extremely important for people. I got good
experience with debugging interfaces along with honing my CSS skills more and more.