Thunderbird 141 – userChrome.css: Farbverläufe, Ordnerbaum & Scrollbalken un vieles mehr nicht anpassbar.

Neddy

Hallo zusammen,

ich versuche, mein Thunderbird-Design mit einer userChrome.css anzupassen – leider mit gemischtem Erfolg.

Was bisher funktioniert:

✅ Farbverlauf im Hintergrund der Kopfzeile (Nachrichtenbereich)
✅ Farbgestaltung der Startseite (Account Central)

Was nicht oder nur teilweise funktioniert:

❌ Schriftart auf Arial Black wird nicht überall übernommen
❌ Farbverlauf im Ordnerbereich links (Mailkonten & Ordner) greift nicht
❌ Scrollbalken lassen sich nicht wie früher zweifarbig gestalten
❌ In der Kopfzeile sind Texte wie „Von“, „Betreff“, „An“ nur schwach sichtbar
❌ Das kleine Dreieck links neben „Von“ zum Einklappen der Kopfzeile fehlt

Ich nutze Thunderbird, Version 141.0. Die Datei liegt korrekt im Profilordner unter /chrome/userChrome.css, und toolkit.legacyUserProfileCustomizations.stylesheets ist auf true.

Ich habe bereits mit Microsoft Copilot daran gearbeitet und viele Varianten getestet, aber bei den oben genannten Punkten kommen wir nicht weiter. Hat jemand eine funktionierende Lösung oder aktuelle Selektoren für Thunderbird Supernova?
Alle funktionierende Code, die ich vom Forum erhielt, machen seit einigen Tagen bedauerlicherweise Probleme.

Ich bin von der Version 141.0 sogar zurück auf 128.13.0 durch die Wiederherstellung zu einem früheren Zeitpunkt gegangen, in der Hoffnung, dass dort die alten CSS's greifen. Das brachte auch keinen Erfolg.

Ich freue mich über jeden Hinweis oder Beispielcode – gerne modular, damit ich gezielt testen kann.

Neddy

Mapenzi

Hallo,

da wir nicht wissen welche Code du bisher für die von dir erwähnten Bereiche der GUI benutzt, wäre es nützlich, dass du den Inhalt deiner userChrome.css Datei hier anzeigst. Ein Screenshot deines Hauptfensters kann auch nicht schaden, wenn du private Daten unlesbar machst

Zitat von Neddy

Das kleine Dreieck links neben „Von“ zum Einklappen der Kopfzeile fehlt

Ist mir unbekannt. Bitte ein Bild zeigen.
Oder meist du vielleicht den Pfeil > links im Nachrichten-Header Bereich? Dieser Pfeil erscheint nur, wenn man die Erweiterung CompactHeaders installiert hat.

Zitat von Neddy

Hat jemand eine funktionierende Lösung oder aktuelle Selektoren für Thunderbird Supernova?

Die Selektoren lassen sich mittels des Entwickler-Werkzeugkastens ermitteln.
Lösungen kann man nur dann vorschlagen, wenn man weiß was du wo ändern willst.

dharkness21

Zitat von Neddy

Scrollbalken lassen sich nicht wie früher zweifarbig gestalten

Das geht nur noch über ein Javascript ** und es sind auch noch Vorbereitungen * nötig.

*
Hier die Erklärung was man genau machen muss, und die benötigten Dateien dazu:

https://github.com/Endor8/userChrome.js ... userChrome

Die Anleitung ist zwar für Firefox, kann aber eins-zu-eins für Thunderbird übernommen werden.

**

JavaScript

// Scrollbar.uc.js

