MozillaZine

Menu customization

From MozillaZine Knowledge Base

(Difference between revisions)
Revision as of 01:04, 2 February 2005
LouCypher (Talk | contribs)
(Using Label)
<-- Previous diff
Revision as of 12:42, 7 April 2005
Asqueella (Talk | contribs)
(overhaul)
Next diff -->
Line 1: Line 1:
-See also: [http://menueditor.mozdev.org/ Menu Editor] extension. It allows you hide the menu items as well as reorder them.+There are three ways to tweak menus of your XUL-based application, like Mozilla Suite, Thunderbird or Firefox.
-First you need to locate your [[Profile Folder | profile folder]]. There's a subfolder called "chrome". What you need to do is edit the userChrome.css file. Create it if it does not exists.+==Menu Editor Extension==
 +If you use Firefox or Thunderbird, you can install [http://menueditor.mozdev.org/ Menu Editor] extension, which allows you hide the menu items as well as reorder them.
-You can hide any context menu items by adding this line to userChrome.css:+Post your feedback in [http://forums.mozillazine.org/viewtopic.php?t=211920 Menu Editor discussion thread] on MozillaZine forums.
- #id1, #id2 { display:none !important; }+
-replacing each of the identifiers #id1, #id2, ... with one of the following:+
-{| border cellspacing="0" cellpadding="5"+==Tweaking userChrome.css==
-! #id !! label+If you don't want to install Menu Editor, you can tweak your menus using [[userChrome.css]]. First locate your [[profile folder]]. There's a subfolder called "chrome". What you need to do is edit the "userChrome.css" file (create it if it does not exists).
-|-+ 
-| #context-openlink+===Using ID selectors===
-| Open Link in New Window+Add a line like this to hide any menu item:
-|-+ #id1, #id2 { display:none !important; }
-| #context-openlinkintab+replacing each of the identifiers #id1, #id2, ... with one of the selectors from [[UserChrome.css Element Names/IDs#Firefox menus]].
-| Open Link in New Tab+
-|-+
-| #context-sep-open+
-| align="center" | ''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+
-| align="center" | ''line separator''+
-|-+
-| #context-viewimage+
-| View Image+
-|-+
-| #context-copyimage-contents+
-| Copy Image+
-|-+
-| #context-copyimage+
-| Copy Image Location+
-|-+
-| #context-sep-copyimage+
-| align="center" | ''line separator''+
-|-+
-| #context-saveimage+
-| Save Image As...+
-|-+
-| #context-sendimage+
-| Send Image...+
-|-+
-| #context-setWallpaper+
-| Set As Wallpaper...+
-|-+
-| #context-blockimage+
-| Block Images from...+
-|-+
-| #context-back+
-| Back+
-|-+
-| #context-forward+
-| Forward+
-|-+
-| #context-reload+
-| Reload+
-|-+
-| #context-stop+
-| Stop+
-|-+
-| #context-sep-stop+
-| align="center" | ''line separator''+
-|-+
-| #context-bookmarkpage+
-| Bookmark This Page...+
-|-+
-| #context-savepage+
-| Save Page As...+
-|-+
-| #context-sendpage+
-| Send Page...+
-|-+
-| #context-sep-viewbgimage+
-| align="center" | ''line separator''+
-|-+
-| #context-viewbgimage+
-| View Background Image+
-|-+
-| #context-undo+
-| Undo+
-|-+
-| #context-sep-undo+
-| align="center" | ''line separator''+
-|-+
-| #context-cut+
-| Cut+
-|-+
-| #context-copy+
-| Copy+
-|-+
-| #context-paste+
-| Paste+
-|-+
-| #context-delete+
-| Delete+
-|-+
-| #context-sep-paste+
-| align="center" | ''line separator''+
-|-+
-| #context-selectall+
-| Select All+
-|-+
-| #context-sep-selectall+
-| align="center" | ''line separator''+
-|-+
-| #context-keywordfield+
-| Add a Keyword for this Search...+
-|-+
-| #context-searchselect+
-| Search Web for ...+
-|-+
-| #frame-sep+
-| align="center" | ''line separator''+
-|-+
-| #frame+
-| This Frame+
-|-+
-| #context-sep-properties+
-| align="center" | ''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+
-| align="center" | ''line separator''+
-|-+
-| #context-bidi-text-direction-toggle+
-| Switch Text Direction+
-|-+
-| #context-bidi-page-direction-toggle+
-| Switch Page Direction+
-|}+
Example (hides the "View Background" menu item and the horizontal line after it): Example (hides the "View Background" menu item and the horizontal line after it):
Line 164: Line 20:
} }
-==Using Label==+===Using attribute selectors===
-The easiest way to change the style of a menu item is using the '''''Label''''' property.+Another way to change the style of a menu item is to use the '''label''' attribute selector.
-For example, if you want to hide the "Close Tab" menu item on the tab context menu:+For example, if you want to hide the "Close Tab" menu item on the tab bar context menu:
menuitem[label="Close Tab"] { menuitem[label="Close Tab"] {
display: none !important; display: none !important;
Line 176: Line 32:
text-decoration: line-through !important; text-decoration: line-through !important;
} }
 +
 +==Hacking program files==
 +TBD.

Revision as of 12:42, 7 April 2005

There are three ways to tweak menus of your XUL-based application, like Mozilla Suite, Thunderbird or Firefox.

Contents

Menu Editor Extension

If you use Firefox or Thunderbird, you can install Menu Editor extension, which allows you hide the menu items as well as reorder them.

Post your feedback in Menu Editor discussion thread on MozillaZine forums.

Tweaking userChrome.css

If you don't want to install Menu Editor, you can tweak your menus using userChrome.css. First locate your profile folder. There's a subfolder called "chrome". What you need to do is edit the "userChrome.css" file (create it if it does not exists).

Using ID selectors

Add a line like this to hide any menu item:

#id1, #id2 { display:none !important; }

replacing each of the identifiers #id1, #id2, ... with one of the selectors from UserChrome.css Element Names/IDs#Firefox menus.

Example (hides the "View Background" menu item and the horizontal line after it):

#context-viewbgimage,
#context-sep-viewbgimage {
  display: none !important;
}

Using attribute selectors

Another way to change the style of a menu item is to use the label attribute selector.

For example, if you want to hide the "Close Tab" menu item on the tab bar context menu:

menuitem[label="Close Tab"] {
    display: none !important;
}

or if you want to change the "For Internet Explorer Users" appearance on the "Help" menu:

menuitem[label="For Internet Explorer Users"] {
    text-decoration: line-through !important;
}

Hacking program files

TBD.