A Record for Customizing Firefox Browser

Today I customized my Firefox browser, and I want to record the process here. the result is quite satisfying.

the customized firefox has these features listed below:

• A new tab page with a random background image.
• vertical tabs just like edge browser. i also remove the title bar for a better look.

prequisites

1. open about:config in firefox
2. set toolkit.legacyUserProfileCustomizations.stylesheets to true
3. install sidebery addon

Installation

clone the repository

i’ve created a repository for this customization. you can clone it to your local machine.

git clone https://github.com/yuzhi535/VerticalFox
cd VerticalFox

For windows

1. find your firefox profile folder. (usually in C:\Users\{username}\AppData\Roaming\Mozilla\Firefox\Profiles\{profile})
2. create a folder named chrome in it.
3. copy userChrome4win.css, userContent.css to chrome folder.
4. rename userChrome4win.css to userChrome.css.
5. enjoy!

for mac

1. find your firefox profile folder. (usually in ~/Library/Application Support/Firefox/Profiles/{profile})
2. create a folder named chrome in it.
3. copy userChrome4mac.css, userContent.css to chrome folder.
4. rename userChrome4mac.css to userChrome.css.
5. enjoy!

how to use

1. keep the sidebery addon enabled.
2. keep sidebery sidebar opened. this is the vertical tabs.
3. explore the sidebery addon. it’s powerful!

demo

• when firefox is not maximized, the title bar is not hidden; however, if firefox is maxmized, the title bar will be hidden(on mac, it’s maximazed; on windows, it’s fullscreen(F11)).
• titlebar is hidden always.
• homepage background image is from unsplash.

reference

• firefoxcss subreddit
• firefox-csshacks tag browser
• sidebery