"use strict";
/* Firefox userChrome.js tweaks - 'Custom Scrollbars' for Firefox ************************************************************ */
/* Original by Aris (aris-addons@gmx.net)************************************************************************************* */
/* Github: https://github.com/Aris-t2/CustomJSforFx/blob/master/scripts/custom_scrollbars.uc.js
/* *************************************************************************************************************************** */
/* Customized by Mira********************************************************************************************************* */
/* https://www.camp-firefox.de/forum/thema/135133-custom-scrollbars-uc-js-anpassen/ ****************************************** */
/* Scrollbar.v1.0.6.js    https://www.camp-firefox.de/forum/thema/135133/?postID=1207718#post1207718************************** */
/* https://www.camp-firefox.de/forum/thema/136152/?postID=1222989#post1222989************************************************* */
/* Scrollbar.v2.0.2.js    https://www.camp-firefox.de/forum/thema/136167/?postID=1223096#post1223096************************** */
/* Scrollbar.v2.0.3.js    https://www.camp-firefox.de/forum/thema/136167/?postID=1223124#post1223124************************** */
/* Scrollbar.v2.0.5.js    https://www.camp-firefox.de/forum/thema/136167/?postID=1223143#post1223143************************** */
/* Scrollbar.v2.0.6.1.js  https://www.camp-firefox.de/forum/thema/136167/?postID=1223162#post1223162************************** */
/* *************************************************************************************************************************** */
/* Custom Scrollbars for Firefox ********************************************************************************************* */
/* Version: 2.0.6.1 for Firefox 111+ ***************************************************************************************** */
/* ******************************************************************************************************************************

README

  about:config >
    widget.windows.overlay-scrollbars.enabled > false (Windows)
    widget.gtk.overlay-scrollbars.enabled > false (Linux)
  [!] The above preferences have to be set to 'false' for this code to work

  [!] DER STARTUP-CACHE MUSS NACH JEDER ÄNDERUNG GELÖSCHT WERDEN!
  -> Ordner 'startupCache' finden: Adressleiste > about:profiles > Lokales Verzeichnis > Ordner öffnen > startupCache
  -> Firefox schließen
  -> Inhalt des 'startupCache'-Ordners löschen

  Alternativ mit einem JavaScipt!
  -> https://github.com/Endor8/userChrome.js/blob/master/Firefox%2087/RestartFirefoxButtonM.uc.js

  Anpassungen vornehmen > Werte ändern
  - Optionen aktivieren/deaktivieren: true <-> false
  - Farbe
    - Name: red, blue, transparent
    - Hexcode: #33CCFF, #FFF
    - rgb(a): rgba(0,0,255,0.8)
    - hsl(a): hsla(240,100%,50%,0.8)
  - Zahlen: 1, 2, 3 ... 10, 11, 12 ...
  - Deckkraft (in Dezimalzahlen): 0.0 bis 1.0 z.B. 1.4 oder 1.75
  - Farbverläufe: linear-gradient(direction, color, color, color)
  - Beispiel für Farbverläufe: linear-gradient(to right, blue, #33CCFF, rgba(0,0,255,0.8))
  - vordefinierte Farbverläufe: transparent,rgba(255,255,255,0.5),transparent -> transparent,rgba(255,255,255,0.0),transparent
  - keine Farbe oder keine Farbwerte -> verwende "unset"

  218 -         max-width: ${custom_scrollbar_size_value}px !important;
  222 -         max-height: ${custom_scrollbar_size_value}px !important;
*/
/* *************************************************************************************************************************** */
(function() {

  // PROFILE PHATH "CALCULATE"
  let ProfileDirectory = PathUtils.toFileURI(PathUtils.join(PathUtils.profileDir, 'chrome', 'icons'));
  // GENERAL SCROLLBAR SETTINGS
  const custom_scrollbar_size_value = 17;               // in px // default: custom_scrollbar_size_value = 17
  // CUSTOM SCROLLBAR SETTINGS ("custom_scrollbar_" --> "cs_")
  const custom_scrollbars = true;                       // default: custom_scrollbars = true
  const custom_scrollbar_arrows = true;                 // default: custom_scrollbar_arrows = true
  const cs_thumb_border = 0;                            // default: cs_thumb_border = 0 / in px
  const cs_thumb_roundness = 0;                         // default: cs_thumb_roundness = 0 / in px
  const cs_buttons_border = 0;                          // default: cs_buttons_border = 0 / in px
  const cs_buttons_roundness = 0;                       // default: cs_buttons_roundness = 0 / in px
  const cs_thumb_minimal_size = 12;                     // default: cs_thumb_minimal_size = 12; / in px
  const cs_ignore_color_gradients = true;               // default: cs_ignore_color_gradients = false / 'flat' scrollbars
// CUSTOM SCROLLBAR COLORS/GRADIENTS
// - background
  const cs_background_color = "#1A1920";                // default: cs_background_color = "#DDDDDD"
  let cs_background_image_vertical = "unset";           // default: cs_background_image_vertical = "linear-gradient(to right,transparent,rgba(255,255,255,0.5),transparent)"
  let cs_background_image_horizontal = "unset";         // default: cs_background_image_horizontal = "linear-gradient(to bottom,transparent,rgba(255,255,255,0.5),transparent)"
  let cs_arrows_on_buttons_buttons_size = 1.1;          // default: cs_arrows_on_buttons_buttons_size = 1.0
// - corner
  const cs_corner_background_color = "#bfbfbf";         // default: cs_corner_background_color = "#DDDDDD" / - corner
  let cs_corner_background_image = "unset";             // default: cs_corner_background_image = "linear-gradient(45deg,transparent 30%,rgba(255,255,255,0.5) 50%,transparent 70%),linear-gradient(-45deg,transparent 30%,rgba(255,255,255,0.5) 50%,transparent 70%)"
// - thumb/slider
  const cs_thumb_color = "#474747";                     // default: cs_thumb_color = "#33CCFF" / thumb/slider
  let cs_thumb_image_vertical = "unset";                // default: cs_thumb_image_vertical = "linear-gradient(to right,transparent,rgba(255,255,255,0.5),transparent)"
  let cs_thumb_image_horizontal = "unset";              // default: cs_thumb_image_horizontal = "linear-gradient(to bottom,transparent,rgba(255,255,255,0.5),transparent)"
  const cs_thumb_hover_color = "#0082FC";                // default: cs_thumb_hover_color = "#66FFFF"
  let cs_thumb_hover_image_vertical = "unset";          // default: cs_thumb_hover_image_vertical = "linear-gradient(to right,transparent,rgba(255,255,255,0.5),transparent)"
  let cs_thumb_hover_image_horizontal = "unset";        // default: cs_thumb_hover_image_horizontal = "linear-gradient(to bottom,transparent,rgba(255,255,255,0.5),transparent)"
  const cs_thumb_border_color = "#B2B2B2";              // default: cs_thumb_border_color = "#33CCFF"
// - buttons
  const cs_buttons_color = "#5b5b66";                   // default: cs_buttons_color = "#66FFFF" "#5b5b66"/ buttons
  let cs_buttons_image_vertical = "unset";              // default: cs_buttons_image_vertical = "linear-gradient(to right,transparent,rgba(255,255,255,0.5),transparent)"
  let cs_buttons_image_horizontal = "unset";            // default: cs_buttons_image_horizontal = "linear-gradient(to bottom,transparent,rgba(255,255,255,0.5),transparent)"
  const cs_buttons_hover_color = "#0082FC";             // default: cs_buttons_hover_color = "#33CCFF"
  const cs_buttons_border_color = "#B2B2B2";            // default: cs_buttons_border_color = "#33CCFF" "#5b5b66"
  let cs_buttons_hover_image_vertical = "unset";        // default: cs_buttons_hover_image_vertical = "linear-gradient(to right,transparent,rgba(255,255,255,0.5),transparent)"
  let cs_buttons_hover_image_horizontal = "unset";      // default: cs_buttons_hover_image_horizontal = "linear-gradient(to bottom,transparent,rgba(255,255,255,0.5),transparent)"

/* *************************************************************************************************************************** */
  // unset background image color gradients -> flat scrollbars
  if(cs_ignore_color_gradients === true)
    cs_background_image_vertical
    = cs_background_image_horizontal
    = cs_corner_background_image
    = cs_thumb_image_vertical
    = cs_thumb_image_horizontal
    = cs_thumb_hover_image_vertical
    = cs_thumb_hover_image_horizontal
    = cs_buttons_image_vertical
    = cs_buttons_image_horizontal
    = cs_buttons_hover_image_vertical
    = cs_buttons_hover_image_horizontal
    = "unset";

  let custom_scrollbars_code='';
  let custom_scrollbar_arrows_code='';

  if(custom_scrollbars === true)
    custom_scrollbars_code=`
      slider, scrollcorner, scrollbar thumb, scrollbar scrollbarbutton {
        appearance: auto;
        -moz-default-appearance: none !important;
      }
      slider {
        background-color: ${cs_background_color} !important;
      }
      scrollbar[orient="vertical"] slider {
        background-image: ${cs_background_image_vertical} !important;
      }
      scrollbar[orient="horizontal"] slider {
        background-image: ${cs_background_image_horizontal} !important;
      }
      scrollcorner {
        background-color: ${cs_corner_background_color} !important;
        background-image: ${cs_corner_background_image} !important;
      }
      scrollbar thumb {
        background-color: ${cs_thumb_color} !important;
        border-radius: ${cs_thumb_roundness}px !important;
        box-shadow: inset 0 0 0 ${cs_thumb_border}px ${cs_thumb_border_color} !important;
      }
      scrollbar thumb[orient="vertical"] {
        background-image: ${cs_thumb_image_vertical} !important;
        min-height: ${(cs_thumb_minimal_size+cs_thumb_roundness+cs_thumb_border)}px !important;
      }
      scrollbar thumb[orient="horizontal"] {
        background-image: ${cs_thumb_image_horizontal} !important;
        min-width: ${(cs_thumb_minimal_size+cs_thumb_roundness+cs_thumb_border)}px !important;
      }
      scrollbar thumb:hover, scrollbar thumb:active {
        background-color: ${cs_thumb_hover_color} !important;
      }
      scrollbar thumb[orient="vertical"]:hover, scrollbar thumb[orient="vertical"]:active {
        background-image: ${cs_thumb_hover_image_vertical} !important;
      }
      scrollbar thumb[orient="horizontal"]:hover, scrollbar thumb[orient="horizontal"]:active {
        background-image: ${cs_thumb_hover_image_horizontal} !important;
      }
      scrollbar scrollbarbutton {
        background-color: ${cs_buttons_color} !important;
        border-radius: ${cs_buttons_roundness}px !important;
        box-shadow: inset 0 0 0 ${cs_buttons_border}px ${cs_buttons_border_color} !important;
        height: 17px !important;
        width: 17px !important;
      }
      scrollbar[orient="vertical"] scrollbarbutton {
        background-image: ${cs_buttons_image_vertical} !important;
      }
      scrollbar[orient="horizontal"] scrollbarbutton {
        background-image: ${cs_buttons_image_horizontal} !important;
      }
      scrollbar scrollbarbutton:hover {
        background-color: ${cs_buttons_hover_color} !important;
      }
      scrollbar[orient="vertical"] scrollbarbutton:hover {
        background-image: ${cs_buttons_hover_image_vertical} !important;
      }
      scrollbar[orient="horizontal"] scrollbarbutton:hover {
        background-image: ${cs_buttons_hover_image_horizontal} !important;
      }
    `;

  if(custom_scrollbar_arrows === true)
    custom_scrollbar_arrows_code=`
      scrollbarbutton[type="increment"],
      scrollbar[orient="vertical"] scrollbarbutton[type="decrement"],
      scrollbarbutton[type="increment"],
      scrollbar[orient="horizontal"] scrollbarbutton[type="decrement"] {
        background-repeat: no-repeat;
        background-position: center !important;  */
      }
      scrollbar[orient="vertical"] > scrollbarbutton[type="decrement"] {
        background-image: url("${ProfileDirectory}/Pfeil-hoch_gold.svg") !important;
      /*  background-position: top !important;  */
      }
      scrollbar[orient="vertical"] > scrollbarbutton[type="increment"] {
        background-image: url("${ProfileDirectory}/Pfeil-runter_gold.svg") !important;
      /*  background-position: bottom !important;  */
      }
      scrollbar[orient="horizontal"] > scrollbarbutton[type="decrement"] {
        background-image: url("${ProfileDirectory}/Pfeil-links_gold.svg") !important;
      /*  background-position: left !important;  */
      }
      scrollbar[orient="horizontal"] > scrollbarbutton[type="increment"] {
        background-image: url("${ProfileDirectory}/Pfeil-rechts_gold.svg") !important;
      /*  background-position: right !important;  */
      }

      /* hover */

      scrollbar[orient="vertical"] > scrollbarbutton[type="decrement"]:hover {
        background-image: url("${ProfileDirectory}/Pfeil-hoch_gold.svg") !important;
      }
      scrollbar[orient="vertical"] > scrollbarbutton[type="increment"]:hover {
        background-image: url("${ProfileDirectory}/Pfeil-runter_gold.svg") !important; */
      }
      scrollbar[orient="horizontal"] > scrollbarbutton[type="decrement"]:hover {
        background-image: url("${ProfileDirectory}/Pfeil-links_gold.svg") !important;
      }
      scrollbar[orient="horizontal"] > scrollbarbutton[type="increment"]:hover {
        background-image: url("${ProfileDirectory}/Pfeil-rechts_gold.svg") !important;
      }
      scrollbar[orient="vertical"] > scrollbarbutton {
        height: ${(custom_scrollbar_size_value*cs_arrows_on_buttons_buttons_size)}px !important;
      }
      scrollbar[orient="horizontal"] > scrollbarbutton {
        width: ${(custom_scrollbar_size_value*cs_arrows_on_buttons_buttons_size)}px !important;
      }
    `;

  Components.classes["@mozilla.org/content/style-sheet-service;1"]
    .getService(Components.interfaces.nsIStyleSheetService)
      .loadAndRegisterSheet(Services.io.newURI("data:text/css;charset=utf-8," + encodeURIComponent(`
        ${custom_scrollbars_code}
        ${custom_scrollbar_arrows_code}
  `), null, null),

  Components.classes["@mozilla.org/content/style-sheet-service;1"]
    .getService(Components.interfaces.nsIStyleSheetService).AGENT_SHEET);

})()

