How to override CSS stylesheets in Firefox

Recently we needed to add some custom styling to pages on our documentation wiki. But we wanted the styling to take effect for our authors only. Other readers should see the pages as delivered by the wiki. So I found out how you can override a web page’s CSS for your browser only.

How do you override CSS stylesheets in Firefox, why did we need to do this, and what other ways are available for overriding CSS?

How to do it in Firefox

Here’s how to override a web page’s CSS styles in your browser. You can override as few or as many of the CSS styles as you like. These changes will apply to you only. They will not affect other users of the site.

You could add the CSS (see code box below) to your browser using Firefox’s Web Developer, or Greasemonkey, or another web developer tool. But then the changes you make are temporary – they last only for a single session.

Instead, when using Firefox, you can put your custom CSS into the userContent.css file on your own computer. That file is located in the chrome folder of your Firefox profile. Provided you include the ‘!important‘ directive, the CSS in this file will override the CSS applied by the designer of the web page.

I’m using Firefox on Windows 8. This works for me. To edit your your userContent.css file:

1. First you need to find your Firefox profile. In Firefox, choose Firefox > Help > Troubleshooting Information. The “about:support” page will open.
2. Under “Application Basics”,
   • On Windows and Linux, depending on Firefox version, choose Show Folder (Windows) or Open Directory (Linux) or Open Containing Folder.
   • On Mac OS, choose Show in Finder

   A folder will open in Windows Explorer (or I assume Finder, etc). This is your Firefox profile.
   (It’s probably in a really weird spot. Mine is in C:\Users\User\AppData\Roaming\Mozilla\Firefox\Profiles\oz848lnl.default\chrome.)

3. Look for the chrome folder inside your profile folder. If it’s there, open the folder. If it’s not there, add the folder and then open it.
4. Look for a file called userContent.css in the ‘chrome’ folder. If it’s there, open it in a text editor. If it’s not there, add the file and then open it in a text editor.
5. Add the CSS and wrap-around text shown below.
6. Save the file.
7. Restart Firefox.

Content of userContent.css

The first and last line are the wrap-around text required for the userContent.css file. Everything between is the CSS.

userContent.css

@-moz-document domain(YOUR.DOMAIN) { <ADD YOUR CSS HERE> }

Example

@-moz-document domain(confluence.atlassian.com) { body {      font-family:'Comic Sans MS', cursive;  } }

Alert: The above styling will make you either the most popular or the most scorned person in the world. All credit to Don Willis for the CSS. 😉

Our use case

Do you keep scraping your cursor madly around the page on our documentation wiki, looking for the ‘Tools’ option? Are you worried that you don’t have edit access to the pages, because you can’t see the ‘Edit’ button?

We have applied the so-called Sexy Docs 🙂 look and feel to the documentation spaces. Sexy Docs hides the ‘Tools’ and other options, to make a smoother reading experience. At the moment, Sexy Docs is just a bunch of CSS applied to the space. We have plans to convert it to a plugin. The plugin will be able to make the options visible to logged-in users who have the relevant permissions.

In the meantime, you need to override the CSS if you want the options to be visible without your having to hover over them.

Content of userContent.css, including the CSS to show the wiki tools

The first and last line are the wrap-around text required for the userContent.css file. Everything between is the CSS. In this case, it contains the styles we need for our Sexy Docs override.

userContent.css

@-moz-document domain(confluence.atlassian.com) { #navigation ul.ajs-menu-bar:hover {   opacity       : 1.0 !important; } #navigation ul.ajs-menu-bar {   opacity       : 0.5 !important; } #browse-menu-link {   opacity       : 0.5 !important; } #browse-menu-link:hover {   opacity       : 1 !important; } .page-metadata {   opacity       : 0.5 !important; } .page-metadata:hover {   opacity       : 1.0 !important; } }

This CSS makes the following UI elements always visible in light grey, and appear darker on hover:

• Edit, Share and Tools options
• Browse menu
• Page byline (Author, date and time information under the heading)

Hit a CAC page, such as this one: https://confluence.atlassian.com/display/DOC/Planning+for+Confluence+5. You should see the required menu items, as shown in the “before and after” images below.

Before and after

Before:

Unaltered Sexy Docs style

After:

Overridden with custom CSS

Other ways to add the CSS

One of my colleagues pointed out that you can use the Stylish extension in Chrome, and add the CSS via the Stylish configuration screen. There’s a Stylish for Firefox too.