userChrome.css - Benennung der einzelner Elemente gesucht

  • Hallo,


    gibt es für die userChrome.css eine Übersicht über die Benennung der einzelnen Elemente?


    Danke


    • Thunderbird-Version: 38.2.0
    • Betriebssystem + Version: WIN7 32 Bit
  • Hallo mobby_x,


    userChrome.css.


    Gruß

    Feuerdrache

    „Innerhalb der Computergemeinschaft lebt man nach der Grundregel, die Gegenwart sei ein Programmfehler, der in der nächsten Ausgabe behoben sein wird.“
    Clifford Stoll, amerik. Astrophysiker u. Computer-Pionier

  • Hallo mobby_x,


    da kann ich Dir leider nicht helfen.


    Es gibt hier aber einige wenige Helfer, die sehr viel mit CSS-Code arbeiten und da an der einen oder anderen Stelle Dir helfen können. Ich denke, mit ein wenig Geduld Deinerseits, wirst Du darauf eine konkrete Antwort bekommen, die Dir dann weiterhilft.


    Gruß

    Feuerdrache

    „Innerhalb der Computergemeinschaft lebt man nach der Grundregel, die Gegenwart sei ein Programmfehler, der in der nächsten Ausgabe behoben sein wird.“
    Clifford Stoll, amerik. Astrophysiker u. Computer-Pionier

  • Du kannst die Benennung der Elemente selbst heraus finden mit dem "Entwickler-Werkzeugkasten". Du findest diesen zumindest ab Thunderbird 60 über das Menü Extras → Entwickler-Werkzeuge → Entwickler-Werkzeugkasten. Beim Aufrufen dieses Tools wird (meist hinter dem Hauptfenster) ein Dialog danach fragen, ob Du eine interne Netzwerkverbindung zulassen möchtest. Das musst Du erlauben. In dem Werkzeugkasten-Fenster findest Du links oben ein Element "Inspektor". Direkt links daneben ist ein Button, dessen Symbol eine Kasten+Mauspfeil zeigt. Da klickst Du drauf und gehst dann zu Deinem angefragten Element, dessen Bezeichnung Du wissen möchtest. Du wirst sehen, dass die Elemente beim "Hovern" mit der Maus rot umrandet werden. Klicke auf das gewünschte rot umrandete Ziel-Element. Dann wird der zugehörige Programmcode im separaten "Inspektor"-Fenster angezeigt und Du kannst dort schauen wie die "ID" des Elementes heißt.

  • Hallo,

    Ich frage vorsichtshalber, ob du vielleicht weißt, wie die Benennung - siehe Bild - heißt.

    als Alternative zu Thunders Vorschlag:

    Ich selber komme mit dem "Inspektor" des Entwickler-Werkzeugkastens nicht zurecht, benutze allerdings regelmäßig die sehr praktische "Stilbearbeitung" zum Bearbeiten der CSS-Code und zum Testen neuer Code in meinen userChrome.css und userContent.css Dateien.


    Wenn ich die Bezeichnung (ID) eines Elements suche, benutze ich immer noch die Erweiterung "DOM Inspector Plus" https://addons.thunderbird.net…d/addon/dom-inspector-dm/ zusammen mit der Erweiterung "InspectorWidget" https://addons.thunderbird.net…rd/addon/inspectorwidget/

    Der Button von InspectorWidget muss über "Anpassen" in die Hauptsymbolleiste gezogen werden.


    Dann genügt ein Klick auf "Inspect" und anschließend auf das zu untersuchende Element, um ein DOM-Inspektor Fenster zu öffnen.

    Wenn du z. B. auf "Betreff" geklickt hast, wird in dem neuen Fenster ein DOM-Knoten mit der ID "subjectCol" blau markiert. Damit hast du aber nur die ìD von einem der Elemente in der Kopfzeile "Betreff - Von -Datum - Größe ...".

    Also gehst du in der Knotenhierarchie weiter nach oben bis zum nächsthöheren Knoten "treecols" und machst einen Doppelklick auf diese Zeile (oder R-Klick > Element blinken lassen):





    Dies hat zur Folge, dass im Thunderbird-Hauptfenster die Kopfzeile der Nachrichten/Themenliste mehrfach rot aufblinkt:





    Die Benennung oder ID dieser Kopfzeile lautet also "threadCols". Wenn du sie in einer userChrome.css Datei verwenden willst, musst du noch das Zeichen # davor setzen, also #threadCols.

  • Danke beiden.

    Wo ich nun schon die Benennung dafür habe, müsste ich es so eingeben?



    #threadCols {background-color: #EFFBFB !important; -moz-appearance: none !important;

    }


    Die Farbe ist natürlich jetzt nur ein willkürliches Beispiel.

  • mail.bar3 funktioniert. threadCols nicht. Hab ich da etwas falsch geschrieben?



    #threadCols {background-color: #005400 !important; }


    #mail-bar3 {background-color: #00fafa !important; }

  • #threadCols {background-color: #005400 !important; }

    Bei mir funktioniert


    #threadCols treecol,

    #threadCols treecolpicker {

    background-color: #005400 !important; -moz-appearance: none !important; }


    Du musst dir aber bewusst sein, dass mit einem solchen Code der kleine Sortierpfeil ^ in der Spalte nicht mehr sichtbar ist.

    Man kann also nicht mehr erkennen, nach welcher Spalte und in welcher Richtung (auf- oder absteigend) sortiert wird. Ich habe bisher keinen Code gefunden, mit dem man den Pfeil trotz des geänderten Farbhintergrunds anzeigen könnte.

  • Ja gut, mit einer anderen Farbe ist alles zu sehen, was ich brauche.

    Jedenfalls geht's mit deinem Code, Mapenzi.


    Wie muss hier ...

    #button-reply {background-color: #ff0000 !important; }

    ... der Code aussehen, wenn ich nicht den Button, sondern den Text färben will?

    text-color geht offenbar nicht.

  • Danke.

    Und links der Pfeil?

    #button-reply .toolbarbutton-icon{

    color: #ff0000 !important; }


    icon geht nicht. X(

  • icon geht nicht

    Versuch mal


    #button-reply {

    list-style-image: url("chrome://messenger/skin/icons/reply.svg");

    color: #ff0000 !important; }


    Damit brauchst du wahrscheinlich keinen Code für den roten Button-Text mehr.

  • Mm. Nee, da ist alles im Urzustand. Das muss so da rein? chrome://messenger/skin/icons/reply.svg

  • Hab nochmal nachgeschaut. Es ist alles richtig kopiert. Vielleicht liegt es daran, dass es kein macOS ist?

  • Vielleicht liegt es daran, dass es kein macOS ist?

    Das kann durchaus sein, dass das entsprechende Pfad zum Icon des Antworten-Buttons im Code der Windows-Version von Thunderbird anders ist als für die Mac-Version.

    Du kannst das aber selber nachprüfen:

    öffne den "Entwickler-Werkzeugkasten" usw. von TB wie oben von Thunder beschrieben.

    Selektiere den Antworten-Button, dann müsstest du im Inspektor- Fenster ungefähr das gleiche sehen wie in meinem folgenden Screenshot:



    Schau in den rechten Kasten, den ich rot umrandet habe. Kopiere den Code von #button-reply an bis zur schließenden Klammer } und ergänze ihn durch color: #ff0000 !important;