Benutzeroberfläche per userChrome.css umgestalten (Teil I)

  • Um Rückfragen vorzubeugen, bitten wir um folgende Angaben:
    * Thunderbird-Version: 45.x.x
    * Betriebssystem + Version: alle


    Die Anweisungen oder Regeln für die Gestaltung der Benutzeroberflächen (Layout, Farben, Rahmen, Textformate) der Mozilla-Programme Thunderbird und Firefox sind in der sogenannten "CSS-Sprache" (Cascading Style Sheets) geschrieben, während zur Festlegung der Inhalte eines Web-Dokuments HTML und XML verwendet werden.
    https://de.wikipedia.org/wiki/Cascading_Style_Sheets
    Diese Style Sheets können beliebig viele solcher Regeln (rules) enthalten und werden als *.css-Dateien gespeichert. Die das Thunderbird-Adressbuch betreffenden Dateien heißen z. B. addressbook.css, abContactsPanel.css, abResultsPanel.css und cardDialog.css, entsprechend der Aufteilung des Adressbuch-Fensters, während der CSS-Code für das Verfassen-Fenster in einer einzigen Datei messengercompose.css zusammengefasst ist.
    All diese *.css-Dateien sind in Unterverzeichnissen des Ordners "chrome" gespeichert, der ein wichtiger Bestandteil des Thunderbird-Anwendungspakets ist.


    Manche Thunderbird-Nutzer möchten gerne die Benutzeroberfläche ändern, beispielsweise um etwas mehr Farbe hineinzubringen oder andere Schriftarten/Schriftgrößen zu wählen, ohne gleich ein komplettes "Theme" zu installieren. Dies ist durch das Erstellen von neuen, abweichenden Regeln möglich, die dann von TB anstelle der entsprechenden Regeln in den *.css-Dateien des Original-Codes benutzt werden.
    Angenommen, wir möchten nur die Schriftgröße in der Konten/Ordnerliste erhöhen, dann müssen wir eine neue Regel schreiben, die angibt, wie groß (in Pixel oder auch in Millimeter oder %) die Schrift in dem Bereich Konten/Ordnerbaum sein soll, abweichend von der Größe, wie sie der Originalcode von TB standardmäßig festgelegt hat. Diese simple Regel sieht folgendermaßen aus:

    Code
    1. #folderTree {
    2. font-size: 13px !important; }

    Die erste Zeile beginnt mit einem Doppelkreuz # gefolgt vom Namen (oder Identität ID) des zu ändernden Elements folderTree und endet mit einer öffnenden geschweiften Klammer {
    Die nächste Zeile beginnt mit der zu ändernden Eigenschaft font-size, gefolgt von einem Doppelpunkt und dem neuen Wert 13px, dem Ausdruck !important, einem Semikolon und einer abschließenden geschweiften Klammer }
    Man könnte hier den Ausdruck !important auch weglassen, da er für die Eigenschaft font-size eigentlich nicht erforderlich ist. Bei vielen anderen Eigenschaften ist er jedoch notwendig, damit der Code wirksam ist, weshalb man ihn grundsätzlich einfügen sollte.


    Wenn wir gleichzeitig auch die Schriftart der Konten/Ordnerliste ändern wollen, dann erweitern wir die Regel wie im folgenden Beispiel:

    Code
    1. #folderTree {
    2. font-size: 13px !important;
    3. font-family: Palatino !important; }


    Da je nach gewählter Größe und Art der Schrift die Zeilenabstände zu gering werden könnten und damit zu einem "Überschneiden" der Konten- und Ordnernamen führen, müssen wir gegebenenfalls die folgende Regel für den Zeilenabstand im Konten/Ordnerbaum (folderTree) hinzufügen:

    Code
    1. #folderTree > treechildren::-moz-tree-row {
    2. height: 18px !important; }


    Damit man auch später noch weiß, wozu diese Codes dienen, sollte man noch eine knappe, von den Zeichen /* und */ eingerahmte Erklärung voransetzen. Beispiel:

    Code
    1. /* Schrift Konten-Ordnerbaum */
    2. #folderTree {
    3. font-size: 13px !important;
    4. font-family: Palatino !important; }
    5. #folderTree > treechildren::-moz-tree-row {
    6. height: 18px !important; }


    Um diese Regeln anwendbar zu machen, öffnen wir einen Text-Editor und kopieren zunächst die folgenden Zeilen hinein, mit der die meisten *.css-Dateien von TB beginnen (diese Zeilen brauchen nur einmalig eingefügt und nicht wiederholt zu werden):

    Code
    1. @namespace xul url(http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul);
    2. /* set default namespace to XUL */


    Darunter fügen wir unsere obigen Regeln ein, so dass der Inhalt der Text-Datei nun so aussieht:

    Code
    1. @namespace url(http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul);
    2. /* set default namespace to XUL */
    3. /* Schrift Konten-Ordnerbaum */
    4. #folderTree {
    5. font-size: 13px !important;
    6. font-family: Palatino !important; }
    7. #folderTree > treechildren::-moz-tree-row {
    8. height: 18px !important; }


    Jetzt muss die Datei unter dem Namen "userChrome.css" (ohne die Endung .txt !) gespeichert werden. Danach verschieben wir sie in einen neu erstellten Ordner "chrome", den wir in den Profilordner von TB einfügen. Nach einem Neustart von TB sollten die gewünschten Änderungen im Konten/Orderbaum sichtbar sein, da die Regeln der userChrome.css-Datei jetzt den Vorrang vor den entsprechenden CSS-Regeln im Original-Code haben. Wenn die Größe der Schrift oder der Zeilenabstand nicht zufriedenstellend ist, müssen die entsprechenden Werte in der Datei userChrome.css erhöht oder verkleinert werden, worauf wieder ein Neustart von TB erforderlich ist.


    Anstatt eine userChrome.css-Datei zu erstellen, kann man auch das Add-on "Stylish" in Thunderbird installieren, einen neuen "Style" erstellen, die obigen Regeln (ohne die beiden @namespace url…. Zeilen) in den Kasten des neuen Style kopieren und auf "Vorschau" (oder "Speichern") klicken. Die Änderungen des Codes werden sofort aktiviert. Man muss allerdings häufig zunächst mit der Maus in den entsprechenden Bereich der Benutzeroberfläche (hier den Konten/Ordnerbaum) klicken, damit sie angezeigt werden.
    Der große Vorteil des Add-ons gegenüber der Datei userChrome.css liegt also darin, dass man TB nicht nach jeder Änderung einer Regel neu starten muss.
    Die mittels "Stylish" durchgeführten Änderungen werden übrigens in der Datei "stylish.sqlite" im TB Profil gespeichert.


    Warnung

    Seit "Stylish" bzw. "userstyles.org" im Oktober 2016 an einen neuen Eigentümer verkauft wurde, hat sich die Privacy Policy geändert und das Add-on ist in den Ruf eines Datensammlers geraten.

    Siehe dazu den Artikel von Martin Brinkmann http://www.ghacks.net/2016/10/…les-org-have-a-new-owner/ und die Diskussion Browser Add-On Stylish – der neue Datensammler? im Nachbarforum. Die neue Privacy Policy von userstyles.org kann hier eingesehen werden: https://userstyles.org/login/policy
    Inwieweit die Privatsphäre bei der Benutzung von Stylish in Thunderbird gefährdet ist, kann ich nicht beurteilen.


    Eine Alternative zu "Stylish" wird in Teil II beschrieben.


    Edit: Bei Anmerkungen, Ergänzungen, Fragen etc. zu dem Thema bitte einen eigenen Thread eröffnen! graba, S-Mod.

    2 Mal editiert, zuletzt von graba ()