Alles anzeigen

dharkness21

Zitat von Mapenzi

Ist mir unbekannt. Bitte ein Bild zeigen.
Oder meist du vielleicht den Pfeil > links im Nachrichten-Header Bereich? Dieser Pfeil erscheint nur, wenn man die Erweiterung CompactHeaders installiert hat.

Die Wahrscheinlichkeit ist ausgesprochen hoch, das die Erweiterung CompactHeaders gemeint ist, denn ohne entsprechende Erweiterung gibt es dort keinen Twisty.

Mapenzi

Zitat von dharkness21

Das geht nur noch über ein Javascript

Auf meinem Mac funktioniert folgender CSS Code (die Hintergrundfarbe "Gelb" ist für den Screenshot gewählt wegen des größeren Kontrasts)

Code

/* Scrollbar colors 1-Thumb 2-Background */
:root {
scrollbar-color: #96CDCD yellow; 
}

dharkness21

Zitat von Mapenzi

Auf meinem Mac funktioniert folgender CSS Code

Mittels Javascript geht mehr, guckst Du da ↓.

Neddy · CSS-Codeliste noch oder teilweise gültig - fraglich (Stand 31.07.2025).txt

Zitat von dharkness21

den Pfeil > links im Nachrichten-Header Bereich?

Hallo,

Ja, du hast Recht: Bei mir ist seit TB 140 mit den Farben alles aus den Rudern gelaufen.
Ordnerbaum, Nachrichtenliste, Kopfzeile und Nachrichtenbereich.
Meine komplette CSS muss leider umgeschrieben werden.
Meine CSS-Codeliste (im Anhang) ist sie noch oder teilweise gültig ? (Stand 31.07.2025).txt

Güße
Neddy

dharkness21

Kannst Du das bitte als Code-Block ↓ einfügen, Dankeschön.

dharkness21

Du kopierst den Inhalt der userChrome.css, klickst bei Code-Block einfügen* auf den Pfeil, dann klickst Du auf Automatische Erkennung und klickst dort auf CSS und klickst dann auf Einfügen, in den Kasten der dann erscheint, fügst Du dann den kopierten Inhalt der userChrome.css ein.

*

Neddy

CSS

CSS-Codeliste noch gültig?

/*
====================================================================
? Thunderbird Benutzeroberfläche – Benutzerdefiniertes Design
?? Version: TB 140.0.1 | (128.13.0 esr) Gesamtfassung Stand: 31.07.2025 (bereinigt)
?? Basis: Code vom 08.01.2025 + Ergänzungen
?? Hinweis:  about:config
     - toolkit.legacyUserProfileCustomizations.stylesheets` ? true
     - devtools.chrome.enabled` ? true 
========================================================>===========
*/
/*
===========================================================
? Anleitung: Div. Mails zus. als Tabs öffnen
Ordnerbaum > Posteingang je Mail-Kto. Anzahl: Div. ? > anklicken
= Nachrichtenliste > Strg + A + Enter
Bestätigungs-Fenster div. Nachrichten bestätigen ? OK
Tabs erscheinen oben > Senkrecht-Dreieck (rechts) > 
Überhangliste mit Scrolli (Scrollbar-color: #CC6699 #666699) erscheint.
===========================================================
*/
/*
===============================================
 ??? ? 1. Variante – TEST: Tabs scrollbar & kompakt ???
===============================================
*/
tab {
  min-width: 100px !important;       /* Tabbreite verringert */
  height: 30px !important;           /* Tabhöhe kompakter */
  margin-right: 2px !important;      /* Abstand zwischen Tabs */
}
tabs {
  overflow-x: auto !important;       /* horizontales Scrollen */
  scroll-behavior: smooth !important;
  display: flex !important;          /* Flexbox aktivieren */
}
tabpanels {
  padding: 0 !important;             /* Abstand zu Inhalt minimieren */
}
/*
================================================
???? ? Ende 1. Variante – Tabs scrollbar & kompakt ????
================================================
*/
/*
==============================================
 ? 2. Variante – Tabs scrollbar & kompakt (kompaktstil)
==============================================
*/
tab {
  min-width: 100px !important;
  height: 30px !important;
  margin-right: 2px !important;
}
tabs {
  overflow-x: auto !important;
  scroll-behavior: smooth !important;
  display: flex !important;
}
tabpanels {
  padding: 0 !important;
}
/*
=======================================
 ? Ende 2. Variante – Tabs scrollbar & kompakt
=======================================
*/
/* ??? ? Begriffstabelle für CSS-Tests (intern) ??? */
/*
? Bereich      | Tabs, Baum, Menü
? Status        | Funktioniert stabil & gewünscht
? Status        | Noch fehlerhaft oder unsicher
? Testcode   | Neuer Versuch, Beobachtung läuft
? Datum        | Wann getestet / ergänzt
? Notizen      | Verhalten, Besonderheiten
*/

/* -- -Hier beginnen die CSS ohne obige Notizen, da sie keine Relevanz für die Code  haben --- */

/* ? Farbverläufe */
/* Farbverlauf TB-Kopfzeile im Nachrichtenbereich (z.?B. Betreff, Von, An) */
#msgHeaderView {
  background: linear-gradient(#BA78AB, #666699) !important;
  min-height: 72px !important;
  /* ? Erklärung: Verleiht dem Nachrichtenkopf ein visuelles Highlight in TB */
}
/* Hintergrund-Farbverlauf links TB Ordnerbaum */
#folderPane {
  appearance: none !important;
  background: linear-gradient(#BA78AB, #666699) !important;
  /* ? Erklärung: Gestaltung des linken Bereichs für Ordnerübersicht */
}
/* ? Account Central – TB-Farbgestaltung der Startseite */
/* Gestaltung der Begrüßungsseite / Accountübersicht */

#accountCentral,
.account-central-section,
.account-central-section > h2,
.account-central-section > div,
#accountCentral > *:first-child {
  background-color: #BA78AB !important;
  color: #ffffff !important;
  /* ? Erklärung: Einheitliche Farbgestaltung der Account-Übersicht */
}
/*
-----------------------------------------------------------------------------------------------------------------------------------------------------------------------
? Abschnitt 2/6 – Schriftgrößen, Composer (Verfassen)-Fenster, Nachrichtenliste & Ordnerbaum
-----------------------------------------------------------------------------------------------------------------------------------------------------------------------       
*/                   
/*
===========================================
? Ordnerbaum-Konten: Schriftart, -Größe & -Höhe
Schrift in Ordnernamen (Posteingang, Gesendet etc.)
===========================================
/* Höhe der einzelnen Ordnerzeilen */
#folderTree > treechildren::-moz-tree-row {
  height: 10px !important;          /* ?? Ursprüngliche Zeilenhöhe – wird durch folgende Regel überschrieben */
  /* ? Erklärung: Verringert die Zeilenhöhe, damit mehr Ordner auf einmal sichtbar sind */
}
/* ?? Geändert: Höhe auf sinnvolle 24px angepasst (10px ist zu wenig für die Darstellung) */
#folderTree > treechildren::-moz-tree-row {
  height: 24px !important;          /* ?? geändert: von 10 auf 24px Schrifthöhe angepasst */
  /* ? Erklärung: Optimierte Zeilenhöhe für gute Lesbarkeit der Ordner */
}
/*
===================================================
? Nachrichten-Eingabefeld oder Kopfzeile - (Compose-Fenster)
Betreffzeile im Composer-Fenster (neue Nachricht)
===================================================
*/
@-moz-document url-prefix("chrome://messenger/content/messengercompose/messengercompose.xhtml") {
  #msgSubject {
    font-size: 21px !important;
    font-weight: bold !important;
    font-family: Arial Black !important;
    /* ? Erklärung: Der Betreff wird prominent und deutlich dargestellt */
  }
}
/*
============================================
? Nachrichtenliste / ThreadPane
Farb-Alternative: #BA78AB, #DBA2CC
Liste aller E-Mails in einem Ordner (z.?B. Posteingang)
============================================
*/
#threadTree {
  font-size: 30px !important;
  font-family: Arial Black !important;
  background-color: #9FA2D5 !important;
  /* ? Erklärung: Große Schrift in der Mail-Liste sorgt für bessere Lesbarkeit */
}
/* ?? Geändert: Zeilenhöhe ebenfalls auf 24px angepasst */
#threadTree > treechildren::-moz-tree-row {
  font-family: Arial Black !important;
  height: 24px !important;          /* ?? geändert: Höhe von 10 auf 24px korrigiert für Darstellung */
  /* ? Erklärung: Kompakte Ansicht innerhalb der Mail-Liste mit besserem Platz für Inhalte */
}
/* ?? Deaktiviert – Funktioniert nicht: `fill` wirkt nicht auf Tree-Icons in TB */
#threadTree treechildren::-moz-tree-image(unread) {
  fill: #990000 !important;
  /* ?? deaktiviert – siehe Hinweis: keine Wirkung unter aktuellen TB-Versionen */
}
/* ? Hinzugefügt: funktionierender SVG-Punkt für ungelesene Nachrichten */
#threadTree treechildren::-moz-tree-image(unread) {
  list-style-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='8' height='8'><circle cx='4' cy='4' r='4' fill='%23990000'/></svg>") !important;
  /* ? Erklärung: Roter Punkt erscheint zuverlässig bei ungelesener Mail */
}
/*
========================================
? HG-Farbe für Server-Zeile in Konten (optional)
========================================

/* ? Hebt die Hauptkonto-Zeile im Ordnerbaum farblich hervor */
#folderTree treechildren::-moz-tree-cell-text(isServer-true) {
  background-color: #DBA2CC !important;
  color: black !important;
}

