Skip to content

My CSS configuration to customise Firefox to my liking.

Notifications You must be signed in to change notification settings

dexeonify/firefox-css

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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

Sidebery.Demo.mp4

URL bar blur

Blurred URL Bar

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

Rounded corner context menu highlight

Rounded Corner Context Menu

Custom startpage using nightTab

Base Theme

nightTab

Nord Theme

nightTab Nord

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.cssnoise-512x512.png
    │
    └── components/
            autohide_sidebar.css
            hide_tabs_toolbar.css
            rounded_corner_context_menu.css
            windows_controls_placeholder.css

Smooth scrolling

Copy the user.js file (from the misc/ 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

  1. Install Sidebery.
  2. Copy the contents of misc/sidebery.css.
  3. Navigate to Sidebery Settings > Styles editor and paste the CSS under "Sidebar" on the right.
  4. Individually set the following options in Styles editor:
    • Background color to #2B2A33
    • Info color to #9494AA
    • Color of active option to #9494AA
    • Color of inactive option to #52525E
    • Under "Context Menu", Background color to #2B2A33
    • Under "Context Menu", Option background color on hover to #2B2A33
  5. Set window preface value in Sidebery settings > Help > Preface value to " " (a space).
    Note: The preface value can be anything, but you would have to change it accordingly inside the userChrome.css files as well.
  6. Alternatively, import misc/sidebery-data.json in Sidebery Settings > Help > Import, if you are fine with my settings. :P

Custom new tab

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

References

About

My CSS configuration to customise Firefox to my liking.

Topics

Resources

Stars

Watchers

Forks