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
- First you need to find your Firefox profile. In Firefox, choose Firefox > Help > Troubleshooting Information. The “about:support” page will open.
- 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
- 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.
- 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.
- Add the CSS and wrap-around text shown below.
- Save the file.
- Restart Firefox.
The first and last line are the wrap-around text required for the userContent.css file. Everything between is the CSS.
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.
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.
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.