UserChrome.css and userContent.css: Difference between revisions

From MozillaZine Knowledge Base
Jump to navigationJump to search
m (slight reorder)
(change to a redirect)
 
(3 intermediate revisions by 3 users not shown)
Line 1: Line 1:
{{wrongtitle|title=userChrome.css and userContent.css}}
* [[userChrome.css]]
 
* [[userContent.css]]
== Overview ==
[[Category: Redirects]]
 
'''"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 "<tt>chrome</tt>" subfolder in your [[profile folder]]. They don't exist by default&mdash;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. If these do not exist, you can simply create a new plain-text file and name it "userChrome.css" or "userContent.css". In version 1.5 of Firefox and Thunderbird, even the <tt>chrome</tt> subfolder itself might not exist; if so, create it yourself.
 
The [https://addons.mozilla.org/extensions/moreinfo.php?id=17 ChromEdit] extension provides a convenient way of creating and editing these configuration files without the need to locate the profile folder.
 
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.
 
== 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 [http://www.mozilla.org/support/firefox/tips#appearance 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 ===
* [[Changing Firefox windows back to classic mode]]
* [[Change the style of tab markers]]
* [[Disabling autocomplete (Firefox)]]
* [[Move the tab bar (Firefox)]]
* [[Multiple row bookmark toolbar]]
 
== userContent.css ==
 
The W3C says that [http://www.w3.org/TR/WAI-USERAGENT/guidelines.html#tech-select-style-sheets 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 [http://www.mozilla.org/support/firefox/tips#layout these tips on changing web page layout.]
 
In Mozilla Mail and Mozilla Thunderbird, userContent.css applies to messages you view&mdash;whether HTML-formatted or not.
 
=== Examples ===
* [[Quote bars]]
* [[Signature display color]]
 
== See also ==
* [[Chrome element names and IDs|Chrome element names and IDs]]
 
== External links ==
* [http://www.mozilla.org/support/firefox/edit#user Editing Configuration Files] at Firefox Help
* [http://www.mozilla.org/support/thunderbird/edit#user Editing Configuration Files] at Thunderbird Help
* [http://www.mozilla.org/support/firefox/tips#appearance Firefox Help: Tips & Tricks - Browser 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.extensionsmirror.nl/index.php?showforum=8 The Extensions Mirror Config Guide] [http://www.extensionsmirror.nl/lofiversion/index.php/f8.html Lofi version]
 
[[Category:Configuration]]

Latest revision as of 19:12, 22 February 2006