/*
-----------------------------------------------------------------------------------------------------------------------------------
? Abschnitt 3/6 – Scrollbars, Nachrichtenvorschau, Toolbars & Menüleisten
------------------------------------------------------------------------------------------------------------------------------------
*/
/*
============================================
?? Scrollbars (Scrollbar-Stil im gesamten Thunderbird)
============================================
*/
scrollbar {
  -moz-appearance: none !important;
  background-color: #BCA5D4 !important;
  width: 16px !important;
  /* ? Erklärung: Einheitlicher Look für Scrollbars – helle violette Farbe */
}

scrollbar thumb {
  background-color: #673A95 !important;
  border-radius: 6px !important;
  /* ? Erklärung: Dunkler Scrollbalken mit abgerundeten Ecken für eleganten Look */
}
/*
=========================================
? Vorschau-Fenster (Nachrichtenvorschau unten)
=========================================
*/
#messagepane {
  font-size: 22px !important;
  font-family: Arial Black !important;
  background-color: #F1E5FF !important;
  /* ? Erklärung: Vorschau leserlich mit großer Schrift & hellem Hintergrund */
}
/*
========================================
? Toolbars: Button-Schrift und Hintergrundfarbe
========================================
*/
toolbarbutton {
  font-size: 18px !important;
  font-family: Arial Black !important;
  color: black !important;
  background-color: #C8A2C8 !important;
  border-radius: 4px !important;
  /* ? Erklärung: Klare Buttons mit auffälliger Hintergrundfarbe */
}
/*
===========================
? Menüleisten: Schrift und Farbe
===========================
*/
menubar {
  font-size: 18px !important;
  font-family: Arial Black !important;
  color: #000000 !important;
  background-color: #D2B9D3 !important;
  /* ? Erklärung: Menüleiste mit klarer Struktur und gut lesbarer Schrift */
}
/*
---------------------------------------------------------------------------------------------------------
? Abschnitt 4/6 – Tooltip-Stil, Fensterrahmen & Statusleiste
---------------------------------------------------------------------------------------------------------
*/
/*
====================================================
? Tooltip-Stil (z.?B. wenn man mit der Maus über Buttons fährt)
====================================================
*/
tooltip {
  font-size: 16px !important;
  font-family: Arial Black !important;
  color: #000000 !important;
  background-color: #F2DFFF !important;
  border: 1px solid #673A95 !important;
  border-radius: 5px !important;
  padding: 4px !important;
  /* ? Erklärung: Tooltips werden gut lesbar und visuell angenehm dargestellt */
}
/*
===================================
? Rahmen um das Hauptfenster (optional)
Kann das Gesamtlayout visuell begrenzen
===================================
*/
#messengerWindow {
  border: 5px solid #C0A0D0 !important;
  border-radius: 10px !important;
  /* ? Erklärung: Verleiht dem Hauptfenster einen dekorativen Rahmen */
}
/*
================================================
? Statusleiste unten (ganz unten im Thunderbird-Fenster)
================================================
*/
statusbar {
  font-size: 15px !important;
  font-family: Arial Black !important;
  background-color: #EADCF2 !important;
  color: #000000 !important;
  border-top: 2px solid #BCA5D4 !important;
  /* ? Erklärung: Klarer Kontrast zur Statusleiste mit eleganter Farbgebung */
}
/*
----------------------------------------------------------------------------------------------------------
? Abschnitt 5/6 – Kalenderansicht, Adressbuch & Suchleiste
----------------------------------------------------------------------------------------------------------
*/
/*
================================================
? Kalender: Tagesansicht, Wochenansicht, Monatsansicht
================================================
*/
.calendar-day-view, .calendar-week-view, .calendar-month-view {
  font-size: 18px !important;
  font-family: Arial Black !important;
  background-color: #F7F0FF !important;
  color: black !important;
  /* ? Erklärung: Einheitliche Optik im Kalender mit gut lesbarer Schrift */
}
/*
==================================
?? Adressbuch: Listenansicht & Kontakte
==================================
*/
#abResultsTree {
  font-size: 20px !important;
  font-family: Arial Black !important;
  background-color: #EFE0F8 !important;
  color: black !important;
  /* ? Erklärung: Kontaktliste mit großer, kontrastreicher Schrift */
}
#abResultsBox {
  border: 2px solid #BCA5D4 !important;
  border-radius: 8px !important;
  /* ? Erklärung: Visuelle Rahmung des Adressbuch-Bereichs */
}
/*
=====================================
? Suchleiste (oberhalb der Nachrichtenliste)
=====================================
*/
#searchInput {
  font-size: 18px !important;
  font-family: Arial Black !important;
  background-color: #F0DDF9 !important;
  color: black !important;
  border: 1px solid #673A95 !important;
  border-radius: 4px !important;
  /* ? Erklärung: Suchfeld wird deutlich sichtbar und optisch eingebettet */
}
/*
--------------------------------------------------------------------------------------------------------------------
? Abschnitt 6/6 – Systemfarben, E-Mail-Buttons & Spezialelemente
---------------------------------------------------------------------------------------------------------------------
*/
/*
==============================================
? Systemfarben überschreiben (z.?B. Dialoge, Rahmen)
==============================================
*/
:root {
  --system-color-background: #F9F0FF !important;
  --system-color-text: #000000 !important;
  --system-color-accent: #A175D1 !important;
  /* ? Erklärung: Einheitliche Farbpalette für Thunderbird-Systemelemente */
}
/*
===================================================
? Buttons innerhalb von E-Mails (Antworten, Weiterleiten etc.)
===================================================
*/
.mail-action-button {
  font-size: 17px !important;
  font-family: Arial Black !important;
  background-color: #D3A3E1 !important;
  color: black !important;
  border-radius: 5px !important;
  padding: 6px 12px !important;
  /* ? Erklärung: Klare und visuell hervorgehobene Buttons für Mailaktionen */
}
/*
======================================================
? Anhangsbereich (Attachment Pane bei empfangener Nachricht)
======================================================
*/
.attachmentList {
  font-size: 16px !important;
  font-family: Arial Black !important;
  background-color: #F0E3FF !important;
  border: 1px solid #BCA5D4 !important;
  border-radius: 5px !important;
  padding: 4px !important;
  /* ? Erklärung: Anhangsliste übersichtlich und optisch eingebettet */
}
/*
======================================
? Ladeindikator / Fortschrittsbalken (optional)
======================================
*/
progress {
  background-color: #E0CCE8 !important;
}
progress::-moz-progress-bar {
  background-color: #673A95 !important;
  /* ? Erklärung: Ladeleisten im Design integriert – harmonisch in der Farbpalette */
}
/*--------------------------------------------
Abschnitte: 1 bis 6  Ende !!!
-----------------------------------------------
*/

Alles anzeigen

dharkness21

Neddy,
jetzt fehlt uns noch ein anonymisierter Screenshot, wir müssen den Ist-Zustand sehen, dann können wir uns ans Werk machen.

Neddy

Zitat von dharkness21

etzt fehlt uns noch ein anonymisierter Screenshot

Prima - was brauchst du genau
Bilder, wie Thunderbird jetzt mit und ohne Farbe aussieht?
Die jetzige Chrome mit:
userChrome.css, userChrome.js, userChrome.manifest, userContent.css

Grüße Neddy

dharkness21

Zitat von Neddy

Prima - was brauchst du genau
Bilder, wie Thunderbird jetzt mit und ohne Farbe aussieht?

