Last active
April 24, 2020 21:11
-
-
Save greenfork/b107cdb8dddfe20fd327c6af5f8c3c67 to your computer and use it in GitHub Desktop.
Instruction on how to create custom firefox css rules
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Current goal is to replace Helvetica font, need to put this into userContent.css: | |
```css | |
@font-face { | |
font-family: "Helvetica"; | |
src: local("sans-serif"); | |
} | |
``` | |
Step 1: Locate and Open Profile Directory | |
The user stylesheet will be added to your each user profile, not the browser code itself; this makes sense since each profile may want a different UI modifications. In the address bar, visit about:support and click Profile Folder's "Show in Finder" (or likewise) button: | |
about:support Firefox | |
The directory will be opened on your system in Finder (Mac) or Explorer (Windows). | |
Step 2: Create chrome Directory | |
Create a chrome directory within the designated profile directory which will host the necessary userContent.css file: | |
Firefox profile chrome | |
Having the userContent.css file in this directory will allow the user stylesheet to not be lost during Firefox upgrades. | |
Step 3: Create userContent.css | |
Firefox adds the userContent.css file on every page, if it exists, so add userContent.css within the chrome directory. This file should host all modifications to any page you visit, so don't create overly broad CSS selectors which will apply to every website. | |
Firefox stylesheet | |
/* an overly aggressive style just to prove it works */ | |
body { | |
background: pink !important; | |
} | |
Firefox stylesheet | |
Step 4: Update about:config | |
In the address bar, open about:config and set the toolkit.legacyUserProfileCustomizations.stylesheets setting to true. | |
Step 5: Restart Firefox | |
User styles aren't applied to sites until you restart Firefox. Once Firefox has been restarted, the styles in your userContent.css will be applied to the page. |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment