File:  [mozdev] / journal / www / mailtweak-css.html
Revision 1.1: download - view: text, annotated - select for diffs - revision graph
Fri Jan 11 20:49:06 2008 UTC (12 years, 4 months ago) by whiteley
Branches: MAIN
CVS tags: HEAD
Mail Tweak 0.12

    1: <style type="text/css">
    2: .mailtweak-pref td:first-child {font-family: monospace; width: 24em;}
    3: pre {background-color:#f4f4f4; border: 1px dashed #68f; padding: 2px; margin-left: 1em;}
    4: </style>
    6: <h2>
    7: <img src="mailtweak-icon.png" style="border:none; vertical-align:middle; margin-right:10px;" width="48" height="48">
    8: Mail Tweak CSS tweaks
    9: </h2>
   11: <p>This page documents the two <a href="mailtweak.html">Mail Tweak</a> tweaks that are related to CSS files.
   12: The tweaks are: CSS selector and Folder icons.
   13: You can use these tweaks together or separately.</p>
   15: <p>
   16: CSS files customize the appearance of Thunderbird's user interface.
   17: To use them, you need some knowledge of CSS.
   18: Mozilla's CSS tutorial is here: <a href="">CSS:Getting Started</a>
   19: You can also find many other CSS tutorials by searching the Internet.
   20: The CSS used in Mozilla user interfaces is mostly the same as the CSS
   21: used in web pages.
   22: </p>
   24: <p>For information about the CSS files that you can use to customize Thunderbird, see:
   25: <a href="">userChrome.css</a> and
   26: <a href="">userContent.css</a>.
   27: </p>
   30: <h3 id="css-selector" style="border-bottom: 1px solid #900">CSS Selector tweak</h3>
   31: <p>
   32: The CSS Selector tweak is designed to help you find selectors that apply in Thunderbird's
   33: user interface. To use it, first enable the tweak in Mail Tweak's Options dialog, in the normal way.
   34: </p>
   36: <p>
   37: In any Mail &amp; Newsgroups window, choose: Tools &ndash; CSS Selector &nbsp;
   38: Mail Tweak opens the CSS Selector dialog.
   39: </p>
   41: <p>Now Shift+Click an element in Thunderbird's user interface that you want to
   42: customize.
   43: The CSS Selector dialog shows you possible selectors for the element, along
   44: with other information.</p>
   46: <p><b>Note:&nbsp; </b>Shift+Click might also perform an action in Thunderbird's
   47: user interface.  To prevent this, Shift+Click near the element that you want
   48: to identify, then use the buttons in the CSS Selector dialog to
   49: navigate to the element itself.  Shift+Click has no special
   50: function in the CSS Selector dialog itself.</p>
   52: <p>To navigate to related elements, press the Parent, Child, Previous and Next buttons.
   53: Be careful not to navigate too far, because it is easy to get lost.
   54: To return to the element that you last Shift+Clicked, press the Home button.
   55: </p>
   57: <p>When you Shift+Click an element, or navigate to an element, Mail Tweak highlights
   58: the element with an orange overlay.  It is possible to navigate to elements that are
   59: not displayed, and in this case you cannot see the overlay.
   60: It is also possible to navigate to elements that are displayed but hidden below another
   61: element, and in this case you can see the overlay, even though you cannot see the
   62: element that it relates to.
   63: </p>
   65: <p>To open the appropriate CSS file for the element, press the Open... button.</p>
   67: <p>Some trees (heirarchical lists) are not built from elements.  In this case,
   68: CSS Selector displays the pseudo-elements that make up the tree.
   69: The pseudo-elements represent rows, cells, twisties (for expanding rows in the hierarchy),
   70: images and text.
   71: A pseudo-element may have properties that you can use to modify the selector.
   72: </p>
   74: <p>For a more complete view of the user interface's underlying structure, use the
   75: <a href="">DOM Inspector</a> extension.</p>
   77: <h4 id="choose">Choosing selectors</h4>
   78: <p>Choosing selectors requires either skill and experience, or trial and error,
   79: or some combination of all four.</p>
   81: <p>For customizing the user interface, you often choose a class selector, because
   82: elements with the same class usually have the same function in the user interface.</p>
   84: <p>When you need to identify a particular element, then you usually choose an ID selector.</p>
   86: <p>It is rare that you choose a type selector, because elements with the same type often
   87: have very different functions in the user interface.</p>
   89: <p>Many cases require more complex selectors.  For example, when a particular element that you
   90: want to select has no ID, you might press the Parent button repeatedly until you find a
   91: parent that has an ID. Then, starting from that parent, you can build a selector that
   92: specifies the element you require.</p>
   94: <h4 id="namespaces">Namespaces</h4>
   95: <p>Namespaces distinguish between elements that are different, but have the same type.
   96: For example, the radio element in XUL is different from the radio element in HTML.</p>
   98: <p>However, you almost never need to distinguish between elements in this way in order to 
   99: customize the user interface.
  100: So you can almost always ignore namespaces.
  101: </p>
  103: <h4 id="copying">Copying selectors</h4>
  104: <p>You can copy a selector from the CSS Selector dialog and paste it in the CSS file in your
  105: text editor.
  106: In most cases, the copy function copies what you see in the CSS Selector dialog.
  107: However, in two cases the copy function copies more than you can see in the dialog.
  108: </p>
  110: <p>If you copy a namespace, then you get a complete rule.
  111: For example, if you copy the namespace <tt>xul</tt>, then you get:</p>
  113: <pre>@namespace xul url("");</pre>
  115: <p>You might need to remove or change the name of namespace in your CSS file.</p>
  117: <p>If you copy the properties of a pseudo-element, then you get a space-separated list
  118: in parentheses. For example, if you select the properties <tt>isServer-true</tt> and
  119: <tt>serverType-none</tt>, then you get:</p>
  121: <pre>
  122: (isServer-true serverType-none)
  123: </pre>
  127: <h4 id="sig-example">Example: Signature text</h4>
  129: <p>To change signature text from the default gray to navy, choose: Tools &ndash; CSS Selector &nbsp;</p>
  131: <p>Open a plain text message that has a signature, either in a new window or in the message pane,
  132: hold down the Shift key, and click the signature.</p>
  134: <p>In the CSS Selector dialog, get a context menu for the class (for example, by right-clicking it).
  135: Choose: Copy as CSS</p>
  137: <p>Press the Open... button to open your userContent.css file.</p>
  139: <p>Paste the selector:</p>
  141: <pre>
  142: .moz-txt-sig
  143: </pre>
  145: <p>and complete the rule:</p>
  147: <pre>
  148: .moz-txt-sig {color: navy !important;}
  149: </pre>
  151: <p>Repeat the process for an HTML message, adding the new selector to the rule:</p>
  153: <pre>
  154: .moz-txt-sig, .moz-signature {color: navy !important;}
  155: </pre>
  157: <h4 id="icon-example">Example: Folder view buttons</h4>
  158: <p>To enlarge the icons in the folder view buttons above the folder pane, choose Tools &ndash; CSS Selector,
  159: then Shift+Click one of the buttons.</p>
  161: <p>In the CSS Selector dialog, you see the toolbarbutton element.
  162: Copy its class selector and paste it in your userChrome.css file:</p>
  164: <pre>.folderview-cycler</pre>
  166: <p>Press the Child button to navigate to the image element indoes the button.
  167: Copy its class selector and add it to the selector:</p>
  169: <pre>.folderview-cycler > .toolbarbutton-icon</pre>
  171: <p>Complete the rule:</p>
  173: <pre>.folderview-cycler > .toolbarbutton-icon {width: 12px; height: 12px;}</pre>
  175: <h4 id="local-example">Example: Local folders account</h4>
  176: <p>To highlight your local folders account with a background color, choose Tools &ndash; CSS Selector,
  177: then Shift+Click the account.</p>
  179: <p>In the CSS Selector dialog, you see the pseudo-element: <tt>treechildren::-moz-tree-cell-text</tt>
  181: </p>
  183: <p>Press the Parent button to navigate to the pseudo-element: <tt>treechildren::-moz-tree-cell</tt>
  184:  Copy the pseudo-element type and paste it in your userChrome.css file:</p>
  186: <pre>
  187: treechildren::-moz-tree-cell
  188: </pre>
  190: <p>In the Properties list, select isServer-true and serverType-none.
  191: Copy and paste the modifier in your userChrome.css file:</p>
  193: <pre>
  194: treechildren::-moz-tree-cell(isServer-true serverType-none)
  195: </pre>
  197: <p>Complete the rule:</p>
  199: <pre>
  200: treechildren::-moz-tree-cell(isServer-true serverType-none) {background-color: palegreen;}
  201: </pre>
  203: <h4 id="training-example">Example: Reset Training Data</h4>
  204: <p>To hide the button Reset Training Data, so that you do not reset your junk mail
  205: training data by mistake, choose: Tools &ndash; CSS Selector</p>
  207: <p>Open the main Options or Preferences dialog, go to the Privacy page, and select the
  208: Junk tab.</p>
  210: <p>You do not want to Shift+Click the button itself, so Shift+Click the dialog background
  211: a little to the left of the button.
  212: CSS Selector identities an hbox element.</p>
  214: <p>Press Child and Next to navigate to the button.
  215: Unfortunately, it has no ID that you can use to identify it.</p>
  217: <p>Press the Parent button until you find an element with an ID.
  218: This is a tabbox element. Copy the ID selector and paste it in your userChrome.css file:</p>
  220: <pre>
  221: #privacyPrefs
  222: </pre>
  224: <p>Press Home, Child and Next to return to the button.
  225: Copy and paste any of the attribute selectors:</p>
  227: <pre>
  228: #privacyPrefs [accesskey="D"]
  229: </pre>
  231: <p>Complete the rule:</p>
  233: <pre>
  234: #privacyPrefs [accesskey="D"] {visibility: hidden;}
  235: </pre>
  238: <h3 id="folder-icons" style="border-bottom: 1px solid #900">Folder icons tweak</h3>
  239: <p>
  240: The Folder icons tweak enables CSS style rules for named accounts or folders in the folders pane, 
  241: allowing custom icons and other effects.
  242: </p>
  243: <p>
  244: This tweak is only an enabler. It has no effect by itself. To change the 
  245: appearance of accounts or folders, you must write appropriate CSS style 
  246: rules in your userChrome.css file.
  247: For more information, see: 
  248: <a href="">userChrome.css</a>
  249: </p>
  251: <p>If you also enable the CSS Selector tweak, described above, then you can use it to see the modified
  252: properties of pseudo-elements in the folders tree.
  253: </p>
  256: <p>
  257: <b>Example 1:</b> Here is sample code to color the account named Gmail and
  258: all its folders green:
  259: <pre>
  260: treechildren::-moz-tree-cell-text(folderNameCol, account-Gmail)
  261:   {color: green !important;}
  262: </pre>
  263: </p>
  264: <p>
  265: <b>Example 2:</b> Here is sample code to color only the folder named Finance
  266: in the account named Gmail:
  267: <pre>
  268: treechildren::-moz-tree-cell-text(folderNameCol, account-Gmail, name-Finance)
  269:   {color: red !important;}
  270: </pre>
  271: </p>
  272: <p>
  273: <b>Example 3:</b> Here is sample code to color all the folders named Finance
  274: in every account:
  275: <pre>
  276: treechildren::-moz-tree-cell-text(folderNameCol, name-Finance)
  277:   {color: red !important;}
  278: </pre>
  279: </p>
  280: <p>
  281: <b>Example 4:</b> Here is sample code to change the icon of the account named Gmail.
  282: The icon file is a 16&times;16 pixel image, stored in the same place as userChrome.css.
  283: <pre>
  284: treechildren::-moz-tree-image(folderNameCol, account-Gmail, name-Gmail) {
  285:   list-style-image: url("coin.png") !important;
  286:   -moz-image-region: -moz-initial !important;}
  287: </pre>
  288: </p>
  289: <p>
  290: <b>Example 5:</b> Here is sample code to display a different icon for the account named Gmail
  291: when it has new mail:
  292: <pre>
  293: treechildren::-moz-tree-image(folderNameCol, account-Gmail, name-Gmail, biffState-NewMail) {
  294:   list-style-image: url("coin-new.png") !important;
  295:   -moz-image-region: -moz-initial !important;}
  296: </pre>
  297: </p>
  298: <p>
  299: <b>Example 6:</b> Here is sample code to display a special icon for all the folders
  300: named Finance in every account, with a different icon for new mail:
  301: <pre>
  302: treechildren::-moz-tree-image(folderNameCol, name-Finance) {
  303:   list-style-image: url("coin.png") !important;
  304:   -moz-image-region: -moz-initial !important;}
  305: treechildren::-moz-tree-image(folderNameCol, name-Finance, newMessages-true) {
  306:   list-style-image: url("coin-new.png") !important;
  307:   -moz-image-region: -moz-initial !important;}
  308: </pre>
  309: </p>

FreeBSD-CVSweb <>