Verwendest Du ein Theme?

Neddy

Zitat von dharkness21

Verwendest Du ein Theme?

Ja - Compact Headers
Ausschließlich für die TB-Kopfzeile zum Auf- und Zuklappen

dharkness21

Zitat von Neddy

Ja - Compact Headers

Das ist kein Theme, das ist ein/e Add-on/Erweiterung.

Neddy

Zitat von dharkness21

Das ist kein Theme

Zitat von dharkness21

Das ist kein Theme, das ist ein/e Add-on/Erweiterung.

Ach so
Ich verwende kein Thunderbird-Theme, sondern das Standard-Design. Mein Betriebssystem ist Windows 11 mit dem [hellen/dunklen] System-Theme. Vermute ich - angepunktet ist nichts.

dharkness21

Hallo Neddy,

hier mal ein erster Versuch, ist aber noch nicht wirklich fertig, schau bitte mal, was passt und was nicht.

CSS

/* ====================================================================
? Thunderbird Benutzeroberfläche – Benutzerdefiniertes Design
?? Version: TB 140.0.1 | (128.13.0 esr) Gesamtfassung Stand: 31.07.2025 (bereinigt)
?? Basis: Code vom 08.01.2025 + Ergänzungen
?? Hinweis:  about:config
     - toolkit.legacyUserProfileCustomizations.stylesheets` ? true
     - devtools.chrome.enabled` ? true 
===================================================================== */
/* ===========================================================
? Anleitung: Div. Mails zus. als Tabs öffnen
Ordnerbaum > Posteingang je Mail-Kto. Anzahl: Div. ? > anklicken
= Nachrichtenliste > Strg + A + Enter
Bestätigungs-Fenster div. Nachrichten bestätigen ? OK
Tabs erscheinen oben > Senkrecht-Dreieck (rechts) > 
Überhangliste mit Scrolli (Scrollbar-color: #CC6699 #666699) erscheint.
=========================================================== */

/* Die verschiedenen Leisten farblich anpassen. */
#unifiedToolbar,
#tabs-toolbar {
  background-image: none !important;
  background-color: #666699 !important;
}

#toolbar-menubar {
  background-color: #9FA2D5 !important;
}

.icons-beside-text {
  min-height: 32px !important;
  max-height: 32px !important;
}

/* ===============================================
 ??? ? 1. Variante – TEST: Tabs scrollbar & kompakt ???
=============================================== */
tab {
  min-width: 100px !important;       /* Tabbreite verringert */
  height: 30px !important;           /* Tabhöhe kompakter */
  margin-right: 2px !important;      /* Abstand zwischen Tabs */
}
tabs {
  overflow-x: auto !important;       /* horizontales Scrollen */
  scroll-behavior: smooth !important;
  display: flex !important;          /* Flexbox aktivieren */
}
tabpanels {
  padding: 0 !important;             /* Abstand zu Inhalt minimieren */
}
/* ====================================================
???? ? Ende 1. Variante – Tabs scrollbar & kompakt ????
==================================================== */

/* ====================================================
 ? 2. Variante – Tabs scrollbar & kompakt (kompaktstil)
==================================================== */
tab {
  min-width: 100px !important;
  height: 30px !important;
  margin-right: 2px !important;
}
tab {
  .tab-background {
    background: none !important;
    background-color: #DBA2CC !important;
  }
}
tab[selected="true"] {
  .tab-background {
    background-color: #BA78AB !important;
  }
}
.tab-line {
  display: none !important;
}

tabs {
  overflow-x: auto !important;
  scroll-behavior: smooth !important;
  display: flex !important;
}
tabpanels {
  padding: 0 !important;
}
/* ===========================================
 ? Ende 2. Variante – Tabs scrollbar & kompakt
=========================================== */
/* ??? ? Begriffstabelle für CSS-Tests (intern) ??? */
/*
? Bereich      | Tabs, Baum, Menü
? Status       | Funktioniert stabil & gewünscht
? Status       | Noch fehlerhaft oder unsicher
? Testcode     | Neuer Versuch, Beobachtung läuft
? Datum        | Wann getestet / ergänzt
? Notizen      | Verhalten, Besonderheiten
*/

/* --- Hier beginnen die CSS ohne obige Notizen, da sie keine Relevanz für die Code  haben --- */

/* ? Farbverläufe */
/* Farbverlauf TB-Kopfzeile im Nachrichtenbereich (z.?B. Betreff, Von, An) */
#msgHeaderView {
  background: linear-gradient(#BA78AB, #666699) !important;
  min-height: 72px !important;
  /* ? Erklärung: Verleiht dem Nachrichtenkopf ein visuelles Highlight in TB */
}
/* Hintergrund-Farbverlauf links TB Ordnerbaum */
#folderPane {
  appearance: none !important;
  background: linear-gradient(#BA78AB, #666699) !important;
  /* ? Erklärung: Gestaltung des linken Bereichs für Ordnerübersicht */
}
/* ? Account Central – TB-Farbgestaltung der Startseite */
/* Gestaltung der Begrüßungsseite / Accountübersicht */

#accountCentral,
.account-central-section,
.account-central-section > h2,
.account-central-section > div,
#accountCentral > *:first-child {
  background-color: #BA78AB !important;
  color: #ffffff !important;
  /* ? Erklärung: Einheitliche Farbgestaltung der Account-Übersicht */
}

/* Tagesplan */
#agenda {
  appearance: none !important;
  background: linear-gradient(#BA78AB, #666699) !important;
  /* ? Erklärung: Gestaltung des linken Bereichs für Ordnerübersicht */
}

/* ---------------------------------------------------------------------------------------------------------------
? Abschnitt 2/6 – Schriftgrößen, Composer (Verfassen)-Fenster, Nachrichtenliste & Ordnerbaum
---------------------------------------------------------------------------------------------------------------- */                   
/* ===================================
? Ordnerbaum-Konten: Schriftart, -Größe & -Höhe
Schrift in Ordnernamen (Posteingang, Gesendet etc.)
===================================== */
/* Höhe der einzelnen Ordnerzeilen */
#folderTree li > .container {
  height: 10px !important;          /* ?? Ursprüngliche Zeilenhöhe – wird durch folgende Regel überschrieben */
  /* ? Erklärung: Verringert die Zeilenhöhe, damit mehr Ordner auf einmal sichtbar sind */
}
/* ?? Geändert: Höhe auf sinnvolle 24px angepasst (10px ist zu wenig für die Darstellung) */
#folderTree li > .container {
  height: 24px !important;          /* ?? geändert: von 10 auf 24px Schrifthöhe angepasst */
  /* ? Erklärung: Optimierte Zeilenhöhe für gute Lesbarkeit der Ordner */
}
/*
===================================================
? Nachrichten-Eingabefeld oder Kopfzeile - (Compose-Fenster)
Betreffzeile im Composer-Fenster (neue Nachricht)
===================================================
*/
@-moz-document url-prefix("chrome://messenger/content/messengercompose/messengercompose.xhtml") {
  #msgSubject {
    font-size: 21px !important;
    font-weight: bold !important;
    font-family: Arial Black !important;
    /* ? Erklärung: Der Betreff wird prominent und deutlich dargestellt */
  }
}
/*
============================================
? Nachrichtenliste / ThreadPane
Farb-Alternative: #BA78AB, #DBA2CC
Liste aller E-Mails in einem Ordner (z.?B. Posteingang)
============================================
*/
#threadTree {
  font-size: 30px !important;
  font-family: Arial Black !important;
  background-color: #9FA2D5 !important;
  /* ? Erklärung: Große Schrift in der Mail-Liste sorgt für bessere Lesbarkeit */
}
/* ?? Geändert: Zeilenhöhe ebenfalls auf 24px angepasst */
#threadTree > treechildren::-moz-tree-row {
  font-family: Arial Black !important;
  height: 24px !important;          /* ?? geändert: Höhe von 10 auf 24px korrigiert für Darstellung */
  /* ? Erklärung: Kompakte Ansicht innerhalb der Mail-Liste mit besserem Platz für Inhalte */
}
/* ?? Deaktiviert – Funktioniert nicht: `fill` wirkt nicht auf Tree-Icons in TB */
#threadTree treechildren::-moz-tree-image(unread) {
  fill: #990000 !important;
  /* ?? deaktiviert – siehe Hinweis: keine Wirkung unter aktuellen TB-Versionen */
}
/* ? Hinzugefügt: funktionierender SVG-Punkt für ungelesene Nachrichten */
#threadTree treechildren::-moz-tree-image(unread) {
  list-style-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='8' height='8'><circle cx='4' cy='4' r='4' fill='%23990000'/></svg>") !important;
  /* ? Erklärung: Roter Punkt erscheint zuverlässig bei ungelesener Mail */
}
/*
========================================
? HG-Farbe für Server-Zeile in Konten (optional)
========================================

/* ? Hebt die Hauptkonto-Zeile im Ordnerbaum farblich hervor */
/* #folderTree treechildren::-moz-tree-cell-text(isServer-true) */
li[data-server-type="imap"] > .container {
  margin-top: 2px !important;
}
li[data-server-type="imap"] > .container {
  background-color: #DBA2CC !important;
  color: black !important;
}

