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

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: 
1.4     ! gruber     22: <P>This page collects assorted mozilla related stuff that needs a place online.
1.1       gruber     23: 
                     24: <h6>Styling microsummaries</h6>
1.3       gruber     25: <P> <img src="tinderbox.png" alt="screenshot" align=left hspace=10> By styling <a href="http://wiki.mozilla.org/Microsummaries">microsummaries</a>
1.1       gruber     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>
1.4     ! gruber     31: First, if the web site in question (in our case <code>http://tinderbox.mozilla.org/showbuilds.cgi?</code>) does not provide any microsummary
1.1       gruber     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>
1.3       gruber     38: Next, create a <code>Tinderbox</code> folder in your personal bookmarks toolbar and add bookmarks for your favourite tinderboxens, using the microsummaries.
1.1       gruber     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
1.3       gruber     42: your profile's <code>chrome</code> folder:
1.1       gruber     43: 
1.4     ! gruber     44: <br clear=left>
1.2       gruber     45: 
1.1       gruber     46: <code><pre>
                     47: /* Color microsummaries for tinderbox */
                     48: toolbarbutton.bookmark-item[label="Tinderbox"] menuitem[label~="open"] > .menu-iconic-left {
                     49:   background: url(tree-open.png) no-repeat  3px 2px!important;
                     50: }
                     51: 
                     52: toolbarbutton.bookmark-item[label="Tinderbox"] menuitem[label~="closed"] > .menu-iconic-left {
                     53:   background: url(tree-closed.png) no-repeat  3px 2px!important;
                     54: }
                     55: 
                     56: toolbarbutton.bookmark-item[label="Tinderbox"] menuitem[label~="(OK)"] > .menu-iconic-left {
                     57:   background-color: #11DD11 !important;
                     58: }
                     59: 
                     60: toolbarbutton.bookmark-item[label="Tinderbox"] menuitem[label~="orange)"] > .menu-iconic-left {
                     61:   background-color: #FFAA00 !important;
                     62: }
                     63: 
                     64: toolbarbutton.bookmark-item[label="Tinderbox"] menuitem[label~="burning"] > .menu-iconic-left {
                     65:   background-color: #EE0000 !important;
                     66: }
                     67: 
                     68: toolbarbutton.bookmark-item[label="Tinderbox"] .menu-iconic-icon {
                     69:   visibility: hidden !important;
                     70: }
                     71: 
                     72: </pre></code>
                     73: 
1.3       gruber     74: The two images for open <img src="tree-open.png" alt="tree open"> and closed  <img src="tree-closed.png" alt="tree closed"> tree state are taken from the <a href="https://addons.mozilla.org/firefox/832/">tinderstatus extension</a> and they need to go into your profile's <code>chrome</code> folder as well.
1.1       gruber     75: 
                     76: <P>A few things to note:
                     77: <ul>
                     78: <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.
                     79: <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.
1.3       gruber     80: <li> Also note how the favicon is made invisible by hidding the <code>.menu-iconic-icon</code> so that the background image for <code>.menu-iconic-left</code> is shown. I cannot ovverride the favicon directly because an XBL binding is involved (maybe someone else can...). 
1.1       gruber     81: <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>.
                     82: <li> Disclaimer: In fact I like the very fine <a href="https://addons.mozilla.org/firefox/832/">tinderstatus extension</a>. 
                     83: Fortunately, its author is also &quot;the microsummary guy&quot; so replacing his extension by microsummaries should be OK :).
                     84: </ul>

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