Echsendressur

Mozilla (resp. Firefox/Thunderbird) noch komfortabler mit User-Stylesheet

Mozilla wäre kein moderner Webbrowser, wenn man nicht als Benutzer eine ganze Menge zu sagen hätte. Einmal gibt es da die "normalen" Einstellungen (auf die Firefox-Nutzer oft nur über about:config zugreifen können), zum anderen aber kann man auch auf die Darstellung von Benutzeroberfläche und Inhalten umfassend Einfluß nehmen, und zwar mit Hilfe von User-Stylesheets. Davon gibt es zwei Stück, die sich im Unterverzeichnis chrome des benutzten Profils finden resp. dort angelegt werden können: userChrome.css (für die Oberfläche) und userContent.css (für angezeigte Inhalte).

Bei den Inhalten der Dateien handelt es sich um schlichte CSS-Formatierungsregeln (Cascading Style Sheet), wie sie dem Webautor bereits vertraut sein dürften. Wer damit Neuland betritt, ist bei der "Einführung in XHTML, CSS und Webdesign" von Michael Jendryschik nicht schlecht aufgehoben. Mit CSS kann man die Darstellung fast jedes (X)HTML-Elements umfassend beeinflussen, und wie es der Zufall will, bringt der Mozi in Form von Gecko eine sehr mächtige Rendering-Engine mit.

I.d.R. sollte man neue Regeln problemlos an die bestehenden Inhalte anhängen können. Das häufige Vorkommen von !important erklärt sich dadurch, daß oft Mozilla-eigene Vorgaben übergangen werden müssen - der hat nämlich intern seine ganz eigenen Stylesheets, etwa resource:///res/html.css, resource:///res/quirk.css oder resource:///res/ua.css.

Firefox und Thunderbird können natürlich ebenfalls User-Stylesheets einsetzen, allerdings werden in Firebird MailNews-relevante Dinge ebensowenig nutzbringend einzusetzen sein wie in Thunderbird Browser-Relevantes.

Oberfläche beeinflussen - userChrome.css

Hier dürfte vor allem die Manipulation der einzelnen Schriftgrößen interessant sein. Beispiele:

/* Kurzerhand alles auf 10pt Schriftgröße stellen? Kein 
   Problem! */

* {
     font-size:10pt !important;
     }

/* Aber die Mailnews-Baumstruktur hätten wir gern auf 8pt! */

tree {
     font-size: 8pt !important;
     }

Inhalte beeinflussen - userContent.css

Jetzt wird's richtig interessant. In der userContent.css kann man mit aller Macht von CSS die Darstellung beeinflussen, im Browserfenster ebenso wie in der Mail-Ansicht. Aber man sehe selbst:


/* Färbt für Plaintext-Mails mit oder ohne "format: flowed" 
   die Zitatebenen ein und verändert die Hintergrundfarbe 
   entsprechend; erweitert nach dem Beispiel von Holger 
   Metzger. HTML-Mails würde man mit der Klasse 
   .moz-text-html erfassen */

.moz-text-plain blockquote[type=cite], 
.moz-text-flowed blockquote[type=cite] {
     color: navy ! important;
     background-color: #FFF !important;
     border-color: black ! important;
     }

.moz-text-plain blockquote[type=cite] blockquote, 
.moz-text-flowed blockquote[type=cite] blockquote {
     color: maroon ! important;
     background-color: #F0F0F0 !important;
     border-color: navy ! important;
     }

.moz-text-plain blockquote[type=cite] blockquote 
                blockquote, 
.moz-text-flowed blockquote[type=cite] blockquote 
                 blockquote  {
     color: green ! important;
     background-color: #E8E8E8 !important;
     border-color: maroon ! important;
     }

.moz-text-plain blockquote[type=cite] blockquote 
                blockquote blockquote, 
.moz-text-flowed blockquote[type=cite] blockquote 
                blockquote blockquote {
     color: purple ! important;
     background-color: #E0E0E0 !important;
     border-color: green ! important;
     }

.moz-text-plain blockquote[type=cite] blockquote 
                blockquote blockquote blockquote, 
.moz-text-flowed blockquote[type=cite] blockquote 
                 blockquote blockquote blockquote  {
     color: teal ! important;
     background-color: #D8D8D8 !important;
     border-color: purple ! important;
     }

.moz-text-plain blockquote[type=cite] blockquote 
                blockquote blockquote blockquote 
                blockquote, 
