Custom CSS for Firefox

Custom CSS for Firefox

redesign the webpage

Tools

2020.08.01

👣 #firefox #css

Firefox allows users to apply 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 that these CSS code can only modify already presented 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 should put 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.

THE END
Ads by Google

林宏

Frank Lin

Hey, there! This is Frank Lin (@flinhong), one of the 1.41 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 template language that Jekyll uses to process pages for your site. With Liquid you can output complex contents without additional plugins.

Hands on IBM Cloud Functions with CLI

Tools

2020.10.20

Hands on IBM Cloud Functions with CLI

IBM Cloud CLI allows complete management of the Cloud Functions system. You can use the Cloud Functions CLI plugin-in to manage your code snippets in actions, create triggers, and rules to enable your actions to respond to events, and bundle actions into packages.

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 tunnelling between networks. It is developed by Microsoft and Cisco (primarily) for mobile users, and introduced as an updated version of IKEv1 in 2005. The IKEv2 MOBIKE (Mobility and Multihoming) protocol allows the client to main secure connection despite network switches, such as when leaving a WiFi area for a mobile data area. IKEv2 works on most platforms, and natively supported on some platforms (OS X 10.11+, iOS 9.1+, and Windows 10) with no additional applications necessary.

TOC

Ads by Google