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:

How to override CSS stylesheets in Firefox

Unaltered Sexy Docs style

After:

Overridden with custom CSS

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.

About these ads

About Sarah Maddox

Technical writer, author and blogger in Sydney

Posted on 10 March 2013, in technical writing and tagged , , , , , . Bookmark the permalink. 4 Comments.

  1. {quote}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.{quote}

    Nice! Looking forward to that plugin.

    In the meantime, do you think you or an Atlassian colleague could write a post how to render the Edit button for authenticated users only? It seems that such a check should be done in the template rather than rendering the button for everybody and then hiding it with CSS for some.

    Even if you release the functionality in a plugin it would be nice to understand how it is done.

    • Hallo antartic74

      Love the wiki markup! :)

      Actually, Confluence itself will only display the Edit button if the user has permission to see it. But we have CSS on top of that (the Sexy Docs CSS) which hides the Edit button even from people who have permission. And then this post shows you how to override that CSS, so that you can see it again.

      Hah, convoluted?

      I’ll pass on your request for someone to blog externally about the Sexy Docs plugin, once it’s released. No doubt it will some other name by that time. ;)

      Cheers, Sarah

  2. I made a plugin called superUserContent that creates a folder in the chrome directory where you can put stylesheet files to load with the page.

    The nice part about it is that if you make any changes to the files, they will take effect when the page refreshes. That makes it easy to keep my themes organized and up to date when the website changes.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Follow

Get every new post delivered to your Inbox.

Join 1,499 other followers

%d bloggers like this: