How to permanently add CSS to some pages using Firefox?
Say, I want to change the font or background of a page I frequent using Firefox.
How to do that?
There's a great extension called Stylish that does exactly what you're looking for. It allows you to add custom CSS to the pages you visit.
You can add custom CSS rules to a chrome/userContent.css
file in your Firefox profile folder.
Example:
/* For any page */
body { margin: 10px; border: 1px solid red !important; }
/* Or only for google.com */
@-moz-document domain(google.com) {
body { margin: 10px; border: 1px solid red !important; }
}
@-moz-document regex(".*\.(jpg|png|gif|bmp)$")
. Which I used to make the image viewer of Firefox zoom in without blurring pixels (img{image-rendering: -moz-crisp-edges;image-rendering: pixelated;}
).
You can still use chrome/userContent.css
in your profile folder but as of Firefox 69 and newer, you have to manually set toolkit.legacyUserProfileCustomizations.stylesheets
to true
in about:config
to work.