/* ----------------------------------------------------------------------
? Abschnitt 3/6 – Scrollbars, Nachrichtenvorschau, Toolbars & Menüleisten
---------------------------------------------------------------------- */
/* ===================================================
?? Scrollbars (Scrollbar-Stil im gesamten Thunderbird)
=================================================== */
scrollbar {
  -moz-appearance: none !important;
  background-color: #BCA5D4 !important;
  width: 16px !important;
  /* ? Erklärung: Einheitlicher Look für Scrollbars – helle violette Farbe */
}

scrollbar thumb {
  background-color: #673A95 !important;
  border-radius: 6px !important;
  /* ? Erklärung: Dunkler Scrollbalken mit abgerundeten Ecken für eleganten Look */
}
/* ===========================================
? Vorschau-Fenster (Nachrichtenvorschau unten)
=========================================== */
#messagepane {
  font-size: 22px !important;
  font-family: Arial Black !important;
  background-color: #F1E5FF !important;
  /* ? Erklärung: Vorschau leserlich mit großer Schrift & hellem Hintergrund */
}

/* ============================================
? Toolbars: Button-Schrift und Hintergrundfarbe
============================================ */
#header-view-toolbar {
  background: none !important;
}

#messageHeader #header-view-toolbox {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}
#messageHeader #expandedfromRow {
  margin-top: -12px !important;
}
#messageHeader[compact="compact"] #header-view-toolbox {
  padding-top: 0 !important;
  padding-bottom: 10px !important;
  margin-top: -6px !important;
}
#messageHeader[compact="compact"] #expandedfromRow {
  margin-top: 26px !important;
}

li.extension-action > div > button {
  font-family: Arial Black !important;
  color: black !important;
  background-color: #C8A2C8 !important;
  border-radius: 4px !important;
  /* ? Erklärung: Klare Buttons mit auffälliger Hintergrundfarbe */
}
toolbarbutton {
  font-size: 18px !important;
  font-family: Arial Black !important;
  color: black !important;
  background-color: #C8A2C8 !important;
  border-radius: 4px !important;
  /* ? Erklärung: Klare Buttons mit auffälliger Hintergrundfarbe */
}
/*
===========================
? Menüleisten: Schrift und Farbe
===========================
*/
menubar {
  font-size: 18px !important;
  font-family: Arial Black !important;
  color: #000000 !important;
  background-color: #D2B9D3 !important;
  /* ? Erklärung: Menüleiste mit klarer Struktur und gut lesbarer Schrift */
}
/* ---------------------------------------------------------------------------------------------------------
? Abschnitt 4/6 – Tooltip-Stil, Fensterrahmen & Statusleiste
--------------------------------------------------------------------------------------------------------- */
/* ============================================================
? Tooltip-Stil (z.?B. wenn man mit der Maus über Buttons fährt)
============================================================ */
tooltip {
  font-size: 16px !important;
  font-family: Arial Black !important;
  color: #000000 !important;
  background-color: #F2DFFF !important;
  border: 1px solid #673A95 !important;
  border-radius: 5px !important;
  padding: 4px !important;
  /* ? Erklärung: Tooltips werden gut lesbar und visuell angenehm dargestellt */
}
/* ====================================
? Rahmen um das Hauptfenster (optional)
Kann das Gesamtlayout visuell begrenzen
==================================== */
/* #messengerWindow {
  border: 5px solid #C0A0D0 !important;
  border-radius: 10px !important;
  ? Erklärung: Verleiht dem Hauptfenster einen dekorativen Rahmen
} */
/* =====================================================
? Statusleiste unten (ganz unten im Thunderbird-Fenster)
===================================================== */
statusbar {
  font-size: 15px !important;
  font-family: Arial Black !important;
  background-color: #EADCF2 !important;
  color: #000000 !important;
  border-top: 2px solid #BCA5D4 !important;
  /* ? Erklärung: Klarer Kontrast zur Statusleiste mit eleganter Farbgebung */
}
/* -------------------------------------------------------
? Abschnitt 5/6 – Kalenderansicht, Adressbuch & Suchleiste
------------------------------------------------------- */
/* ===================================================
? Kalender: Tagesansicht, Wochenansicht, Monatsansicht
=================================================== */
.calendar-day-view, .calendar-week-view, .calendar-month-view {
  font-size: 18px !important;
  font-family: Arial Black !important;
  background-color: #F7F0FF !important;
  color: black !important;
  /* ? Erklärung: Einheitliche Optik im Kalender mit gut lesbarer Schrift */
}
/* ====================================
?? Adressbuch: Listenansicht & Kontakte
==================================== */
#abResultsTree {
  font-size: 20px !important;
  font-family: Arial Black !important;
  background-color: #EFE0F8 !important;
  color: black !important;
  /* ? Erklärung: Kontaktliste mit großer, kontrastreicher Schrift */
}
#abResultsBox {
  border: 2px solid #BCA5D4 !important;
  border-radius: 8px !important;
  /* ? Erklärung: Visuelle Rahmung des Adressbuch-Bereichs */
}
/*
=====================================
? Suchleiste (oberhalb der Nachrichtenliste)
=====================================
*/
#searchInput {
  font-size: 18px !important;
  font-family: Arial Black !important;
  background-color: #F0DDF9 !important;
  color: black !important;
  border: 1px solid #673A95 !important;
  border-radius: 4px !important;
  /* ? Erklärung: Suchfeld wird deutlich sichtbar und optisch eingebettet */
}
/*
--------------------------------------------------------------------------------------------------------------------
? Abschnitt 6/6 – Systemfarben, E-Mail-Buttons & Spezialelemente
---------------------------------------------------------------------------------------------------------------------
*/
/*
==============================================
? Systemfarben überschreiben (z.?B. Dialoge, Rahmen)
==============================================
*/
:root {
  --system-color-background: #F9F0FF !important;
  --system-color-text: #000000 !important;
  --system-color-accent: #A175D1 !important;
  /* ? Erklärung: Einheitliche Farbpalette für Thunderbird-Systemelemente */
}
/*
===================================================
? Buttons innerhalb von E-Mails (Antworten, Weiterleiten etc.)
===================================================
*/
.mail-action-button {
  font-size: 17px !important;
  font-family: Arial Black !important;
  background-color: #D3A3E1 !important;
  color: black !important;
  border-radius: 5px !important;
  padding: 6px 12px !important;
  /* ? Erklärung: Klare und visuell hervorgehobene Buttons für Mailaktionen */
}
/*
======================================================
? Anhangsbereich (Attachment Pane bei empfangener Nachricht)
======================================================
*/
.attachmentList {
  font-size: 16px !important;
  font-family: Arial Black !important;
  background-color: #F0E3FF !important;
  border: 1px solid #BCA5D4 !important;
  border-radius: 5px !important;
  padding: 4px !important;
  /* ? Erklärung: Anhangsliste übersichtlich und optisch eingebettet */
}
/*
======================================
? Ladeindikator / Fortschrittsbalken (optional)
======================================
*/
progress {
  background-color: #E0CCE8 !important;
}
progress::-moz-progress-bar {
  background-color: #673A95 !important;
  /* ? Erklärung: Ladeleisten im Design integriert – harmonisch in der Farbpalette */
}
/* --------------------------------------------
Abschnitte: 1 bis 6  Ende !!!
----------------------------------------------- */

Alles anzeigen

Neddy

Zitat von dharkness21

hier mal ein erster Versuch, ist aber noch nicht wirklich fertig

Hallo,

ich bin begeistert, du hast es tatsächlich geschafft in kurzer Zeit es hinzubekommen, wo ich seit wochen verzweifelt herumdoktere.

Ich sende dir erneut die CSS, die ich nur wegen kleiner Abstände ,wegen der besseren Übersicht, geändert hatte. Es waren auch sehr viele Fragezeichen - deren Bedeutung ich nicht weiß. Siehe nächster Beitrag.

Im Bild selber hatte ich folgende Anmerkungen gemacht:

---------------------------------------------
Scrollbar rechts (doppelte Farbe) leider noch nicht da. (s. Bild 2 rechts).
-----------------------------
Schriftgröße Kopzeilen-Button bisschen zu groß. Wenn ich wüsste, welcher code dafür zuständig ist, dann kann ich es auch anpassen.
----------------------------
Für die 6 Buttons in der Kopfleiste waren die Rosafarben mit dem blauen Hintergrund versehen. Du siehst es im obigen Bild, wo der VON-Pfeil zugeklappt ist …
---------------------------
VON - BETREFF - AN war geöffnet in Weiss
---------------------------
Wäre es möglich, dass die 6 Kopfzeilen-Buttons auch dann sichtbar bleiben, wenn der VON-Pfeil zugeklappt ist? D. h., dass wir hier 2 Zeilen haben könnten.
Bild oben zeigt die Zeile zugeklappt.
Diese sollte genauso, aber direkt unter der 6 Button-Zeilen.
---------------------------------------------

Kleinigkeiten sind noch offen, aber die kann man hinterher ausführen, sonsrt verliere ich den Überblick.

Kann man gleichzeitig hier einen Text schreiben und auch einn css-Codeblock (ICON oben) einfügen. Ich hatte es versucht, aber, dann kommt dieser Text mit im Codeblock, was nicht sein sollte. Deswegen sende ich es getrennt. Es ist wichtig zu wissen, ob ich evtl. doch noch Zeichenfehler gemacht haben könnte.
,

Grüße Neddy

Neddy

Zitat von dharkness21

hier mal ein erster Versuch, ist aber noch nicht wirklich fertig, schau bitte mal, was passt und was nicht.

CSS

/* ====================================================================
? Thunderbird Benutzeroberfläche – Benutzerdefiniertes Design
?? Version: TB 140.0.1 | (128.13.0 esr) Gesamtfassung Stand: 31.07.2025 (bereinigt)
?? Basis: Code vom 08.01.2025 + Ergänzungen
?? Hinweis:  about:config
     - toolkit.legacyUserProfileCustomizations.stylesheets` ? true
     - devtools.chrome.enabled` ? true 
===================================================================== */
/* ===========================================================
? Anleitung: Div. Mails zus. als Tabs öffnen
Ordnerbaum > Posteingang je Mail-Kto. Anzahl: Div. ? > anklicken
= Nachrichtenliste > Strg + A + Enter
Bestätigungs-Fenster div. Nachrichten bestätigen ? OK
Tabs erscheinen oben > Senkrecht-Dreieck (rechts) > 
Überhangliste mit Scrolli (Scrollbar-color: #CC6699 #666699) erscheint.
=========================================================== */

/* Die verschiedenen Leisten farblich anpassen. */
#unifiedToolbar,
#tabs-toolbar {
  background-image: none !important;
  background-color: #666699 !important;
}

#toolbar-menubar {
  background-color: #9FA2D5 !important;
}

.icons-beside-text {
  min-height: 32px !important;
  max-height: 32px !important;
}

/* ===============================================
 ??? ? 1. Variante – TEST: Tabs scrollbar & kompakt ???
=============================================== */
tab {
  min-width: 100px !important;   /* Tabbreite verringert */
  height: 30px !important;           /* Tabhöhe kompakter */
  margin-right: 2px !important;   /* Abstand zwischen Tabs */
}
tabs {
  overflow-x: auto !important;    /* horizontales Scrollen */
  scroll-behavior: smooth !important;
  display: flex !important;           /* Flexbox aktivieren */
}
tabpanels {
  padding: 0 !important;             /* Abstand zu Inhalt minimieren */
}
/* ===========================================
???? Ende 1. Variante – Tabs scrollbar & kompakt ???
======================================?====== */

/* ============================================
 ? 2. Variante – Tabs scrollbar & kompakt (kompakt-Stil)
============================================== */
tab {
  min-width: 100px !important;
  height: 30px !important;
  margin-right: 2px !important;
}
tab {
  .tab-background {
    background: none !important;
    background-color: #DBA2CC !important;
  }
}
tab[selected="true"] {
  .tab-background {
    background-color: #BA78AB !important;
  }
}
.tab-line {
  display: none !important;
}
tabs {
  overflow-x: auto !important;
  scroll-behavior: smooth !important;
  display: flex !important;
}
tabpanels {
  padding: 0 !important;
}
/* ===========================================
 ? Ende 2. Variante – Tabs scrollbar & kompakt
=========================================== */

/* ??? Begriffstabelle für CSS-Tests (intern) ??? */
/*
? Bereich        | Tabs, Baum, Menü
? Status          | Funktioniert stabil & gewünscht
? Status          | Noch fehlerhaft oder unsicher
? Testcode     | Neuer Versuch, Beobachtung läuft
? Datum          | Wann getestet / ergänzt
? Notizen        | Verhalten, Besonderheiten
*/


/* -----------------------------------------------------------------------------------------------------------
🧩 Abschnitt 1/6 – Kommentarstruktur, Tabs & allgemeines Layout
---------------------------------------------------------------------------------------------- ---------------- */
/* --- Hier beginnen die CSS ohne obige Notizen, da sie keine Relevanz für die Code  haben --- */

/* ? Farbverläufe */
/* Farbverlauf TB-Kopfzeile im Nachrichtenbereich (z.?B. Betreff, Von, An) */
#msgHeaderView {
  background: linear-gradient(#BA78AB, #666699) !important;
  min-height: 72px !important;
  /* ? Erklärung: Verleiht dem Nachrichtenkopf ein visuelles Highlight in TB */
}
/* Hintergrund-Farbverlauf links TB Ordnerbaum */
#folderPane {
  appearance: none !important;
  background: linear-gradient(#BA78AB, #666699) !important;
  /* ? Erklärung: Gestaltung des linken Bereichs für Ordnerübersicht */
}
/* ? Account Central – TB-Farbgestaltung der Startseite */
/* Gestaltung der Begrüßungsseite / Accountübersicht */

#accountCentral,
.account-central-section,
.account-central-section > h2,
.account-central-section > div,
#accountCentral > *:first-child {
  background-color: #BA78AB !important;
  color: #ffffff !important;
  /* ? Erklärung: Einheitliche Farbgestaltung der Account-Übersicht */
}

/* Tagesplan */
#agenda {
  appearance: none !important;
  background: linear-gradient(#BA78AB, #666699) !important;
  /* ? Erklärung: Gestaltung des linken Bereichs für Ordnerübersicht */
}

/* ---------------------------------------------------------------------------------------------------------------------------------------------------------
? Abschnitt 2/6 – Schriftgrößen, Composer (Verfassen)-Fenster, Nachrichtenliste & Ordnerbaum
------------------------------------------------------------------------------------------------------------------------------------------------------------- */                   
/* =========================`=================
? Ordnerbaum-Konten: Schriftart, - Größe & -Höhe
Schrift in Ordnernamen (Posteingang, Gesendet etc.)
============================================ */

/* Höhe der einzelnen Ordnerzeilen */
#folderTree li > .container {
  height: 10px !important;          /* ?? Ursprüngliche Zeilenhöhe – wird durch folgende Regel überschrieben */
  /* ? Erklärung: Verringert die Zeilenhöhe, damit mehr Ordner auf einmal sichtbar sind */
}
/* ?? Geändert: Höhe auf sinnvolle 24px angepasst (10px ist zu wenig für die Darstellung) */
#folderTree li > .container {
  height: 24px !important;          /* ?? geändert: von 10 auf 24px Schrifthöhe angepasst */
  /* ? Erklärung: Optimierte Zeilenhöhe für gute Lesbarkeit der Ordner */
}
/*
===================================================
? Nachrichten-Eingabefeld oder Kopfzeile - (Compose-Fenster)
Betreffzeile im Composer-Fenster (neue Nachricht)
===================================================
*/
@-moz-document url-prefix("chrome://messenger/content/messengercompose/messengercompose.xhtml") {
  #msgSubject {
    font-size: 21px !important;
    font-weight: bold !important;
    font-family: Arial Black !important;
    /* ? Erklärung: Der Betreff wird prominent und deutlich dargestellt */
  }
}

/*
============================================
? Nachrichtenliste / ThreadPane
Farb-Alternative: #BA78AB, #DBA2CC
Liste aller E-Mails in einem Ordner (z.?B. Posteingang)
============================================
*/
#threadTree {
  font-size: 30px !important;
  font-family: Arial Black !important;
  background-color: #9FA2D5 !important;
  /* ? Erklärung: Große Schrift in der Mail-Liste sorgt für bessere Lesbarkeit */
}
/* ?? Geändert: Zeilenhöhe ebenfalls auf 24px angepasst */
#threadTree > treechildren::-moz-tree-row {
  font-family: Arial Black !important;
  height: 24px !important;          /* ?? geändert: Höhe von 10 auf 24px korrigiert für Darstellung */
  /* ? Erklärung: Kompakte Ansicht innerhalb der Mail-Liste mit besserem Platz für Inhalte */
}
/* ?? Deaktiviert – Funktioniert nicht: `fill` wirkt nicht auf Tree-Icons in TB */
#threadTree treechildren::-moz-tree-image(unread) {
  fill: #990000 !important;
  /* ?? deaktiviert – siehe Hinweis: keine Wirkung unter aktuellen TB-Versionen */
}
/* ? Hinzugefügt: funktionierender SVG-Punkt für ungelesene Nachrichten */
#threadTree treechildren::-moz-tree-image(unread) {
  list-style-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='8' height='8'><circle cx='4' cy='4' r='4' fill='%23990000'/></svg>") !important;
  /* ? Erklärung: Roter Punkt erscheint zuverlässig bei ungelesener Mail */
}

