Benutzeroberfläche per userChrome.css umgestalten (Teil III userChrome.css und Thunderbird Entwickler-Werkzeuge)

    • Thunderbird-Version: TB 52.x.x bis TB 58.0b1
    • Betriebssystem + Version: alle


    In der Zwischenzeit wurde Thunderbird weiterentwickelt.

    In den letzten Beta-Versionen (aktuell v58.0b1) wurde deutlich, dass bestimmte Add-ons in der nächsten Release-Version TB 59 nicht mehr funktionieren werden. Dazu gehören die in Teil I und II erwähnten Erweiterungen ChromEdit und insbesondere Stylish, die den Umgang mit CSS-Regeln wesentlich vereinfachen.


    Die Nutzer, die nur selten eine neue CSS-Regel in die userChrome.css-Datei einfügen, werden sich sicher weiterhin begnügen, diese Datei bei Gelegenheit manuell mit dem neuen Code-Baustein zu erweitern und Thunderbird neu zu starten.


    Andere Nutzer, die häufiger Änderungen an der Benutzeroberfläche vornehmen, also beispielsweise mehrere Schriftgrößen, und/oder Schriftarten oder auch Hintergrundfarben testen wollen, können sich schon jetzt mit einem Werkzeug vertraut machen, das uns von den Mozilla-Entwicklern zur Verfügung gestellt wurde. Es handelt sich um den Entwickler-Werkzeugkasten, der über das Menü Extras ➔ Entwickler-Werkzeuge ➔ Entwickler-Werkzeugkasten aufgerufen wird:



    Nach dem Klick auf Entwickler-Werkzeugkasten öffnet sich eine Dialogbox, in der das Betriebssystem fragt, ob die eingehende Debugger-Verbindung erlaubt werden soll oder nicht:

    Wenn man auf "OK" klickt, öffnet sich im Hintergrund eine zweite Instanz von Thunderbird. Man muss diese Instanz von TB in den Vordergrund holen, damit das Fenster "Entwicklerwerkzeuge" sichtbar wird. Zunächst sollte man oben rechts in der Werkzeugleiste auf das Zahnrad-Symbol ("Einstellungen") klicken und sich in den erweiterten Einstellungen vergewissern, dass die "Debugging-Werkzeuge für Browser-Chrome und Add-ons" sowie das "externe Debugging" aktiviert sind:


    Wenn das der Fall ist, klickt man auf den Reiter Stilbearbeitung und bekommt folgende Ansicht:



    In der linken Spalte sind die Style Sheets der verschiedenen Bereiche der Benutzeroberfläche aufgelistet, wobei die Datei userChrome.css leicht übersehen werden kann bei der Vielzahl von Style Sheets (manche sind aus mir unbekannten Gründen bis zu sechsmal aufgeführt). Hat man die Datei schließlich gefunden, kann sie im rechten Fensterteil editiert werden. Der Vorteil hierbei ist, dass ähnlich wie bei der Erweiterung Stylish jede Änderung des Codes nach zwei bis drei Sekunden automatisch im Zielfenster sichtbar wird, sofern sich dieses (Thunderbird-Hauptfenster, Verfassen-Fenster, Adressbuch-Fenster oder auch Kalender-Tab) gleich "hinter" dem Entwickler-Werkzeuge-Fenster befindet, so wie es im untersten Screenshot der Fall ist. Gelegentlich muss man allerdings zunächst den Fokus wechseln und mit der Maus in das Zielfenster klicken, damit die Änderung aktiv wird.

    Für das hier gezeigte Beispiel habe ich zur Verdeutlichung den Code für eine rote Hintergrundfarbe in der Zeile "Betreff - Beteiligte - (oder Absender) - Datum - Größe der Nachrichten/Themenliste" getestet.


    Bevor man das Fenster der Entwicklerwerkzeuge wieder schließt, genügt ein Klick auf "Speichern", um die Code-Änderungen zu speichern.

    5 Mal editiert, zuletzt von graba ()

  • Hallo Mapenzi,


    vielen Dank für deinen dritten Beitrag zur möglichen Umgestaltung der Benutzeroberfläche von Thunderbird! Tolle Leistung! :thumbsup:


    Die genannten Beiträge dienen als erweiterte Information zu dem Wiki-Artikel Themes per userChrome.css anpassen.


    Bei Anmerkungen, Ergänzungen, Fragen etc. zu dem Thema bitte einen eigenen Thread eröffnen!