UserChrome.css: Difference between revisions

From MozillaZine Knowledge Base
Jump to navigationJump to search
(fix link)
(20 intermediate revisions by 5 users not shown)
Line 1: Line 1:
{{profile-file|filename=userChrome.css}}
{{profile-file|filename=chrome/userChrome.css}}
userChrome.css in the [[Profile_folder#Folders|chrome folder]] is a [[CSS]] file that can be used to change the way Mozilla applications' interfaces look. This file does not exist in a new profile; it can be created manually.
userChrome.css in the [[Profile_folder#Folders|chrome folder]] is a [[General concepts#CSS |CSS]] file that can be used to change the way Mozilla applications' interfaces look. This file does not exist in a new profile. You can create it manually. If you just want to move/remove/rename menus and menu items or change/disable shortcuts use the  [https://addons.mozilla.org/en-US/thunderbird/addon/s3menu-wizard/ Menu Wizard] add-on instead.
 
==Creating==
To create this file, use your operating system tools.
 
Go to your [[profile folder]].  Then go to the <tt>chrome</tt> folder there, creating it if necessary.  In the <tt>chrome</tt> folder, create a plain text file named <tt>userChrome.css</tt>. Copy and paste the following line as the first line of the file (if it doesn't already exist). This is called the namespace line and you must not alter it. Anything you add later on should always be below it
 
''@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");''
 
'''Notes:&nbsp;'''
*If you have more than one profile, then each of your profiles has a separate userChrome.css file.
*There is another <tt>chrome</tt> folder where Thunderbird's code is installed.  Do not create a userChrome.css file there&mdash;it will not work.


==Editing==
==Editing==
This file is designed to be manually edited using a text editor. Anything valid in a [[CSS]] file is valid in this file. The application must be restarted for changes to take effect (to get around this, you could use the [https://addons.mozilla.org/extensions/moreinfo.php?id=2108 Stylish extension]). For sample styles, see:
This file is designed to be manually [[Editing configuration | edited]] using a text editor. Anything valid in a CSS file is valid in this file. To make the changes take effect, you must restart the application.
 
For Mini Tutorial (old) see Section 4 here -
 
[http://forums.mozillazine.org/viewtopic.php?p=3519925#p3519925]
 
For sample styles, see:
* [http://userstyles.org userstyles.org]
* [http://userstyles.org userstyles.org]
* [http://www.mozilla.org/support/firefox/tips#appearance Firefox Help: Tips & Tricks: Browser Appearance]
* [http://www.mozilla.org/support/firefox/tips#appearance Firefox Help: Tips & Tricks: Browser Appearance]
* [[:Category:Visual customizations (Firefox)]]
* [[:Category:Visual customizations (Firefox)]]
* [[:Category:Visual_customizations (Thunderbird)]]
* [[Dialog too small or too large]]


==Moving==
==Moving and copying==
This file can be moved to a different profile. If it contains imports or references to other files such as images, these files should be moved along with it.
You can move or copy userChrome.css to a different profile. If it imports or references other files such as images, then you must also move or copy these other files. To make the changes take effect, you must restart the application.


==Deleting==
==Deleting==
Deleting userChrome.css will get rid of any user styles defined upon restart.
You can delete userChrome.css to get rid of any user styles defined there. To make the change take effect, you must restart the application.
 
==Troubleshooting==
For some information about common problems, see: [[Editing configuration#Troubleshooting | Editing configuration &ndash; Troubleshooting]]


==Related files and folders==
==Related files and folders==
Line 18: Line 40:
* [[userContent.css]]
* [[userContent.css]]
* [[userContent-example.css]]
* [[userContent-example.css]]
* [[userChrome.js]]


==See also==
==See also==
* [[Pane and menu fonts]]
* [[Chrome element names and IDs]]
* [[Chrome element names and IDs]]
* [[Editing configuration]]


==External links==
==External links==
* The [https://addons.mozilla.org/extensions/moreinfo.php?id=17 ChromEdit] extension provides a convenient way of editing the configuration files described in this article.
* The [[ChromEdit]] extension provides a convenient way of editing userChrome.css and other configuration files.
* The [https://addons.mozilla.org/en-US/thunderbird/addon/stylish/?src=search Stylish extension] provides another way of changing styles in web pages and e-mails.  It does not use the userChrome.css file.
* [http://web.archive.org/web/20130514044536/http://honestlyillustrated.com/userstyles/firefox-stylish-tutorial/ Customize your web stylishly] provides a tutorial on using CSS and Stylish.
* The [https://addons.mozilla.org/en-US/thunderbird/addon/6622/ DOM Inspector], [https://addons.mozilla.org/en-US/thunderbird/addon/dom-inspector-dm/?src=search DOM Inspector Plus], [https://addons.mozilla.org/en-US/thunderbird/addon/63/ InspectorWidget] add-ons and the CSS Selector tweak in the obsolete [http://mailtweak.mozdev.org/ MailTweak] add-on are useful tools to identify the window elements.


[[Category:Configuration]]
[[Category:Configuration]]
Line 29: Line 57:
[[Category:Profile contents (Thunderbird)]]
[[Category:Profile contents (Thunderbird)]]
[[Category:Profile contents (Mozilla Suite)]]
[[Category:Profile contents (Mozilla Suite)]]
[[Category:Visual customizations (Thunderbird)]]

Revision as of 21:19, 25 February 2017

userChrome.css in the chrome folder is a CSS file that can be used to change the way Mozilla applications' interfaces look. This file does not exist in a new profile. You can create it manually. If you just want to move/remove/rename menus and menu items or change/disable shortcuts use the Menu Wizard add-on instead.

Creating

To create this file, use your operating system tools.

Go to your profile folder. Then go to the chrome folder there, creating it if necessary. In the chrome folder, create a plain text file named userChrome.css. Copy and paste the following line as the first line of the file (if it doesn't already exist). This is called the namespace line and you must not alter it. Anything you add later on should always be below it

@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");

Notes: 

  • If you have more than one profile, then each of your profiles has a separate userChrome.css file.
  • There is another chrome folder where Thunderbird's code is installed. Do not create a userChrome.css file there—it will not work.

Editing

This file is designed to be manually edited using a text editor. Anything valid in a CSS file is valid in this file. To make the changes take effect, you must restart the application.

For Mini Tutorial (old) see Section 4 here -

[1]

For sample styles, see:

Moving and copying

You can move or copy userChrome.css to a different profile. If it imports or references other files such as images, then you must also move or copy these other files. To make the changes take effect, you must restart the application.

Deleting

You can delete userChrome.css to get rid of any user styles defined there. To make the change take effect, you must restart the application.

Troubleshooting

For some information about common problems, see: Editing configuration – Troubleshooting

Related files and folders

See also

External links