It is possible to specify custom user styles in Firefox. These override the default browser styles, and are in turn overridden by the website’s styles. User styles can be made to not be overridden by making them !important.
userContent.css File
The file to store custom styles is in userContent.css. This file does not exist by default so it needs to be created first. Every time a change is made to the file Firefox must be restarted to read the changes.
The location where this file should be saved depends on the operating system but is in the "chrome" folder of your Firefox profile.
On a Windows XP machine I found this here, where xyz would be a seemingly random combination of letters and numbers which will be unique on your system and different from what is below:
c:Documents and Settings[username]Application DataMozillaFirefoxProfilesxyz.defaultchromeuserContent.css
On Windows 7:
C:Users[username]AppDataRoamingMozillaFirefoxProfilesxyz.defaultchromeuserContent.css
On Debian with Iceweasel:
~/.mozilla/firefox/xyz.default/chrome/userContent.css
Font Example
As a simple example, if you prefer to only have serif fonts displayed add this to the css file:
body {
font-family: serif;
}
This can still be overridden by the website’s style sheet, so add !important to ensure it cannot be:
body {
font-family: serif !important;
}
<phpfatalerror> example
On a website I have been working on, it spits out error messages contained within <phpfatalerror> tags in the event of fatal errors in PHP. Defining a style for this in the website’s style sheet so the error messages were actually readable wasn’t much use if the style sheet wasn’t loaded, so I solved the issue by adding the style definition into the userContent.css file instead:
phpfatalerror {
background-color: white;
border: 1px solid red;
display: block;
font-family: monospace;
margin: 10px;
padding: 10px;
}
Further Reading
Read the Customizing Mozilla page at www.mozilla.org for more details and examples. That page also shows how to control Mozilla’s chrome as well using userChrome.css.
