Annotation of journal/www/mailtweak-css.html, revision 1.1

1.1     ! whiteley    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>
        !             5: 
        !             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>
        !            10: 
        !            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>
        !            14: 
        !            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="http://developer.mozilla.org/en/docs/CSS:Getting_Started">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>
        !            23: 
        !            24: <p>For information about the CSS files that you can use to customize Thunderbird, see:
        !            25: <a href="http://kb.mozillazine.org/UserChrome.css">userChrome.css</a> and
        !            26: <a href="http://kb.mozillazine.org/UserContent.css">userContent.css</a>.
        !            27: </p>
        !            28: 
        !            29: 
        !            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>
        !            35: 
        !            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>
        !            40: 
        !            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>
        !            45: 
        !            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>
        !            51: 
        !            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>
        !            56: 
        !            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>
        !            64: 
        !            65: <p>To open the appropriate CSS file for the element, press the Open... button.</p>
        !            66: 
        !            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>
        !            73: 
        !            74: <p>For a more complete view of the user interface's underlying structure, use the
        !            75: <a href="http://kb.mozillazine.org/DOM_Inspector">DOM Inspector</a> extension.</p>
        !            76: 
        !            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>
        !            80: 
        !            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>
        !            83: 
        !            84: <p>When you need to identify a particular element, then you usually choose an ID selector.</p>
        !            85: 
        !            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>
        !            88: 
        !            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>
        !            93: 
        !            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>
        !            97: 
        !            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>
        !           102: 
        !           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>
        !           109: 
        !           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>
        !           112: 
        !           113: <pre>@namespace xul url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");</pre>
        !           114: 
        !           115: <p>You might need to remove or change the name of namespace in your CSS file.</p>
        !           116: 
        !           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>
        !           120: 
        !           121: <pre>
        !           122: (isServer-true serverType-none)
        !           123: </pre>
        !           124: 
        !           125: 
        !           126: 
        !           127: <h4 id="sig-example">Example: Signature text</h4>
        !           128: 
        !           129: <p>To change signature text from the default gray to navy, choose: Tools &ndash; CSS Selector &nbsp;</p>
        !           130: 
        !           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>
        !           133: 
        !           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>
        !           136: 
        !           137: <p>Press the Open... button to open your userContent.css file.</p>
        !           138: 
        !           139: <p>Paste the selector:</p>
        !           140: 
        !           141: <pre>
        !           142: .moz-txt-sig
        !           143: </pre>
        !           144: 
        !           145: <p>and complete the rule:</p>
        !           146: 
        !           147: <pre>
        !           148: .moz-txt-sig {color: navy !important;}
        !           149: </pre>
        !           150: 
        !           151: <p>Repeat the process for an HTML message, adding the new selector to the rule:</p>
        !           152: 
        !           153: <pre>
        !           154: .moz-txt-sig, .moz-signature {color: navy !important;}
        !           155: </pre>
        !           156: 
        !           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>
        !           160: 
        !           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>
        !           163: 
        !           164: <pre>.folderview-cycler</pre>
        !           165: 
        !           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>
        !           168: 
        !           169: <pre>.folderview-cycler > .toolbarbutton-icon</pre>
        !           170: 
        !           171: <p>Complete the rule:</p>
        !           172: 
        !           173: <pre>.folderview-cycler > .toolbarbutton-icon {width: 12px; height: 12px;}</pre>
        !           174: 
        !           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>
        !           178: 
        !           179: <p>In the CSS Selector dialog, you see the pseudo-element: <tt>treechildren::-moz-tree-cell-text</tt>
        !           180: 
        !           181: </p>
        !           182: 
        !           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>
        !           185: 
        !           186: <pre>
        !           187: treechildren::-moz-tree-cell
        !           188: </pre>
        !           189: 
        !           190: <p>In the Properties list, select isServer-true and serverType-none.
        !           191: Copy and paste the modifier in your userChrome.css file:</p>
        !           192: 
        !           193: <pre>
        !           194: treechildren::-moz-tree-cell(isServer-true serverType-none)
        !           195: </pre>
        !           196: 
        !           197: <p>Complete the rule:</p>
        !           198: 
        !           199: <pre>
        !           200: treechildren::-moz-tree-cell(isServer-true serverType-none) {background-color: palegreen;}
        !           201: </pre>
        !           202: 
        !           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>
        !           206: 
        !           207: <p>Open the main Options or Preferences dialog, go to the Privacy page, and select the
        !           208: Junk tab.</p>
        !           209: 
        !           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>
        !           213: 
        !           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>
        !           216: 
        !           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>
        !           219: 
        !           220: <pre>
        !           221: #privacyPrefs
        !           222: </pre>
        !           223: 
        !           224: <p>Press Home, Child and Next to return to the button.
        !           225: Copy and paste any of the attribute selectors:</p>
        !           226: 
        !           227: <pre>
        !           228: #privacyPrefs [accesskey="D"]
        !           229: </pre>
        !           230: 
        !           231: <p>Complete the rule:</p>
        !           232: 
        !           233: <pre>
        !           234: #privacyPrefs [accesskey="D"] {visibility: hidden;}
        !           235: </pre>
        !           236: 
        !           237: 
        !           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="http://kb.mozillazine.org/UserChrome.css">userChrome.css</a>
        !           249: </p>
        !           250: 
        !           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>
        !           254: 
        !           255: 
        !           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>
        !           310: 
        !           311: 
        !           312: 
        !           313: 

FreeBSD-CVSweb <freebsd-cvsweb@FreeBSD.org>