www/customising.html

   1 ---
   2 layout: default
   3 ---
   4
   5
   6 <!-- ***************** INFO/NEWS *************** -->
   7 <div id="infoTabs">
   8 <div class="infoTab" id="other-stuff">
   9 <h5 class="infoHeader">Other Stuff</h5>
  10 <script type="text/javascript"><!--
  11 google_ad_client = "pub-5604756703943711";
  12 google_ad_width = 160;
  13 google_ad_height = 600;
  14 google_ad_format = "160x600_as";
  15 google_ad_type = "text_image";
  16 google_ad_channel ="9437245315";
  17 //--></script>
  18 <script type="text/javascript"
  19   src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
  20 </script>
  21 </div>
  22 </div>
  23
  24
  25 <!-- MAIN CONTENT -->
  26 <h3 class="page-header"><a id="content" name="content">Customising</a></h3>
  27
  28 <h5><a id="keybinding" name="keybinding">Key bindings</a></h5>
  29 <P>
  30 You can define a key binding for QuoteCollapse by using the <a href="http://mozilla.dorando.at/readme.html">Keyconfig extension</a>.
  31 The necessary code to execute on a keypress is as follows:
  32 <P>
  33 <CODE><PRE>
  34 var messageDocument = QuoteCollapse._messagePane.contentDocument;
  35 bq = messageDocument.getElementsByTagName("blockquote").item(0);
  36 if( ! bq ) return;
  37 var newstate= ! QuoteCollapse._getState(bq);
  38 QuoteCollapse._setTree(messageDocument, newstate);
  39 </PRE></CODE>
  40
  41 <P> In future versions of QuoteCollapse there will be a special utility function QuoteCollapse.Toggle() which accomplishes the same.
  42
  43 <h5><a id="style" name="style">Style</a></h5>
  44
  45
  46 <P>The style that QuoteCollapse applies by default is equivalent to the following:
  47 <P>
  48 <CODE><PRE>
  49 blockquote[type="cite"] {
  50   background-image: url("chrome://quotecollapse/skin/twisty-clsd.png");
  51   background-repeat: no-repeat;
  52   background-position: top left;
  53   max-height: 2.25ex;
  54   padding-bottom: 0px ! important;
  55   overflow: -moz-hidden-unscrollable;
  56 }
  57
  58 blockquote[type="cite"][qctoggled="true"] {
  59   background-image: url("chrome://quotecollapse/skin/twisty-open.png");
  60   max-height: none;
  61   overflow: visible;
  62 }
  63 </PRE></CODE>
  64 <P>Therefore, you can style everything through your userContent.css. You can edit this file by hand or using the
  65 <a href="http://cdn.mozdev.org/chromedit/">ChromeEdit extension</a>. Note that you have to use the &quot;important&quot; flag to override the default settings. Note also the use of <CODE>BODY.mailview</CODE> which ensures that the style is applied when viewing mails only (not in the editor).
  66
  67 <P id="height-compat">
  68 <EM>Note,</EM> up to QuoteCollapse v0.9 the default styles used CSS <CODE>height</CODE>
  69 property instead of <CODE>max-height</CODE>.  If you upgrade from that version you'll
  70 need to adjust old customizations like: <CODE>height: auto</CODE> &#8594; <CODE>max-height:
  71 none</CODE>, and replace other <CODE>height</CODE> usages for <CODE>max-height</CODE>.
  72 <BR>Examples:
  73
  74 <UL>
  75
  76 <LI> Expand all quotes by default:
  77 <CODE><PRE>
  78 BODY.mailview blockquote[type="cite"] {
  79   background-image: url("chrome://quotecollapse/skin/twisty-open.png") !important;
  80   background-repeat: no-repeat !important;
  81   background-position: top left !important;
  82   max-height: none !important;
  83   overflow: visible !important;
  84 }
  85
  86 BODY.mailview blockquote[type="cite"][qctoggled="true"] {
  87   background-image: url("chrome://quotecollapse/skin/twisty-clsd.png") !important;
  88   background-repeat: no-repeat !important;
  89   background-position: top left !important;
  90   max-height: 2ex !important;
  91   padding-bottom: 0px !important;
  92   overflow: -moz-hidden-unscrollable !important;
  93 }
  94 </PRE></CODE>
  95
  96 <LI> No twisty when expanded:
  97 <CODE><PRE>
  98 BODY.mailview blockquote[type="cite"][qctoggled="true"] {
  99   background-image: none ! important ;
 100 }
 101 </PRE></CODE>
 102 </LI>
 103
 104 <LI> Minimize collapsed size to the height of the twisty:
 105  <CODE><PRE>
 106 BODY.mailview blockquote[type="cite"]:not([qctoggled="true"]) {
 107   max-height: 9px !important;
 108 }
 109  </PRE></CODE>
 110 </LI>
 111
 112 <LI> Always keep 1st level expanded:
 113  <CODE><PRE>
 114 /* overwrite quotecollapse default */
 115 blockquote[type="cite"] {
 116   background-image: none !important;
 117   max-height: none !important;
 118   overflow: visible !important;
 119 }
 120
 121 /* reinstate for level 1 and above: */
 122 BODY.mailview blockquote[type="cite"] blockquote[type="cite"] {
 123   background-image: url("chrome://quotecollapse/skin/twisty-clsd.png") !important;
 124   background-repeat: no-repeat !important;
 125   background-position: top left !important;
 126   max-height: 2ex !important;
 127   padding-bottom: 0px !important;
 128   overflow: -moz-hidden-unscrollable !important;
 129 }
 130
 131 BODY.mailview blockquote[type="cite"] blockquote[type="cite"][qctoggled="true"] {
 132   background-image: url("chrome://quotecollapse/skin/twisty-open.png") !important;
 133   background-repeat: no-repeat !important;
 134   background-position: top left !important;
 135   max-height: none !important;
 136   overflow: visible !important;
 137 }
 138  </PRE></CODE>
 139 </LI>
 140
 141 <LI> Always expand the first quote:
 142  <CODE><PRE>
 143 /* overwrite quotecollapse default for first quote */
 144 DIV > pre:first-child + blockquote[type="cite"] {
 145   background-image: none !important;
 146   max-height: none !important;
 147   overflow: visible !important;
 148 }</PRE></CODE>
 149  This may need to be tweaked depending on quoting styles. E.g., add the same rule for blockquotes which are first childs instead of adjacent to a first child pre.
 150 </LI>
 151
 152 <LI> Collapse only the first quote:
 153  <CODE><PRE>
 154 /* overwrite quotecollapse default for first quote */
 155 blockquote[type="cite"] {
 156   background-image: none !important;
 157   max-height: none !important;
 158   overflow: visible !important;
 159 }
 160
 161 /* reinstate for second quote and following: */
 162 BODY.mailview DIV > pre:first-child + blockquote[type="cite"] {
 163   background-image: url("chrome://quotecollapse/skin/twisty-clsd.png") !important;
 164   background-repeat: no-repeat !important;
 165   background-position: top left !important;
 166   max-height: 2ex !important;
 167   padding-bottom: 0px !important;
 168   overflow: -moz-hidden-unscrollable !important;
 169 }
 170
 171 BODY.mailview DIV > pre:first-child + blockquote[type="cite"][qctoggled="true"] {
 172   background-image: url("chrome://quotecollapse/skin/twisty-open.png") !important;
 173   background-repeat: no-repeat !important;
 174   background-position: top left !important;
 175   max-height: none !important;
 176   overflow: visible !important;
 177 }</PRE></CODE>
 178 The same remark as above applies. Also, if you want twisties inside of the first quote, add rules for level 1 and deeper (see the example on expanding 1st level).
 179 </LI>
 180
 181 <LI> Partially collapse quotes:
 182  <CODE><PRE>
 183 /* partially reveal first level collapsed quotes */
 184 BODY.mailview blockquote[type="cite"]:not([qctoggled="true"]) {
 185   max-height: 6.5em !important;
 186 }
 187
 188 /* always have nested collapsed quotes reveal just one line of text */
 189 BODY.mailview blockquote[type="cite"]:not([qctoggled="true"])
 190               blockquote[type="cite"]:not([qctoggled="true"]) {
 191   max-height: 2ex !important;
 192 }</PRE></CODE>
 193 </LI>
 194
 195 <LI>
 196 Note that you can specify different defaults for mail and news (thanks to Stanimir Stamenkov for this remark):
 197  <CODE><PRE>
 198 @-moz-document url-prefix("news:"), url-prefix("snews:") {
 199    /* Newsgroups */
 200 }
 201
 202 @-moz-document url-prefix("imap:"), url-prefix("mailbox:") {
 203    /* Mail */
 204 }</PRE></CODE>
 205 </LI>
 206
 207 </UL>
 208