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

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



    Neben "Stylish" gibt es noch das Add-on "ChromeEdit Plus" http://webdesigns.ms11.net/chromeditp.html, das seit Jahren nicht mehr weiterentwickelt wurde. Es funktioniert aber weiterhin als Editor der userChrome.css-Datei in der aktuellen Version TB 45.x und sogar in der Entwickler-Version Daily 54.0a1.


    Nach der Installation dieses Add-ons kann man den Button "ChromeEdit" über den Rechtsklick > Anpassen in die Hauptmenüleiste ziehen und die userChrome.css-Datei durch einen Klick auf den Button in einem eigenen Fenster öffnen, um sie zu editieren.
    Am unteren Fensterrand befinden sich die Buttons "Save" und "Restart" zum Speichern von Code-Änderungen und zum erforderlichen Neustart von TB.



    Im Menü "Extras" wird zusätzlich ein Untermenü "ChromeEdit Plus" geschaffen, über das man u. a. direkt den Profilordner öffnen kann.


    Natürlich kommt jetzt sofort die Frage: "Wie kann ich solche Regeln erstellen, wenn ich die "CSS-Sprache" nicht kenne"?


    Zu Beginn ist es sicher einfacher, solche "fertige" Regeln durch eine Suche mit den entsprechenden Schlüsselwörtern im Web zu finden, wobei man bei Benutzung von englischen Schlüsselwörtern mehr Erfolgsaussichten hat. Auch mit einer Suche in diesem Forum mit "userchrome" oder "stylish" kann man u. U. schon den erforderlichen Code finden.
    Die Webseite http://www.linnhe2.free-online.co.uk/thunderbird/chrome.html bietet eine recht umfangreiche Liste von CSS-Codes an, mit der man die Benutzeroberfläche von TB umgestalten kann. Wer Zeit und Lust hat, kann einige dieser Codes testen und sich gleichzeitig mit dem Aufbau dieser Regeln etwas vertraut machen.


    Die größte Schwierigkeit ist häufig, überhaupt erst einmal den Namen (die ID) des Elements der Benutzeroberfläche zu finden, das man ändern möchte.
    Dazu können die beiden Add-ons "DOM-Inspector" https://addons.mozilla.org/en-…addon/dom-inspector-6622/ und "InspectorWidget" https://addons.mozilla.org/en-…rd/addon/inspectorwidget/ gute Dienste leisten. Nach der Installation von InspectorWidget muss noch über einen R-Klick > Anpassen der Button "Inspect" mit der Maus in die Hauptmenüleiste gezogen werden.


    Ich will das Arbeiten mit diesen Add-ons anhand eines Beispiels illustrieren.
    Für meine alternden Augen ist die Schrift im Nachrichten-Header (das Fensterchen mit "Von", "Betreff", "An" zwischen Themen/Nachrichtenliste und Nachrichtenbereich) zu klein und ich möchte sie deshalb vergrößern.


    Ich klicke zunächst auf den Button "Inspect", halte dann die Umschalttaste gedrückt und klicke mit der Maus in den Nachrichten-Header einer geöffneten Mail. Daraufhin öffnet sich das Inspektions-Fenster "chrome://messenger/content/messenger.xul", in dem ein Element blau markiert ist, und zwar je nachdem wo ich gerade im Nachrichten-Header geklickt habe. Wenn ich z. B. auf "Betreff" geklickt habe, wird das Element "expandedsubjectBox" markiert. Wenn ich im Inspektions-Fenster auf darüber (oder darunter) liegende Elemente klicke, wird das jeweilige Element im Nachrichten-Header in einem roten blinkenden Rahmen angezeigt. Beim Klick auf "msgHeaderViewDeck" sieht es dann so aus:



    Jetzt klicke ich auf das Drop-down Symbol neben "Objekt", wähle "CSS-Regeln" und mache in der neuen Ansicht einen R-Klick auf "#msgHeaderView" > "Datei ansehen":



    Danach öffnet sich die entsprechende Datei "messageHeader.css" in einem neuen Fenster:



    Aus dieser Datei kopiere ich den Code und ändere ihn, so dass er nun folgendermaßen heißt:

    Code
    1. #msgHeaderView {
    2. font-size: 130%; }

    Diesen Code füge ich über ChromeEdit in die userChrome.css-Datei ein, speichere ihn und starte TB neu.
    Die Schriftgröße im Nachrichten-Header ist deutlich um 30% erhöht:



    Man erhält ein ähnliches Ergebnis, wenn man den Wert 100% zum Beispiel durch 16px oder auch 4mm ersetzt.

    3 Mal editiert, zuletzt von Mapenzi ()

  • Hallo Mapenzi,


    vielen Dank für deine beiden Beiträge 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!

  • Community-Bot

    Hat das Label Erledigt hinzugefügt