firefox-css

Some userChrome.css configurations to customise Firefox to my liking.

I'm currently daily-driving Firefox Nightly, so naturally I will try to update as soon as possible if there are any breaking changes.

Table of Contents

• Features
  • Sidebery CSS
  • URL bar blur
  • Custom startpage using nightTab
    • Base Theme
    • Nord Theme
• Usage
  • userChrome.css
  • Smooth scrolling
  • Vertical tabs
  • Custom new tab
• References

Features

Sidebery CSS

Sidebery.Demo.mp4

URL bar blur

⚠️ Blur currently does not work regardless of layout.css.backdrop-filter.enabled, due to bug 1773402.

Custom startpage using nightTab

Base Theme

Nord Theme

Usage

userChrome.css

1. Go to about:config and enable toolkit.legacyUserProfileCustomizations.stylesheets
2. Go to about:support and click Profile folder > Open Folder.
3. Create a new folder named chrome, download/clone this repo and copy the downloaded files into the chrome folder you just created.
4. Restart Firefox.

The directory tree should look something like this:

<your profile folder>
│   user.js
└── chrome/
    │   userChrome.css
    │   noise-512x512.png
    │
    └── components/
            autohide_sidebar.css
            iconized_content_context_menu.css
            iconized_main_menu.css
            iconized_tabs_context_menu.css
            iconized_textbox_context_menu.css

Smooth scrolling

Copy the user.js file (from the config/ folder) to the Profile folder (not the chrome/ folder). Remove other unrelated tweaks, if needed. The user.js file can be deleted afterwards.

Vertical tabs

0. Install Sidebery.
1. Copy the contents of config/sidebery.css.
2. Navigate to Sidebery Settings > Styles editor and paste the CSS under "Sidebar" on the right.
3. Alternatively, import config/sidebery-data.json in Sidebery Settings > Help > Import, if you are fine with my settings. 🙂

Custom new tab

0. Install nightTab.
1. Open a new tab and click the settings icon.
2. Navigate to Data > Restore > Import from File.
3. Import any of the any of the nightTab*.json file.
4. To set nightTab as your default homepage, see here.

References

• MrOtherGuy/firefox-csshacks
  • autohide_sidebar.css
  • iconized_main_menu.css
  • iconized_content_context_menu.css
  • iconized_tabs_context_menu.css
  • iconized_textbox_context_menu.css
• Redundakitties/colorful-minimalist