Chrome element names and IDs: Difference between revisions

From MozillaZine Knowledge Base
Jump to navigationJump to search
(→‎Firefox menus: added ''"Set As Desktop Background..."'')
(Removed and replaced broken links)
 
(10 intermediate revisions by 8 users not shown)
Line 1: Line 1:
{{cleanup}}
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.


A relatively easy way to learn what is the tag name/class/id for given element, is to use [[DOM Inspector]].
The best way to discover how to select an element in the user interface is to use the [[DOM Inspector]].


{| rules="all" cellpadding="3" border="1"
== Main Firefox UI elements ==
! Element Name/ID
{| {{prettytable}}
! Explanation
! Selector
! Description
|-
|-
| menubar > menu || Accesses every menu on the menubar (File, Edit, etc).
| <code>menubar > menu</code>
| Every menu on the menubar (File, Edit, etc)
|-
|-
| tab || Accesses tabs.
| <code>#toolbar-menubar</code>
| The entire top toolbar
|-
|-
| #urlbar || Accesses url/address bar.
| <code>tab</code>
| Tabs (browser tabs as well as tabs in dialogs)
|-
|-
| #throbber || Accesses throbber.
| <code>#urlbar</code>
| [[:Category:Location Bar|Location Bar]]
|-
|-
| #bookmarks-menu || Bookmarks menu.
| <code>#searchbar</code>
| [[Search Bar|Search Bar]]
|-
| <code>#find-field-container</code>
| Find Bar
|-
| <code>#throbber</code>
| Activity indicator (throbber)
|-
| <code>#bookmarks-menu</code>
| Bookmarks menu
|}
|}


 
==Firefox context menus==
==Firefox menus==
{| {{prettytable}}
{| border cellspacing="0" cellpadding="5"
! Selector !! Description
! #id !! label
|-
|-
| #context-openlink
| <code>#context-openlink</code>
| Open Link in New Window
| Open Link in New Window
|-
|-
| #context-openlinkintab
| <code>#context-openlinkintab</code>
| Open Link in New Tab
| Open Link in New Tab
|-
|-
| #context-sep-open
| <code>#context-sep-open</code>
| align="center" | ''line separator''
| align="center" | ''line separator''
|-
|-
| #context-bookmarklink
| <code>#context-bookmarklink</code>
| Bookmark This Link...
| Bookmark This Link...
|-
|-
| #context-savelink
| <code>#context-savelink</code>
| Save Link As...
| Save Link As...
|-
|-
| #context-sendlink
| <code>#context-sendlink</code>
| Send Link...
| Send Link...
|-
|-
| #context-copyemail
| <code>#context-copyemail</code>
| Copy Email Address
| Copy Email Address
|-
|-
| #context-copylink
| <code>#context-copylink</code>
| Copy Link Location
| Copy Link Location
|-
|-
| #context-sep-copylink
| <code>#context-sep-copylink</code>
| align="center" | ''line separator''
| align="center" | ''line separator''
|-
|-
| #context-viewimage
| <code>#context-viewimage</code>
| View Image
| View Image
|-
|-
| #context-copyimage-contents
| <code>#context-copyimage-contents</code>
| Copy Image
| Copy Image
|-
|-
| #context-copyimage
| <code>#context-copyimage</code>
| Copy Image Location
| Copy Image Location
|-
|-
| #context-sep-copyimage
| <code>#context-sep-copyimage</code>
| align="center" | ''line separator''
| align="center" | ''line separator''
|-
|-
| #context-saveimage
| <code>#context-saveimage</code>
| Save Image As...
| Save Image As...
|-
|-
| #context-sendimage
| <code>#context-sendimage</code>
| Send Image...
| Send Image...
|-
|-
| #context-setWallpaper
| <code>#context-setWallpaper</code>
| Set As Wallpaper...
| Set As Wallpaper...
|-
|-
| #context-setDesktopBackground
| <code>#context-setDesktopBackground</code>
| Set As Desktop Background...  
| Set As Desktop Background...  
|-
|-
| #context-blockimage
| <code>#context-blockimage</code>
| Block Images from...
| Block Images from...
|-
|-
| #context-back
| <code>#context-back</code>
| Back
| Back
|-
|-
| #context-forward
| <code>#context-forward</code>
| Forward
| Forward
|-
|-
| #context-reload
| <code>#context-reload</code>
| Reload
| Reload
|-
|-
| #context-stop
| <code>#context-stop</code>
| Stop
| Stop
|-
|-
| #context-sep-stop
| <code>#context-sep-stop</code>
| align="center" | ''line separator''
| align="center" | ''line separator''
|-
|-
| #context-bookmarkpage
| <code>#context-bookmarkpage</code>
| Bookmark This Page...
| Bookmark This Page...
|-
|-
| #context-savepage
| <code>#context-savepage</code>
| Save Page As...
| Save Page As...
|-
|-
| #context-sendpage
| <code>#context-sendpage</code>
| Send Page...
| Send Page...
|-
|-
| #context-sep-viewbgimage
| <code>#context-sep-viewbgimage</code>
| align="center" | ''line separator''
| align="center" | ''line separator''
|-
|-
| #context-viewbgimage
| <code>#context-viewbgimage</code>
| View Background Image
| View Background Image
|-
|-
| #context-undo
| <code>#context-undo</code>
| Undo
| Undo
|-
|-
| #context-sep-undo
| <code>#context-sep-undo</code>
| align="center" | ''line separator''
| align="center" | ''line separator''
|-
|-
| #context-cut
| <code>#context-cut</code>
| Cut
| Cut
|-
|-
| #context-copy
| <code>#context-copy</code>
| Copy
| Copy
|-
|-
| #context-paste
| <code>#context-paste</code>
| Paste
| Paste
|-
|-
| #context-delete
| <code>#context-delete</code>
| Delete
| Delete
|-
|-
| #context-sep-paste
| <code>#context-sep-paste</code>
| align="center" | ''line separator''
| align="center" | ''line separator''
|-
|-
| #context-selectall
| <code>#context-selectall</code>
| Select All
| Select All
|-
|-
| #context-sep-selectall
| <code>#context-sep-selectall</code>
| align="center" | ''line separator''
| align="center" | ''line separator''
|-
|-
| #context-keywordfield
| <code>#context-keywordfield</code>
| Add a Keyword for this Search...
| Add a Keyword for this Search...
|-
|-
| #context-searchselect
| <code>#context-searchselect</code>
| Search Web for ...
| Search Web for ...
|-
|-
| #frame-sep
| <code>#frame-sep</code>
| align="center" | ''line separator''
| align="center" | ''line separator''
|-
|-
| #frame
| <code>#frame</code>
| This Frame
| This Frame
|-
|-
| #context-sep-properties
| <code>#context-sep-properties</code>
| align="center" | ''line separator''
| align="center" | ''line separator''
|-
|-
| #context-viewpartialsource-selection
| <code>#context-viewpartialsource-selection</code>
| View Selection Source
| View Selection Source
|-
|-
| #context-viewpartialsource-mathml
| <code>#context-viewpartialsource-mathml</code>
| View MathML Source
| View MathML Source
|-
|-
| #context-viewsource
| <code>#context-viewsource</code>
| View Page Source
| View Page Source
|-
|-
| #context-viewinfo
| <code>#context-viewinfo</code>
| View Page Info
| View Page Info
|-
|-
| #context-metadata
| <code>#context-metadata</code>
| Properties
| Properties
|-
|-
| #context-sep-bidi
| <code>#context-sep-bidi</code>
| align="center" | ''line separator''
| align="center" | ''line separator''
|-
|-
| #context-bidi-text-direction-toggle
| <code>#context-bidi-text-direction-toggle</code>
| Switch Text Direction
| Switch Text Direction
|-
|-
| #context-bidi-page-direction-toggle
| <code>#context-bidi-page-direction-toggle</code>
| Switch Page Direction
| Switch Page Direction
|}
|}
== External links ==
* [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://wayback.archive.org/web/20090708050548/http://forum.addonsmirror.net/index.php?showtopic=96 userChrome.css - Remove (Thread at Addons  Mirror via Internet Archive)]
* [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:Development]]
[[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

Firefox context menus

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


External links