1. Startseite
  2. Nachrichten
  3. Herunterladen
    1. Thunderbird Release-Version
    2. Thunderbird 128 ESR
    3. Thunderbird 115 ESR
    4. Thunderbird Beta-Version
    5. Sprachpaket (Benutzeroberfläche)
    6. Wörterbücher (Rechtschreibprüfung)
  4. Hilfe & Lexikon
    1. Anleitungen zu Thunderbird
    2. Fragen & Antworten (FAQ) zu Thunderbird
    3. Hilfe zu dieser Webseite
  5. Forum
    1. Unerledigte Themen
    2. Letzte Beiträge
    3. Themen der letzten 24 Stunden
  • Anmelden
  • Registrieren
  • 
  • Suche
Dieses Thema
  • Alles
  • Dieses Thema
  • Dieses Forum
  • Forum
  • Lexikon
  • Artikel
  • Seiten
  • Erweiterte Suche
  1. Thunderbird Mail DE
  2. Forum
  3. Hilfe zu Add-ons und manuellen Anpassungen
  4. Manuelle Anpassungen per CSS oder Script

Tabreiter einfärben

    • 115.*
    • Windows
  • Uwe-T
  • 12. Dezember 2023 um 09:08
  • Geschlossen
  • Unerledigt
  • Uwe-T
    Mitglied
    Reaktionen
    1
    Beiträge
    18
    Mitglied seit
    21. Jul. 2022
    • 12. Dezember 2023 um 09:08
    • #1

    Moin,
    ich würde gerne die offenen Tabs farblich absetzen per css.
    Bei mir sind immer offen:
    Mail, Kalender, Google Notizen, CardBook
    Die Reiter hätte ich gerne in verschiedenen Farben, da die sich kaum abheben im grau-in-grau.
    Ich habe es bisher nur bei Calendar geschafft, aber da auch nur, wenn er nicht aktiv ist.
    Wenn ich auf den Tab klicke ist er wieder grau.
    .tabmail-tab[type="calendar"] {  
    background-color: darkgreen !important;
    }
    Kann mir da jemand helfen ?
    Windows 10
    TB 115.5.2

    Bilder

    • tabs.JPG
      • 17,91 kB
      • 1.023 × 81
  • dharkness21
    Senior-Mitglied
    Reaktionen
    453
    Beiträge
    1.841
    Mitglied seit
    29. Jun. 2005
    Hilfreiche Antworten
    53
    • 12. Dezember 2023 um 20:00
    • #2
    Zitat von Uwe-T

    Ich habe es bisher nur bei Calendar geschafft, aber da auch nur, wenn er nicht aktiv ist.
    Wenn ich auf den Tab klicke ist er wieder grau.

    Für den primären Tab verwendest Du das ↓.

    CSS
    .tabmail-tab[type="undefined"] {
    background-color: #0082FC !important;
    }
    .tabmail-tab[type="undefined"][selected] {
    background-color: #006800 !important;
    }
    .tabmail-tab[type="undefined"]:hover,
    .tabmail-tab[type="undefined"][selected]:hover {
    background-color: #D1E2F2 !important;
    }

    Für Cardbook und Google Notizen musst Du mal schauen, ob Du daraus ↓ was bauen kannst, das Beispiel zielt auf Cardbook.

    CSS
    .tabmail-tab[label="Cardbook"] {
    background-color: #F20 !important;
    }
    .tabmail-tab[type="Cardbook"][selected] {
    background-color: #006800 !important;
    }
    .tabmail-tab[type="Cardbook"]:hover,
    .tabmail-tab[type="Cardbook"][selected]:hover {
    background-color: #D1E2F2 !important;
    }

    und wech

    Dharkness

  • Mapenzi
    Senior-Mitglied
    Reaktionen
    1.023
    Beiträge
    11.801
    Mitglied seit
    26. Mai. 2012
    Hilfreiche Antworten
    117
    • 12. Dezember 2023 um 20:16
    • #3

    Ich habe eine etwas andere Herangehensweise gewählt

    tab.tabmail-tab:nth-child(1) {
     background-color: lightblue !important ;
    }

    tab.tabmail-tab:nth-child(2) {
     background-color: blue !important ;
    color: white !important;
    }

    tab.tabmail-tab:nth-child(3) {
     background-color: green !important ;
    color: white !important;
    }

    tab.tabmail-tab:nth-child(4) {
     background-color: #DA70D6 !important ;
    color: white !important;
    }
    tab.tabmail-tab:nth-child(5) {
     background-color: red !important ;
    color: white !important;
    }

    tab.tabmail-tab[selected] {
     color: black !important;
    }

    Das sieht dann bei mir so aus:

  • dharkness21
    Senior-Mitglied
    Reaktionen
    453
    Beiträge
    1.841
    Mitglied seit
    29. Jun. 2005
    Hilfreiche Antworten
    53
    • 12. Dezember 2023 um 20:25
    • #4
    Zitat von Mapenzi

    Ich habe eine etwas andere Herangehensweise gewählt

    Ändert man mal die Reihenfolge der Tabs, wirbelt das die Farbgebung durcheinander.

    und wech

    Dharkness

  • Mapenzi
    Senior-Mitglied
    Reaktionen
    1.023
    Beiträge
    11.801
    Mitglied seit
    26. Mai. 2012
    Hilfreiche Antworten
    117
    • 12. Dezember 2023 um 21:47
    • #5
    Zitat von dharkness21

    Ändert man mal die Reihenfolge der Tabs, wirbelt das die Farbgebung durcheinander.

    Dessen bin ich mir durchaus bewusst, der Code wäre auch mehr auf meinen Fall zugeschnitten. Zum Testen und bei der Arbeit in Foren habe ich dauerhaft die selben sechs Tabs offen (Mail, Einstellungen, Add-ons, Kalender, Adressbuch, Konten-Einstellungen). Auch würde ich mich dann eher nach dem Namen im Tab orientieren als nach einer Farbe. Deshalb würde ich das für mich her als Farbspielerei ansehen.

    Ich habe deinen code getestet, er funktioniert hier nur zur Hälfte, sonts hätte ich meine sofort eingepackt.
    Aber ich werden versuchen, einen neuen Code zu basteln unter Benutzung deines .tabmail-tab[label="Xxxxxxx"]

  • Zitronella
    Mitglied
    Reaktionen
    80
    Beiträge
    175
    Mitglied seit
    17. Sep. 2020
    Hilfreiche Antworten
    3
    • 13. Dezember 2023 um 12:07
    • #6
    Zitat von dharkness21

    Für den primären Tab verwendest Du das ↓.

    also bei mir hat der aktive Tab damit aber keine neue Farbe, und das ist doch genau das Problem, welches der Themenersteller auch hat.

  • Grisu2099
    Senior-Mitglied
    Reaktionen
    350
    Beiträge
    486
    Mitglied seit
    8. Okt. 2023
    Hilfreiche Antworten
    5
    • 13. Dezember 2023 um 12:21
    • #7

    Ihr könntet mal diese Vorlage testen:

    CSS
    .tabmail-tab[label*="Kalender"] .tab-icon-image {
    	display: none !important;
    	}
    .tabmail-tab[label*="Kalender"] .tab-label {
    	margin: -2px 0 0 26px !important;
    	}
    .tabmail-tab[label*="Kalender"] .tab-background {
    	background: url("file:///F:/FIREFOX-ICONS/Icons/calendar-white.png") no-repeat 10px 5px !important;
        }
    .tabmail-tab[label*="Kalender"][selected] .tab-background {
    	background: green url("file:///F:/FIREFOX-ICONS/Icons/calendar-white.png") no-repeat 10px 5px !important;
        }
    Alles anzeigen

    Die Zeilen mit .tab-background natürlich entsprechend anpassen... ;)

  • MSFreak
    Senior-Mitglied
    Reaktionen
    1.032
    Beiträge
    3.874
    Mitglied seit
    23. Okt. 2019
    Hilfreiche Antworten
    79
    • 13. Dezember 2023 um 12:24
    • #8
    Zitat von Grisu2099

    Ihr könntet mal diese Vorlage testen:

    ... funktioniert.

    Gruß Micha

  • Zitronella
    Mitglied
    Reaktionen
    80
    Beiträge
    175
    Mitglied seit
    17. Sep. 2020
    Hilfreiche Antworten
    3
    • 13. Dezember 2023 um 12:37
    • #9
    Zitat von Grisu2099

    Ihr könntet mal diese Vorlage testen:

    Super Vorlage, denn damit bekommt man auch den aktiven Kalender Tab eingefärbt.

    Ich habe mal den Code verkürzt, sodass nur der Kalender Tab grün ist, sowohl wenn er aktiv, als auch wenn er inaktiv ist.

    CSS
    .tabmail-tab[type="calendar"] .tab-background {
    background: green !important;
    }
  • Bastler
    Gast
    • 13. Dezember 2023 um 13:09
    • #10
    Zitat von Zitronella

    und das ist doch genau das Problem, welches der Themenersteller auch hat.

    Hallo,
    wenn ich meinen Code (Senf) dazu geben darf…
    Die Farben sind ungewöhnlich angegeben (8 Stellen), die letzten beiden Stellen geben die Intensität vor.
    Mit diesem Code wird der "Haupt-Tab" und auch alle Mails in separatem Tab bedient.

    CSS
    /* ---ab hier Tabs unterschiedlich faerben--- */
    /* ---1. Haupt-Tab links--- */
    .tabmail-tab[crop="end"][linkedpanel="mail3PaneTab1"] .tab-background[selected="true"] {
    appearance: none !important;
      background-image: unset !important;
    color: #555 !important;
    background-color: #ff7f5066 !important;
    }
    .tabmail-tab[crop="end"][linkedpanel="mail3PaneTab1"]:hover {
    color: white !important;
    background-color: #ff7f5077 !important;
    }
    
    /* ---alle zusaetzlichen Mail-Tabs--- */
    .tabmail-tab[type="undefined"]:not([linkedpanel="mail3PaneTab1"]) .tab-background[selected="true"] {
    appearance: none !important;
      background-image: unset !important;
    color: #555 !important;
    background-color: #ff149322 !important;
    }
    .tabmail-tab[type="undefined"]:hover {
    color: white !important;
    background-color: #ff149333 !important;
    }
    
    /* ---Kalender-Tab--- */
    .tabmail-tab[type="calendar"] .tab-background[selected="true"] {
    appearance: none !important;
      background-image: unset !important;
    color: white !important;
    background-color: #6495ed55 !important;
    }
    .tabmail-tab[type="calendar"]:hover {
    color: white !important;
    background-color: #6495ed66 !important;
    }
    
    /* ---Aufgaben-Tab--- */
    .tabmail-tab[type="tasks"] .tab-background[selected="true"] {
    appearance: none !important;
      background-image: unset !important;
    color: white !important;
    background-color: #6a5acd33 !important;
    }
    .tabmail-tab[type="tasks"]:hover {
    color: white !important;
    background-color: #6a5acd44 !important;
    }
    Alles anzeigen
  • Community-Bot 13. Dezember 2024 um 04:31

    Hat das Thema geschlossen.

