File:  [mozdev] / aboutconfig / www / stuff.html
Revision 1.4: download - view: text, annotated - select for diffs - revision graph
Wed Nov 29 14:23:40 2006 UTC (12 years, 10 months ago) by gruber
Branches: MAIN
CVS tags: HEAD
Adding styled microsummaries to stuff.

    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 stuff that needs a place online.
   23: 
   24: <h6>Styling microsummaries</h6>
   25: <P> <img src="tinderbox.png" alt="screenshot" align=left hspace=10> 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 (in our case <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 for 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: your profile's <code>chrome</code> folder:
   43: 
   44: <br clear=left>
   45: 
   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: 
   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.
   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.
   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...). 
   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>