.moz-text-flowed blockquote[type=cite] blockquote 
                 blockquote blockquote blockquote 
                 blockquote {
     color: gray ! important;
     background-color: #D0D0D0 !important;
     border-color: teal ! important;
     }

/* Auch die Signatur läßt sich umfärben, Details dazu */

/* Die Zeilen von Nachrichten mit "format: flowed" sind zu 
   lang? Abhilfe ist möglich! */

.moz-text-flowed {
     max-width: 76ch;
     }

/* Siehe auch diesen Eintrag in der Mozilla-FAQ.
   Dort gibt's übrigens noch mehr Mailnews-Nettigkeiten. */

/* Lauftext à la IE (mit MARQUEE) ist doof? Abstellen! */

marquee {
     -moz-binding: none !important; 
     }

/* Und dank BLINK dumm in der Gegend herumblinkenden Text 
   hätte man auch gern ruhiggestellt? */

blink {
     text-decoration: inherit !important; 
     }

/* So, und Relikte aus besten Browserkriegszeiten wäre man 
   auch gern los?
   Na denn: Hebeln wir mal FONT (genauer: die Attribute
   FACE und SIZE, also Schriftart und -größe) aus! */

font {
     font-face: inherit !important;
     font-size: inherit !important;
     }

/* Um das Attribut COLOR würde sich
   color: inherit !important;
   kümmern. */

/* Völlig analog sind auch B, U und I loszuwerden, wenn
   man es radikal mag: */

b {
     font-weight: inherit !important;
     }

u {
     text-decoration: inherit !important;
     }
i {
     font-style: inherit !important; 
     }

/* Recht ausgefeilt ist die nachfolgende Variante zur 
   Werbungsunterdrückung, die ich von der Seite
   "Mozilla Ad Blocking" übernommen und ergänzt habe. 
   Es sei erwähnt, daß es auch ein Addon "AdBlock" für 
   den Mozi gibt, aber wie man sieht, ist auch schon 
   viel mit Hausmitteln machbar. Das liegt auch daran, 
   daß schon einiges in Richtung CSS3 implementiert ist, 
   etwa die Sache mit der teilweisen Übereinstimmung von 
   Strings. */

/* this hides the usual 468x60 Flash banner ads */

embed[type="application/x-shockwave-flash"][width="468"][height="60"]
{
  display: none !important;
  visibility: hidden !important;
}
/* this hides the not so usual 
   but very annoying 728x90 Flash banner ads */

embed[type="application/x-shockwave-flash"][width="728"][height="90"]
{
  display: none !important;
  visibility: hidden !important;
}

embed[type="application/x-shockwave-flash"][width="130"][height="180"]
{
  display: none !important;
  visibility: hidden !important;
}

embed[type="application/x-shockwave-flash"][width="120"][height="600"]
{
  display: none !important;
  visibility: hidden !important;
}

embed[type="application/x-shockwave-flash"][width="125"][height="125"]
{
  display: none !important;
  visibility: hidden !important;
}

embed[type="application/x-shockwave-flash"][width="425"][height="600"]
{
  display: none !important;
  visibility: hidden !important;
}

embed[type="application/x-shockwave-flash"][width="120"][height="600"]
{
  display: none !important;
  visibility: hidden !important;
}

embed[type="application/x-shockwave-flash"][src*="yimg.com"]
{
  display: none !important;
  visibility: hidden !important;
}

iframe[src*="ads"] {
  display: none !important;
  visibility: hidden!important;
  }

iframe[src*="adtrix"] {
  display: none !important;
  visibility: hidden!important;
  }

iframe[src*="doubleclick"] {
  display: none !important;
  visibility: hidden!important;
  }

img[width="468"][height="60"] {
  display: none !important;
  visibility: hidden!important;
  }

img[width="295"][height="58"] {
  display: none !important;
  visibility: hidden!important;
  }

img[width="200"][height="100"] {
  display: none !important;
  visibility: hidden!important;
  }

img[src*="ad.doubleclick"] {
  display: none !important;
  visibility: hidden!important;
  }

img[src*="ads."] {
  display: none !important;
  visibility: hidden!important;
  }

img[src*="adserver"] {
  display: none !important;
  visibility: hidden!important;
  }

img[src*="banner"] {
  display: none !important;
  visibility: hidden!important;
  }

img[src*="click."] {
  display: none !important;
  visibility: hidden!important;
  }

object param[value*="yimg.com"] {
  display: none !important;
  visibility: hidden !important;
  }

table[width="425"][height="600"] 
{
display: none !important;
visibility: hidden!important;
}