Aktuelle Programmversion

  • Thunderbird 138.0.1 veröffentlicht

    Thunder 13. Mai 2025 um 23:25

Aktuelle ESR-Version

  • Thunderbird 128.10.1 ESR veröffentlicht

    Thunder 14. Mai 2025 um 21:50

Keine Werbung

Hier wird auf Werbeanzeigen verzichtet. Vielleicht geben Sie dem Website-Betreiber (Alexander Ihrig - aka "Thunder") stattdessen etwas aus, um diese Seiten auf Dauer finanzieren zu können. Vielen Dank!

Vielen Dank für die Unterstützung!

Kaffee ausgeben für:

Per Paypal unterstützen*

*Weiterleitung zu PayPal.Me

Thunderbird Mail DE
  1. Impressum & Kontakt
  2. Datenschutzerklärung
    1. Einsatz von Cookies
  3. Nutzungsbedingungen
  4. Spendenaufruf für Thunderbird
Hilfe zu dieser Webseite
  • Übersicht der Hilfe zur Webseite
  • Die Suchfunktion benutzen
  • Foren-Benutzerkonto - Erstellen (Neu registrieren)
  • Foren-Thema erstellen und bearbeiten
  • Passwort vergessen - neues Passwort festlegen
Copyright © 2003-2025 Thunderbird Mail DE

Sie befinden sich NICHT auf einer offiziellen Seite der Mozilla Foundation. Mozilla®, mozilla.org®, Firefox®, Thunderbird™, Bugzilla™, Sunbird®, XUL™ und das Thunderbird-Logo sind (neben anderen) eingetragene Markenzeichen der Mozilla Foundation.

Community-Software: WoltLab Suite™