Symbole in der Unified Toolbar färben

    Hallo zusammen,

    ich habe in meinem Thunderbird die Symbole in der Unified Toolbar dauerhaft (siehe Screenshot) eingefärbt.

    Soweit funktioniert das ganze. Jedoch habe ich dabei jedes Symbol einzeln angesprochen. Siehe unten. ↓

    Gibt es eine elegante Lösung die sämtliche Einträge auf einmal erfasst?

    • Best Answer
    Quote from Alphatier

    Gibt es eine elegante Lösung die sämtliche Einträge auf einmal erfasst?

    Hallo,

    vielleicht nicht alle. Für die, die absolut gleiche Eigenschaften erhalten sollen, werden die Bezeichner gestapelt

    und mit Komma abgeschlossen. Der letzte Bezeichner erhält die offene geschweifte Klammer.

    Beispiel:

    CSS
    .unified-toolbar .quick-filter-bar .button-icon,
.unified-toolbar .write-message .button-icon,
.unified-toolbar .reply .button-icon,
.unified-toolbar .forward-inline .button-icon {
    background-color: #00BBFF !important;
  color: black !important;
}

    Probiert mal diese Kurzschreibweise. Bei mir funktioniert sie. Sie sollte auch funktionieren, da es sich bei den Selektoren nicht um direkte Kinder handelt.

    CSS
    .unified-toolbar-button, .quick-filter-bar, .write-message,
.reply, .forward-inline, .button-icon {
    background-color: #00BBFF !important;
    color: black !important;
}
    Quote from Bastler
    Quote from Alphatier

    Gibt es eine elegante Lösung die sämtliche Einträge auf einmal erfasst?

    Hallo,

    vielleicht nicht alle. Für die, die absolut gleiche Eigenschaften erhalten sollen, werden die Bezeichner gestapelt

    und mit Komma abgeschlossen. Der letzte Bezeichner erhält die offene geschweifte Klammer.

    Hallo Bastler,

    das funktioniert in diesem Fall hervorragend. :) Mein Code in der userChrome.css sieht jetzt so aus. ↓

    Damit habe ich alle Icons in der Unified Toolbar dauerhaft blau. Statt 40 Zeilen Code nur mehr 14.

    Zusätzlich habe ich dann noch diesen Code ↓ hinzugefügt.

    CSS
    /* Unified Toolbar: Farbe beim hovern */
.unified-toolbar-button:hover,
:is(.chromeclass-toolbar,#header-view-toolbox,#attachmentView,.lightning-notification-bar,#quick-filter-bar) .toolbarbutton-1:hover {
      background-color: #00BBFF !important;
      color: black !important;
}

    Jetzt werden die Felder blau wenn ich mit der Maus drüber fahre. Ich bedanke mich für die schnelle und kompetente Hilfe.

  • Alphatier August 24, 2023 at 12:43 PM

    Selected a post as the best answer.
    Quote from milupo

    Probiert mal diese Kurzschreibweise. Bei mir funktioniert sie. Sie sollte auch funktionieren, da es sich bei den Selektoren nicht um direkte Kinder handelt

    Der Eintrag funktioniert, jedoch wird dabei das Icon und das Feld mit der Schrift daneben dauerhaft blau. Ich hab's mit @Bastlers Hilfe ein wenig anders gelöst. Nichtsdestotrotz auch dir ein herzliches Danke für deinen Vorschlag.

    Quote from Alphatier

    Der Eintrag funktioniert, jedoch wird dabei das Icon und das Feld mit der Schrift daneben dauerhaft blau.

    Mein Code basiert ja auch nur auf Bastlers Code aus Beitrag #2 und es ging mir nur um die Kurzschreibweise, wie auch in diesem Beitrag von Bastler.

    Quote from Alphatier

    Statt 40 Zeilen Code nur mehr 14

    Hallo,

    in Summe doch 20, aber es geht noch kürzer. Das erste Päckchen spendiert einen Rahmen. Ohne Rahmen, natürlich noch kürzer! 8)

    Edited once, last by Bastler (August 25, 2023 at 1:37 AM).