how to use a single user CSS file in firefox, chrome and opera

Most modern web browsers support custom or user stylesheets which can be used to modify the look and feel of a web page before it is rendered. Usually there are multiple ways to set up a custom stylesheet (or user css file) in web browsers. Some browsers use extensions or addons while other just uses a simple css text file. Sometime you can use either or both.

If you use multiple browsers then maintaining a customized stylesheet for each browser can grow old pretty quickly. You have to remember to copy any and all of the changes you make, into each CSS file for each of the browsers. Also, there is a possibility of accidentally deleting the file if and when you purge the browser install directory or the profile folder.

Though it is possible to use custom CSS file in almost all of the modern web browsers, in this post we will deal with just the popular ones in Linux: Mozilla Firefox, Google Chrome and Opera. Each of these browsers may need the user style sheet to reside in a particular folder and have a specific name.

  • Mozilla Firefox requires the file to be named as userContent.css and reside in a folder named chrome inside the profile : ~/.mozilla/firefox/<profile folder>/chrome/userContent.css
  • In Google Chrome this file is named Custom.css and it resides in the configuration folder named User Stylesheets~/.config/chromium/Default/User\ StyleSheets/Custom.css
  • Opera does not impose any specific requirement about the file name and folder. It is configurable using the user interface and allows you to select any CSS file.

In spite of the differences in names and folders, it is possible to use a single CSS file across all of the browsers as all standard CSS rules work across all browsers. Browsers will also ignore rules that are not recognized. These are useful while using site specific CSS rules for Firefox using the @moz-document tags. If at all possible, refrain from using these browser specific features in CSS files which will make your life easier.

One way to use a single customized user stylesheet for each one of these browsers is to use file linking. This is easy and efficient especially in Linux.  There are two different types of linking that you can use: hard links or symbolic links. Using one of these file links provides the following advantages:

  1. Single file to edit and maintain
  2. Changes are visible across all the browsers when you edit a single file.
  3. Less chances of accidental deletion of the file completely as the master copy resides in a different folder than where the browser profile is.

As mentioned earlier you can use either the hard links or the soft links (symbolic links). I am going to use the symbolic links as the example.

First, create a CSS file in a folder of your choice. I usually keep all my configuration files in a folder in the home directory called conf (ie. ~/conf). You may choose something similar. You may name this file anything, let’s say browser.css.

To use this file in Mozilla Firefox, create a symbolic link in the appropriate Firefox folder

bash$ ln -sfn  ~/conf/browser.css ~/.mozilla/firefox/<profile folder>/chrome/userContent.css

Note: remember to substitute the <profile folder> in the above command with the actual folder name.

To use in Google Chrome, create another symbolic link in the Chrome folder to the actual file:

bash$ ln -sfn ~/conf/browser.css ~/.config/google-chrome/Default/User\ StyleSheets/Custom.css

For chromium, it is

bash$ ln -sfn ~/conf/browser.css ~/.config/chromium/Default/User\ StyleSheets/Custom.css

In the case of Opera, you can specify the file directly using the user interface.  In Preferences, go to Advanced Tab and select Content on the left menu. Click on the Style Options button that will open a new dialog called Style options. Select the Display tab in this dialog and look for the text box under the heading My Style sheet . Enter the full path to the CSS file or use the file dialog to choose the file.

Specifying a User CSS file in Opera browser

If you decide to use the hard linking instead of the symbolic linking above described above, then you do not necessarily need a master copy of the file. You can choose to link to the file in the other browser’s profile directory. Though that it is an option, I recommend that you still keep a copy of the file outside of all browser folders and link to the “extra” copy that you maintain, just like the symbolic link. This makes it easier to remember the location and maintain it.