Custom CSS for Firefox

Custom CSS for Firefox

redesign the webpage

Tools

2020.08.01

0 #firefox #css

Firefox allows users to create and include user stylesheets to modify every single webpage as necessary or even modify the UI of Firefox itself. Custom CSS code should put into userChrome.css (for Firefox UI) & userContent.css (for custom web pages) files inside browsers profile folder.

You can get a template from https://github.com/Aris-t2/CustomCSSforFx to start your customization.

Keep in mind CSS code can only modify already present UI items.

Unlock custom CSS usage in Firefox

about:config > toolkit.legacyUserProfileCustomizations.stylesheets > true

This works in Firefox 69+.

Location for user styles

  1. Find your profile folder (profile names are different for everyone): about:support > Profile Folder > Open Folder or about:profiles > Root Directory > Open Folder

  2. User styles belong into \chrome folder. Create the folder, if there is none yet

  3. Then work with these two files: \chrome\userChrome.css & \chrome\userContent.css

Create “userContent.css” file

Firefox adds the userContent.css file on every page, if it exits. So don’t create overly broad CSS selectors which will apply to every website, for example:

/* an overly aggressive style */
body {
    background-color: bisque !important;
}

background color ruined by custom css

It’s much better to narrow the CSS effects only on targeted site with a special CSS @document rule:

@-moz-document domain("example.com") {
  h1 {
    color: green;
  }
}

With these basics, you can now start your stylings. The same process for userChrome.css, but I’m not going to touch it right now…

By the way, restart Firefox to put new changes into effect.

Ads by Google

林宏

Frank Lin

Hey, there! This is Frank Lin (@flinhong), one of the 1.4 billion 🇨🇳. This 'inDev. Journal' site holds the exploration of my quirky thoughts and random adventures through life. Hope you enjoy reading and perusing my posts.

YOU MAY ALSO LIKE

Using Liquid in Jekyll - Live with Demos

Web Notes

2016.08.20

Using Liquid in Jekyll - Live with Demos

Liquid is a simple templating language that Jekyll uses to process pages on your site. With Liquid you can output an modify variables, have logic statements inside your pages and loop over content.

Setup an IKEv2 server with StrongSwan

Tutorials

2020.01.09

Setup an IKEv2 server with StrongSwan

IKEv2, or Internet Key Exchange v2, is a protocol that allows for direct IPSec tunneling between the server and client. In IKEv2 implementations, IPSec provides encryption for the network traffic. IKEv2 is natively supported on some platforms (OS X 10.11+, iOS 9.1+, and Windows 10) with no additional applications necessary, and it handles client hiccups quite smoothly.

TOC