Annotation of aboutconfig/www/stuff.html, revision 1.1

1.1     ! gruber      1: <!-- ***************** INFO/NEWS *************** -->
        !             2: <div id="infoTabs">
        !             3: <div class="infoTab" id="other-stuff">
        !             4: <h5 class="infoHeader">Other Stuff</h5>
        !             5: <script type="text/javascript"><!--
        !             6: google_ad_client = "pub-5604756703943711";
        !             7: google_ad_width = 160;
        !             8: google_ad_height = 600;
        !             9: google_ad_format = "160x600_as";
        !            10: google_ad_type = "text_image";
        !            11: google_ad_channel ="9529252866";
        !            12: //--></script>
        !            13: <script type="text/javascript"
        !            14:   src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
        !            15: </script>
        !            16: </div>
        !            17: </div>
        !            18: 
        !            19: <!-- MAIN CONTENT -->
        !            20: <h5 class="page-header"><a id="content" name="content">Stuff</a></h5>
        !            21: 
        !            22: <P>This page collects assorted mozilla related that needs a place online.
        !            23: 
        !            24: <h6>Styling microsummaries</h6>
        !            25: <P> <img src="tinderbox.png" alt="screenshot" align=right> By styling <a href="http://wiki.mozilla.org/Microsummaries">microsummaries</a>
        !            26: according to their changing content it is possible to replace several status reporting extensions
        !            27: and to save statusbar real estate. Creating those microsummaries yourself is much easier than developping extensions.
        !            28: As an example, let's see how one creates a microsummary replacement for the <a href="https://addons.mozilla.org/firefox/832/">tinderstatus extension</a>.
        !            29: 
        !            30: <P>
        !            31: First, if the web site in question (<code>http://tinderbox.mozilla.org/showbuilds.cgi?</code>) does not provide any microsummary
        !            32: we need to find or write a generator. <a href="http://dietrich.ganx4.com/blog/?p=237">The one I found</a> had problems parsing some of the tinderbox pages
        !            33: and did not quite follow the suggested format but it got me started. See the <a href="http://wiki.mozilla.org/Microsummaries">microsummary wiki</a>
        !            34: for information about generators. You can either <a href="mozilla-tinderbox-microsummary.xml">download</a> my microsummary generator for 
        !            35: tinderbox status pages or <button onclick="window.sidebar.addMicrosummaryGenerator('mozilla-tinderbox-microsummary.xml')">install</button> it directly from here.
        !            36: 
        !            37: <P>
        !            38: Next, create a <code>Tinderbox</code> folder in your personal bookmarks toolbar and add bookmarks to your favourite tinderboxens, using the microsummaries.
        !            39: 
        !            40: <P>
        !            41: Finally, style the contents of the <code>Tinderbox</code> folder by putting something like the following CSS in <code>userChrome.css</code> in
        !            42: yoour profile's <code>chrome</code> folder:
        !            43: 
        !            44: <code><pre>
        !            45: /* Color microsummaries for tinderbox */
        !            46: toolbarbutton.bookmark-item[label="Tinderbox"] menuitem[label~="open"] > .menu-iconic-left {
        !            47:   background: url(tree-open.png) no-repeat  3px 2px!important;
        !            48: }
        !            49: 
        !            50: toolbarbutton.bookmark-item[label="Tinderbox"] menuitem[label~="closed"] > .menu-iconic-left {
        !            51:   background: url(tree-closed.png) no-repeat  3px 2px!important;
        !            52: }
        !            53: 
        !            54: toolbarbutton.bookmark-item[label="Tinderbox"] menuitem[label~="(OK)"] > .menu-iconic-left {
        !            55:   background-color: #11DD11 !important;
        !            56: }
        !            57: 
        !            58: toolbarbutton.bookmark-item[label="Tinderbox"] menuitem[label~="orange)"] > .menu-iconic-left {
        !            59:   background-color: #FFAA00 !important;
        !            60: }
        !            61: 
        !            62: toolbarbutton.bookmark-item[label="Tinderbox"] menuitem[label~="burning"] > .menu-iconic-left {
        !            63:   background-color: #EE0000 !important;
        !            64: }
        !            65: 
        !            66: toolbarbutton.bookmark-item[label="Tinderbox"] .menu-iconic-icon {
        !            67:   visibility: hidden !important;
        !            68: }
        !            69: 
        !            70: </pre></code>
        !            71: 
        !            72: The two images for open <img src="tree-open.png" alt="tree open"> and closed  <img src="tree-close.png" alt="tree closed"> tree state are taken from <a href="https://addons.mozilla.org/firefox/832/">tinderstatus extension</a>.
        !            73: 
        !            74: <P>A few things to note:
        !            75: <ul>
        !            76: <li> All the CSS above applies only to entries within the <code>Tinderbox</code> folder in your personal bookmarks toolbar. It does not apply to the entries in the bookmarks menu (intentionally), but it's easy to change this.
        !            77: <li> You see how the label of the microsummary bookmark menutitem is used to generate different markup depending on the state (content) of the bookmark.
        !            78: <li> Also note how the favicon is made invisible by hidding the <code>.menu-iconic-icon</code> so that the background images for <code>.menu-iconic-left</code> is shown.
        !            79: <li> Similarly one could change the text or background colour of the bookmark text by styling the <code>label</code> child of <code>menuitem</code>.
        !            80: <li> Disclaimer: In fact I like the very fine <a href="https://addons.mozilla.org/firefox/832/">tinderstatus extension</a>. 
        !            81: Fortunately, its author is also &quot;the microsummary guy&quot; so replacing his extension by microsummaries should be OK :).
        !            82: </ul>

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