MozillaZine

UserChrome.css and userContent.css

From MozillaZine Knowledge Base

(Difference between revisions)
Revision as of 19:50, 12 September 2005
Unarmed (Talk | contribs)
(updated link)
<-- Previous diff
Revision as of 14:56, 19 September 2005
Asqueella (Talk | contribs)
(category)
Next diff -->
Line 47: Line 47:
* [http://www.mozilla.org/support/firefox/tips#layout Firefox Help: Tips & Tricks - Web Page Appearance] * [http://www.mozilla.org/support/firefox/tips#layout Firefox Help: Tips & Tricks - Web Page Appearance]
* [http://www.w3.org/TR/WAI-USERAGENT/ User Agent Accessibility Guidelines 1.0] * [http://www.w3.org/TR/WAI-USERAGENT/ User Agent Accessibility Guidelines 1.0]
 +
 +[[Category:Configuration]]

Revision as of 14:56, 19 September 2005

Contents

Overview

"userChrome.css" and "userContent.css" are CSS files that can be used to tweak the user interface and styling of web pages in Mozilla-based applications, like Firefox, Thunderbird, Mozilla Suite, Nvu etc.

These files must be located in "chrome" subfolder in your profile folder. They don't exist by default—you must create them. There usually are two example files, "userChrome-example.css" and "userContent-example.css", in the same folder; you may just rename them.

userChrome.css and userContent.css are read on application startup only, so for any changes in those files to take effect, you have to restart the application.

The ChromEdit extension can be used to easily edit these files and also user.js without the need to find the profile folder.

userChrome.css

Most Mozilla applications (Firefox, Thunderbird, Mozilla Suite, etc.) use XUL to create their user interfaces. XUL is an XML language that bears many similarities to HTML. Perhaps the most important of these similarities is that XUL uses CSS to describe its appearance. If you've ever styled an HTML page using CSS, then you know enough to apply CSS to the user interface of a XUL application.

userChrome.css allows you to override the specified styles for the user interface. This is extremely powerful: it lets you do everything from changing fonts, colors, and borders, to altering the positions in which elements are displayed, to deciding whether the elements are displayed at all. For examples of what you can do, see these tips on changing the browser's appearance.

When you want to target a specific portion of the user interface from userChrome.css, the DOM Inspector is the tool you'll find most useful.

Examples

userContent.css

The W3C says that accessible web browsers should allow for "user stylesheets" to override the CSS on web pages. Mozilla applications implement this feature via userContent.css.

Any CSS rules added to userContent.css are added to the pages you visit in the browser. This allows you to override page styles and do a number of interesting things: changing your cursor, removing annoying web page features, resizing text, repositioning content, or even blocking ads. For examples of what you can do, see these tips on changing web page layout.

In Mozilla Mail and Mozilla Thunderbird, userContent.css applies to messages you view—whether HTML-formatted or not.

Examples

See also

External links