Editing configuration
Mozilla applications are highly customizable, and there are a number of standard ways to change their appearance and behaviour. Basic settings can be changed using the application's dialog boxes. The main Options or Preferences dialogs can be reached from the "Tools" or "Edit" menus. (See menu differences in Windows, Linux, and Mac.)
Modifying preferences—adding, removing and setting
To make more advanced changes to the application’s behaviour—in particular, if you have been instructed to “set a preference”—you should either edit the user.js file, or use the about:config interface. Note that whilst it is often quicker to use about:config, editing the "user.js" file has the advantage of portability: your preferences will never be overridden, and they can be transferred to a different profile, or backed up for safe keeping.
Modifying appearance
To modify the way in which Web pages and e-mails are displayed, you should edit the userContent.css file. To modify the appearance of the application itself, you should edit the userChrome.css file.
Editor settings
To edit configuration files, you might need to check your text editor's settings so that your editor saves files using the correct file type and character encoding.
File type
Ensure that your editor saves plain text files.
Some editors can only save plain text files. These editors have no setting for the type of file.
Some editors can save various types of file. In this case, ensure that your editor saves configuration files as plain text.
Some editors recognize file names ending in .css and .js as CSS and JavaScript files respectively. These editors automatically save these files as plain text.
Character encoding
Configuration files use the UTF-8 character encoding (also known as character set or charset), but you do not always need to use a text editor that supports UTF-8.
For most purposes you only need to use basic English letters and symbols (ASCII) in your configuration files. In these cases, you can use almost any character encoding except Unicode. If your text editor does not have any setting for character encoding, then you can probably use it for ASCII characters.
For some purposes you need to type accents or other characters that are not ASCII. If your text editor is set to use UTF-8, then simply type the characters that you need.
If your editor does not support UTF-8, or if you cannot type the special characters that you need, then encode each special character using its hexadecimal Unicode representation. In .css files, use a backslash followed by hexadecimal digits. In .js files, use \u followed by exactly four hexadecimal digits.
For example, you can encode an information sign followed by a non-breaking space like this:
In userContent.css:
:link:before {content: "\2139\a0";}
In user.js:
user_pref("mailnews.reply_header_ondate", "\u2139\u00a0 On %s");
Checking your editor
To check your text editor, create a plain text file named test.txt. In the file, type some of the accents and special characters that you need. Save the file somewhere on your computer.
Open the file in your web browser. For example, in Firefox choose File – Open File... and select the file, or drag the file's icon and drop it in Firefox.
Set your browser's character encoding to UTF-8. For example, in Firefox choose View – Character Encoding – Unicode (UTF-8). Check that your browser displays the file correctly with this setting.
Troubleshooting
If you make changes to a configuration file but the changes seem to have no effect, here are some common causes that you can check:
- You edited the wrong file, or created the file in the wrong place.
- The file contains errors.
- CSS rules are being overridden by other rules.
Check that you found the profile that is actually being used by the application, not some other profile, and not the application's installation directory.
Check that CSS files are in the chrome directory in the profile, not in the profile directory itself.
If you found the preference settings or CSS rules or on a web page, copy and paste from the web page to avoid typing errors.
If you have to edit the content, ensure that you preserve the correct punctuation.
Check that the font in your text editor makes it easy for you to see the difference between parentheses (), square brackets [] and curly braces {}, and between colon : and semicolon ;.
In the application, choose Tools – JavaScript Console... (or Tools – Web Development – JavaScript Console...) to see error messages.
Note: The JavaScript console does not always show errors relating to preference settings.. In recent versions of some Mozilla applications, it does show CSS errors.
Try adding !important to any CSS rule that has no effect. Add it just before the semicolon at the end of the rule.
If you are using a theme that you installed, try the CSS rules with the application's default theme.
External links
- The ChromEdit extension provides a convenient way of editing configuration files.
At the time of writing (May 2006) ChromeEdit is not officially available for current versions of Mozilla aapplications, but an unofficial updated version is available.
- The Stylish extension provides another way to change styles. It does not use userContent.css or userChrome.css, and changes take effect without restarting the application.
- Extensions and themes provide many additional features and allow you to change the way your application looks.
- Editing Configuration Files at Firefox Help
- Editing Configuration Files at Thunderbird Help
