Chrome element names and IDs: Difference between revisions
From MozillaZine Knowledge Base
Jump to navigationJump to search
No edit summary |
(Removed and replaced broken links) |
||
(4 intermediate revisions by 3 users not shown) | |||
Line 1: | Line 1: | ||
When editing [[ | When editing [[userChrome.css]], you must add CSS selectors based on the element names and IDs/classes of the XUL user interface. There is no comprehensive listing of every single possible selector to use when styling the user interface (just as it would be silly to create such a comprehensive list for a web page), but a few of the more common and interesting selectors are listed below. | ||
The best way to discover how to select an element in the user interface is to use the [[DOM Inspector]]. | The best way to discover how to select an element in the user interface is to use the [[DOM Inspector]]. | ||
Line 10: | Line 10: | ||
| <code>menubar > menu</code> | | <code>menubar > menu</code> | ||
| Every menu on the menubar (File, Edit, etc) | | Every menu on the menubar (File, Edit, etc) | ||
|- | |||
| <code>#toolbar-menubar</code> | |||
| The entire top toolbar | |||
|- | |- | ||
| <code>tab</code> | | <code>tab</code> | ||
Line 16: | Line 19: | ||
| <code>#urlbar</code> | | <code>#urlbar</code> | ||
| [[:Category:Location Bar|Location Bar]] | | [[:Category:Location Bar|Location Bar]] | ||
|- | |||
| <code>#searchbar</code> | |||
| [[Search Bar|Search Bar]] | |||
|- | |||
| <code>#find-field-container</code> | |||
| Find Bar | |||
|- | |- | ||
| <code>#throbber</code> | | <code>#throbber</code> | ||
Line 179: | Line 188: | ||
|} | |} | ||
== External links == | == External links == | ||
* [http://www.mozilla.org/support/firefox/tips | * [http://wayback.archive.org/web/20080131185141/http://www.mozilla.org/support/firefox/tips Firefox Help: Tips & Tricks - Browser Appearance via Internet Archive] | ||
* [ | * [https://developer.mozilla.org/en-US/docs/DOM_Inspector/Introduction_to_DOM_Inspector Introduction to the DOM Inspector] | ||
* [http:// | * [http://wayback.archive.org/web/20090708050548/http://forum.addonsmirror.net/index.php?showtopic=96 userChrome.css - Remove (Thread at Addons Mirror via Internet Archive)] | ||
* [http:// | * [http://wayback.archive.org/web/20110926150548/http://forum.addonsmirror.net/index.php?showtopic=2872 userChrome.css - Skins (Thread at Addons Mirror via Internet Archive)] | ||
[[Category:Configuration]] | [[Category:Configuration]] | ||
[[Category:Development]] | [[Category:Development]] | ||
[[Category:Configuration (Thunderbird)]] | [[Category:Configuration (Thunderbird)]] |
Latest revision as of 05:17, 13 November 2013
When editing userChrome.css, you must add CSS selectors based on the element names and IDs/classes of the XUL user interface. There is no comprehensive listing of every single possible selector to use when styling the user interface (just as it would be silly to create such a comprehensive list for a web page), but a few of the more common and interesting selectors are listed below.
The best way to discover how to select an element in the user interface is to use the DOM Inspector.
Main Firefox UI elements
Selector | Description |
---|---|
menubar > menu
|
Every menu on the menubar (File, Edit, etc) |
#toolbar-menubar
|
The entire top toolbar |
tab
|
Tabs (browser tabs as well as tabs in dialogs) |
#urlbar
|
Location Bar |
#searchbar
|
Search Bar |
#find-field-container
|
Find Bar |
#throbber
|
Activity indicator (throbber) |
#bookmarks-menu
|
Bookmarks menu |
Selector | Description |
---|---|
#context-openlink
|
Open Link in New Window |
#context-openlinkintab
|
Open Link in New Tab |
#context-sep-open
|
line separator |
#context-bookmarklink
|
Bookmark This Link... |
#context-savelink
|
Save Link As... |
#context-sendlink
|
Send Link... |
#context-copyemail
|
Copy Email Address |
#context-copylink
|
Copy Link Location |
#context-sep-copylink
|
line separator |
#context-viewimage
|
View Image |
#context-copyimage-contents
|
Copy Image |
#context-copyimage
|
Copy Image Location |
#context-sep-copyimage
|
line separator |
#context-saveimage
|
Save Image As... |
#context-sendimage
|
Send Image... |
#context-setWallpaper
|
Set As Wallpaper... |
#context-setDesktopBackground
|
Set As Desktop Background... |
#context-blockimage
|
Block Images from... |
#context-back
|
Back |
#context-forward
|
Forward |
#context-reload
|
Reload |
#context-stop
|
Stop |
#context-sep-stop
|
line separator |
#context-bookmarkpage
|
Bookmark This Page... |
#context-savepage
|
Save Page As... |
#context-sendpage
|
Send Page... |
#context-sep-viewbgimage
|
line separator |
#context-viewbgimage
|
View Background Image |
#context-undo
|
Undo |
#context-sep-undo
|
line separator |
#context-cut
|
Cut |
#context-copy
|
Copy |
#context-paste
|
Paste |
#context-delete
|
Delete |
#context-sep-paste
|
line separator |
#context-selectall
|
Select All |
#context-sep-selectall
|
line separator |
#context-keywordfield
|
Add a Keyword for this Search... |
#context-searchselect
|
Search Web for ... |
#frame-sep
|
line separator |
#frame
|
This Frame |
#context-sep-properties
|
line separator |
#context-viewpartialsource-selection
|
View Selection Source |
#context-viewpartialsource-mathml
|
View MathML Source |
#context-viewsource
|
View Page Source |
#context-viewinfo
|
View Page Info |
#context-metadata
|
Properties |
#context-sep-bidi
|
line separator |
#context-bidi-text-direction-toggle
|
Switch Text Direction |
#context-bidi-page-direction-toggle
|
Switch Page Direction |