How to Add a User Stylesheet in Firefox

By  on  

While many like to complain about CSS these days, it's important to remember how amazing CSS is; the CSS language is:

  • easy to learn
  • easy to read
  • easy to write
  • simple to understand

Web developers and designers alike love that CSS allows us to take text/media and present it in a beautiful, logical fashion. While we love that we control our own sites, it's obvious that we don't always agree with other web developers' decisions, and would prefer to modify designs for the purposes of simple UI improvement or hiding ads, etc.

The amazing Firefox web browser allows users to create and include a user stylesheet into each page to allow the user to modify ever single web page as necessary. Let me show you how to do it!

Step 1: Locate and Open Profile Directory

The user stylesheet will be added to your each user profile, not the browser code itself; this makes sense since each profile may want a different UI modifications. In the address bar, visit about:support and click Profile Folder's "Show in Finder" (or likewise) button:

about:support Firefox

The directory will be opened on your system in Finder (Mac) or Explorer (Windows).

Step 2: Create chrome Directory

Create a chrome directory within the designated profile directory which will host the necessary userContent.css file:

Firefox profile chrome

Having the userContent.css file in this directory will allow the user stylesheet to not be lost during Firefox upgrades.

Step 3: Create userContent.css

Firefox adds the userContent.css file on every page, if it exists, so add userContent.css within the chrome directory. This file should host all modifications to any page you visit, so don't create overly broad CSS selectors which will apply to every website.

Firefox stylesheet
/* an overly aggressive style just to prove it works */
body {
  background: pink !important;
}

Firefox stylesheet

There's no way to isolate a user style by domain so be as specific as possible so you don't unknowingly break other websites.

Step 4: Restart Firefox

User styles aren't applied to sites until you restart Firefox. Once Firefox has been restarted, the styles in your userContent.css will be applied to the page.

Bonus: userChrome.css

While the userContent.css allows the user to set CSS for all page content, you can also create a userChrome.css file which is applied to the browser chrome.

The ability to easily create a user stylesheet to customize any webpage is another reason to love Firefox!

Recent Features

  • By
    Send Text Messages with PHP

    Kids these days, I tell ya.  All they care about is the technology.  The video games.  The bottled water.  Oh, and the texting, always the texting.  Back in my day, all we had was...OK, I had all of these things too.  But I still don't get...

  • By
    Write Better JavaScript with Promises

    You've probably heard the talk around the water cooler about how promises are the future. All of the cool kids are using them, but you don't see what makes them so special. Can't you just use a callback? What's the big deal? In this article, we'll...

Incredible Demos

  • By
    Redacted Font

    Back when I created client websites, one of the many things that frustrated me was the initial design handoff.  It would always go like this: Work hard to incorporate client's ideas, dream up awesome design. Create said design, using Lorem Ipsum text Send initial design concept to the client...

  • By
    CSS Triangles

    I was recently redesigning my website and wanted to create tooltips.  Making that was easy but I also wanted my tooltips to feature the a triangular pointer.  I'm a disaster when it comes to images and the prospect of needing to make an image for...

Discussion

  1. randomWebDev

    I dont understand the purpose behind this. Why would a user write his own Stylesheet for a Website? To “hide ads”?? Sure, there will be many people who open the debugger, analyse which div holds the ad and write a stylesheet to hide it… not? Adblocker?? Unless you are visting a Website every day and are REALLY displeased with the looks, I just cannot imagine that there is anyone who would bother to do this.

  2. David S.

    I once thought user styles couldn’t be limited to a specific domain as well, but then I found this: https://developer.mozilla.org/en-US/docs/Web/CSS/@document

    I’d like to add that there are multiple extensions for Chromium-based browsers (Google Chrome, Opera, etc.) to add user stylesheets in them as well (including Stylus, Stylish, and Stylebot).

Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!