/*
======================================
? HG-Farbe für Server-Zeile in Konten (optional)
======================================

/* ? Hebt die Hauptkonto-Zeile im Ordnerbaum farblich hervor */
/* #folderTree treechildren::-moz-tree-cell-text(isServer-true) */
li[data-server-type="imap"] > .container {
  margin-top: 2px !important;
}
li[data-server-type="imap"] > .container {
  background-color: #DBA2CC !important;
  color: black !important;
}

/* -------------------------------------------------------------------------------------------------------------------------------
? Abschnitt 3/6 – Scrollbars, Nachrichtenvorschau, Toolbars & Menüleisten
----------------------------------------------------------------------------------------------------------------------------------- */

/* ==========================================
?? Scrollbars (Scrollbar-Stil im gesamten Thunderbird)
==============================    ============ */
scrollbar {
  -moz-appearance: none !important;
  background-color: #BCA5D4 !important;
  width: 16px !important;
  /* ? Erklärung: Einheitlicher Look für Scrollbars – helle violette Farbe */
}

scrollbar thumb {
  background-color: #673A95 !important;
  border-radius: 6px !important;
  /* ? Erklärung: Dunkler Scrollbalken mit abgerundeten Ecken für eleganten Look */
}

/* =======================================
? Vorschau-Fenster (Nachrichtenvorschau unten)
========================================= */
#messagepane {
  font-size: 22px !important;
  font-family: Arial Black !important;
  background-color: #F1E5FF !important;
  /* ? Erklärung: Vorschau leserlich mit großer Schrift & hellem Hintergrund */
}

/* ======================================
? Toolbars: Button-Schrift und Hintergrundfarbe
======================================== */
#header-view-toolbar {
  background: none !important;
}
#messageHeader #header-view-toolbox {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}
#messageHeader #expandedfromRow {
  margin-top: -12px !important;
}
#messageHeader[compact="compact"] #header-view-toolbox {
  padding-top: 0 !important;
  padding-bottom: 10px !important;
  margin-top: -6px !important;
}
#messageHeader[compact="compact"] #expandedfromRow {
  margin-top: 26px !important;
}

li.extension-action > div > button {
  font-family: Arial Black !important;
  color: black !important;
  background-color: #C8A2C8 !important;
  border-radius: 4px !important;
  /* ? Erklärung: Klare Buttons mit auffälliger Hintergrundfarbe */
}
toolbarbutton {
  font-size: 18px !important;
  font-family: Arial Black !important;
  color: black !important;
  background-color: #C8A2C8 !important;
  border-radius: 4px !important;
  /* ? Erklärung: Klare Buttons mit auffälliger Hintergrundfarbe */
}
/*
===========================
? Menüleisten: Schrift und Farbe
===========================
*/
menubar {
  font-size: 18px !important;
  font-family: Arial Black !important;
  color: #000000 !important;
  background-color: #D2B9D3 !important;
  /* ? Erklärung: Menüleiste mit klarer Struktur und gut lesbarer Schrift */
}

/* ----------------------------------------------------------------------------------------------
? Abschnitt 4/6 – Tooltip-Stil, Fensterrahmen & Statusleiste
-------------------------------------------------------------------------------------------------- */

/* ==================================================
? Tooltip-Stil (z. B. wenn man mit der Maus über Buttons fährt)
==================================================== */
tooltip {
  font-size: 16px !important;
  font-family: Arial Black !important;
  color: #000000 !important;
  background-color: #F2DFFF !important;
  border: 1px solid #673A95 !important;
  border-radius: 5px !important;
  padding: 4px !important;
  /* ? Erklärung: Tooltips werden gut lesbar und visuell angenehm dargestellt */
}

/* ====================================
? Rahmen um das Hauptfenster (optional)
Kann das Gesamtlayout visuell begrenzen
==================================== */
/* #messengerWindow {
  border: 5px solid #C0A0D0 !important;
  border-radius: 10px !important;
  ? Erklärung: Verleiht dem Hauptfenster einen dekorativen Rahmen
} */

/* =============================================
? Statusleiste unten (ganz unten im Thunderbird-Fenster)
=============================================== */
statusbar {
  font-size: 15px !important;
  font-family: Arial Black !important;
  background-color: #EADCF2 !important;
  color: #000000 !important;
  border-top: 2px solid #BCA5D4 !important;
  /* ? Erklärung: Klarer Kontrast zur Statusleiste mit eleganter Farbgebung */
}

/* -----------------------------------------------------------------------------------------------
? Abschnitt 5/6 – Kalenderansicht, Adressbuch & Suchleiste
--------------------------------------------------------------------------------------------------- */

/* ==============================================
? Kalender: Tagesansicht, Wochenansicht, Monatsansicht
================================================ */
.calendar-day-view, .calendar-week-view, .calendar-month-view {
  font-size: 18px !important;
  font-family: Arial Black !important;
  background-color: #F7F0FF !important;
  color: black !important;
  /* ? Erklärung: Einheitliche Optik im Kalender mit gut lesbarer Schrift */
}

/* =================================
??? Adressbuch: Listenansicht & Kontakte
=================================== */
#abResultsTree {
  font-size: 20px !important;
  font-family: Arial Black !important;
  background-color: #EFE0F8 !important;
  color: black !important;
  /* ? Erklärung: Kontaktliste mit großer, kontrastreicher Schrift */
}
#abResultsBox {
  border: 2px solid #BCA5D4 !important;
  border-radius: 8px !important;
  /* ? Erklärung: Visuelle Rahmung des Adressbuch-Bereichs */
}

/*
=====================================
? Suchleiste (oberhalb der Nachrichtenliste)
=====================================
*/
#searchInput {
  font-size: 18px !important;
  font-family: Arial Black !important;
  background-color: #F0DDF9 !important;
  color: black !important;
  border: 1px solid #673A95 !important;
  border-radius: 4px !important;
  /* ? Erklärung: Suchfeld wird deutlich sichtbar und optisch eingebettet */
}

/* ---------------------------------------------------------------------------------------------------------
? Abschnitt 6/6 – Systemfarben, E-Mail-Buttons & Spezialelemente
------------------------------------------------------------------------------------------------------------ */

/*
==============================================
? Systemfarben überschreiben (z.B. Dialoge, Rahmen)
==============================================
*/

:root {
  --system-color-background: #F9F0FF !important;
  --system-color-text: #000000 !important;
  --system-color-accent: #A175D1 !important;
  /* ? Erklärung: Einheitliche Farbpalette für Thunderbird-Systemelemente */
}

/*
===================================================
? Buttons innerhalb von E-Mails (Antworten, Weiterleiten etc.)
===================================================
*/
.mail-action-button {
  font-size: 17px !important;
  font-family: Arial Black !important;
  background-color: #D3A3E1 !important;
  color: black !important;
  border-radius: 5px !important;
  padding: 6px 12px !important;
  /* ? Erklärung: Klare und visuell hervorgehobene Buttons für Mailaktionen */
}

/*
======================================================
? Anhangsbereich (Attachment Pane bei empfangener Nachricht)
======================================================
*/
.attachmentList {
  font-size: 16px !important;
  font-family: Arial Black !important;
  background-color: #F0E3FF !important;
  border: 1px solid #BCA5D4 !important;
  border-radius: 5px !important;
  padding: 4px !important;
  /* ? Erklärung: Anhangsliste übersichtlich und optisch eingebettet */
}

/*
======================================
? Ladeindikator / Fortschrittsbalken (optional)
======================================
*/
progress {
  background-color: #E0CCE8 !important;
}
progress::-moz-progress-bar {
  background-color: #673A95 !important;
  /* ? Erklärung: Ladeleisten im Design integriert – harmonisch in der Farbpalette */
}

/* ------------------------------------------
Abschnitte: 1 bis 6  Ende !!!
--------------------------------------------- */

Alles anzeigen

Thunderbird 141 – userChrome.css: Farbverläufe, Ordnerbaum & Scrollbalken un vieles mehr nicht anpassbar.

graba 2. August 2025 um 22:41

Beitrag von Neddy (3. August 2025 um 14:09)

Thunderbird 141.0 veröffentlicht

Thunderbird 140.1.0 ESR veröffentlicht

Thunderbird 128.13.0 ESR veröffentlicht