3

How can I customize my Firefox, so if a page has no style-definitions firefox will use a local stylesheet, that I can define myself?

I found this addon: Context Style Switcher, that can remove the stylesheet from a page, but that does look realy ugly.

It would be perfect, if I could define a per-site CSS, that is used every time I visit a page.

2
  • Try this tip from an earlier question [How to override the CSS of a site in Firefox with userContent.css?][1] [1]: superuser.com/questions/318912/…
    – mvark
    May 19, 2013 at 8:19
  • 1
    that tip only changes the style on a certain site. I want to change the style on all sites, that have no CSS
    – rubo77
    May 26, 2013 at 0:55

2 Answers 2

3

You can set the various options (color, fontsize, font family) inside about:config to a certain degree. (type about:config as an address and open it)

some examples @ Firefox 62

browser.display.foreground_color: sets the text color
browser.display.background_color: sets the background color of a page

For further settings you can type in color or font or size inside the searchbar.

4
  • That works for the background color, but I couldn't find any useful setting. even font.minimum-size.x-western set to a bigger value than 14 is causing severe problems on nearly all websites
    – rubo77
    Oct 15, 2018 at 18:53
  • If it's just about the font size, try this option: font.size.systemFontScale Does that help? (change the value and reload a random site. I have it on 170)
    – DarkTrick
    Oct 16, 2018 at 12:13
  • that works. And you can edit the default font-family and link-colors in the settings menu under "Schrift" (german)
    – rubo77
    Oct 17, 2018 at 16:31
  • I found out, that setting a bigger font.size.systemFontScale than 100% makes big problems on many websites. I think the value is used as base for css em which is causing havoc if not starting on 100%
    – rubo77
    Oct 17, 2018 at 17:39
1

Use a userscript

...to automatically run user-defined JS. To make use of userscripts you have to install a browser extension called "userscript manager", which are available for all modern browsers. Learn more about userscripts.

Here is an sample JS that checks if <head> element contains any <style> or <link rel="stylesheet">. If no, then user-defined CSS is inserted:

const head = document.getElementsByTagName('head')[0];
if(head.querySelector('style, link[rel~=stylesheet]') === null) {
    head.insertAdjacentHTML(
        'beforeend',
        '<link rel="stylesheet" href="https://unpkg.com/spcss" />'
    );
}

Replace the "https://unpkg.com/spcss" with a URL of your CSS. There are other approaches to load CSS file using JS or you can insert a <style> tag to define styles directly.

I'm not sure if it's possible to load a local CSS file from http:// page or access local filesystem from a userscript :( but the script itself is a local file.

I've just published example above as a ready-to-use usercript: https://greasyfork.org/en/scripts/482860-default-css.

1
  • It's more robust to use ~= instead of = in link[rel~=stylesheet] selector to match values like rel="prefetch stylesheet" and others. See more about attribute selectors
    – belkka
    Dec 23, 2023 at 23:23

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .