10

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?

8128
  • 28,630
  • 27
  • 111
  • 145
janoChen
  • 1,701
  • 5
  • 23
  • 35

4 Answers4

8

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.

Windigo
  • 1,147
  • 1
  • 9
  • 23
7

https://addons.mozilla.org/en-US/firefox/addon/greasemonkey/

mount.cifs
  • 1,330
  • 8
  • 13
5

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; }
}
mivk
  • 5,082
  • 1
  • 47
  • 56
  • 3
    Firefox restart needed for every change. Also, you can also use regular expressions to match an URL, for example: `@-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;}`). – Yeti Jul 17 '17 at 09:05
  • I did this now in 2019, still works when you don't want to find and install an extension. – Rennex Jun 04 '19 at 10:03
0

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.

premek
  • 1