=> Auswahl "Anhänge"
Die Spalte ist, so wie ich es verstanden habe da, aber es fehlt in der Spalte bei einigen E-Mails, die Anhänge haben, die Büroklammer.
=> Auswahl "Anhänge"
Die Spalte ist, so wie ich es verstanden habe da, aber es fehlt in der Spalte bei einigen E-Mails, die Anhänge haben, die Büroklammer.
Eventuell könnte es auch der → #hdrFollowup_ReplySubButton sein.
daher Frage ich mal die Experten, wie kann man das beheben das der Button gleich aussieht ?
Das scheinen 2 unterschiedliche Button zu sein, einmal Antworten und einmal Smart antworten mit den Optionen Antworten, Allen antworten und eventuell Newsgruppe antworten, somit sollte der nicht angepasste Button der → #hdrFollowupButton sein.
Achso du meinst, TB neu installieren und dann das alte TB einfach drüber kopieren?
Nein, ich meine es genau so, wie ich es geschrieben haben, ich habe nicht geschrieben, das Du was aus dem Programmordner kopieren sollst.
Drücke einmal die Windowstaste und das r, gebe ich das Fenster dann %APPDATA% ein und drücke Enter, dort findest Du dann den zu sichernden Ordner Thunderbird, das ist der Datenordner von Tb, das ist der Ordner wo der Verweis auf das Profil enthalten ist.
Ansonsten so verfahren wie ich es schon beschrieben habe.
Kann ich in TB gleich bei der Neuinstallation den neuen Profilordner auswählen?
Bei der Installation geht das nicht, aber warum sicherst Du nicht unter %APPDATA% den Ordner Thunderbird und kopierst ihn dann nach der Neuinstallation von W11 und vor dem ersten Start vom installierten Tb wieder dorthin, denn dann sollte eigentlich das auf Laufwerk D befindliche Profil direkt gestartet werden.
Hallo Neddy,
ist das CSS wirklich vollständig? Hier werden z.B. die Tabs nicht umgestaltet.
Im Bild ist zuerkennen, dass unten der Scrollbalken keine Farbe hat.
Funktioniert hier merkwürdigerweise ohne Probleme.
Welcher Code ist es im Beitrag 28, der dazu führte, dass die Tab-Überhangliste den Farbverlauf erhalten hat.
/* Eigentlich nur #alltabs-popup, färbt allerdings alle Popups entsprechend um. */
.menupopup-arrowscrollbox {
background: linear-gradient(#BA78AB, #7f7fbe) !important;
}
#alltabs-popup > menuitem > .menu-text {
font-family: Arial Black !important;
}
Ebenso muss ich vorher wissen, welcher Code es ist, der den Hintergrund der Tableiste mit einem dunkleren Blaugrauton versehen ist.
Hallo Neddy,
bitte teste die ↓ Version.
/* ====================================================================
? 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-text {
font-family: Arial Black !important;
font-size: 14px !important;
color: #000 !important;
}
.tab-line {
display: none !important;
}
tabs {
overflow-x: auto !important;
scroll-behavior: smooth !important;
display: flex !important;
}
tabpanels {
padding: 0 !important;
}
/* Eigentlich nur #alltabs-popup, färbt allerdings alle Popups entsprechend um. */
.menupopup-arrowscrollbox {
background: linear-gradient(#BA78AB, #7f7fbe) !important;
}
#alltabs-popup > menuitem > .menu-text {
font-size: 14px !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.)
================================================ */
#folderPaneHeaderBar {
border-bottom: 1px solid #D4D4D8 !important;
padding: 3px 6px 2px 6px !important;
}
/* Button in der Folderpane. */
#folderPaneHeaderBar > button {
font-family: Arial Black !important;
background-color: #C8A2C8 !important;
color: black !important;
}
#folderPaneHeaderBar > button:hover {
border: 1px solid #967996 !important;
}
#folderPaneHeaderBar,
#today-pane-panel > .sidebar-header {
appearance: none !important;
background-color: #9FA2D5 !important;
}
#today-pane-panel > .sidebar-header {
height: 1.4em !important;
min-height: 31px !important;
}
.sidebar-panel-scroll {
@media not (prefers-contrast) {
&::before, &::after {
height: 0 !important;
}
}
}
/* 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 */
}
}
/* Schnellfilterleiste */
#quick-filter-bar {
background-color: #a66b99 !important;
}
.quickFilterButtons {
border: 0 !important;
}
#quickFilterBarContainer > button,
#quickFilterBarContainer > div > button {
font-family: Arial Black !important;
border: 1px solid #C8A2C8 !important;
background-color: #C8A2C8 !important;
color: black !important;
border-radius: 4px !important;
margin-right: 2px !important;
/* ? Erklärung: Klare Buttons mit auffälliger Hintergrundfarbe */
}
#quickFilterBarContainer > button:hover,
#quickFilterBarContainer > div > button:hover {
border: 1px solid #967996 !important;
/* ? Erklärung: Klare Buttons mit auffälliger Hintergrundfarbe */
}
/* ====================================================
? Nachrichtenliste / ThreadPane
Farb-Alternative: #BA78AB, #DBA2CC
Liste aller E-Mails in einem Ordner (z.?B. Posteingang)
==================================================== */
#threadPaneHeaderBar {
background-color: #9FA2D5 !important;
}
#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 */
}
/* Alt - 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 */
}
/* Neu durch Dharkness */
/* Ungelesene Mails, Threads mit ungelesenen Mails und neue Mails */
#threadTree tbody {
& .table-layout[data-properties~="unread"] :where(td, .subject-line) {
text-decoration: underline blue !important;
text-decoration-thickness: 2px !important;
}
}
#threadTree tbody {
& .table-layout[data-properties~="read"][data-properties~="hasUnread"] :where(td, .subject-line) {
text-decoration: underline blue !important;
text-decoration-thickness: 2px !important;
}
}
#threadTree tbody {
& .table-layout[data-properties~="read"][data-properties~="hasNew"] :where(td, .subject-line) {
text-decoration: underline red !important;
text-decoration-thickness: 2px !important;
}
}
img[data-l10n-id="threadpane-message-new"] {
width: 16px !important;
height: 16px !important;
fill: #F20 !important;
stroke: #900 !important;
}
/* ? 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 */
}
/* Kopfleiste der ThreadPane */
th[is="tree-view-table-header-cell"] > div > button,
thead[is="tree-view-table-header"] > tr > [is="tree-view-table-column-picker"] {
background: none !important;
background-color: #DBA2CC !important;
color: black !important;
}
/* =============================================
? 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) */
#folderPane {
color: #000 !important;
}
li[data-server-type="imap"] > .container {
margin-top: 2px !important;
}
li[data-server-type="imap"] > .container {
background-color: #DBA2CC !important;
color: black !important;
}
li[title="Lokale Ordner"] > .container {
background-color: #DBA2CC !important;
color: black !important;
}
li> div > .name {
font-size: 14px !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 */
}
#messageHeader #header-view-toolbar {
min-height: 1.4em !important;
background: none !important;
padding: 0 !important;
margin: 0 !important;
}
#unifiedToolbarContent > li > div > button,
li.extension-action > div > button {
font-family: Arial Black !important;
background-color: #C8A2C8 !important;
color: black !important;
border-radius: 4px !important;
margin-bottom: 1px !important;
/* ? Erklärung: Klare Buttons mit auffälliger Hintergrundfarbe */
}
toolbarbutton {
font-size: 14px !important;
font-family: Arial Black !important;
background-color: #C8A2C8 !important;
color: black !important;
border-radius: 4px !important;
/* ? Erklärung: Klare Buttons mit auffälliger Hintergrundfarbe */
}
toolbarbutton.message-header-view-button,
toolbarbutton.message-header-view-button > toolbarbutton {
font-size: 14px !important;
}
/* =============================
? Menüleisten: Schrift und Farbe
============================= */
menubar {
padding-left: 3px !important;
}
menubar > menu {
font-size: 14px !important;
font-family: Arial Black !important;
border-radius: 5px !important;
border: 1px solid #D2B9D3 !important;
background-color: #D2B9D3 !important;
color: #000000 !important;
padding-top: 0 !important;
padding-bottom: 1px !important;
margin-top: 2px !important;
margin-right: 3px !important;
margin-bottom: 2px !important;
/* ? Erklärung: Menüleiste mit klarer Struktur und gut lesbarer Schrift */
}
menubar > menu:hover {
border: 1px solid #967996 !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: 16px !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: 16px !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: 16px !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
Was bedeuten die vielen Fragezeichen ??? - Sind es Fehler, oder habe ich die Antwort übersehen?
Die sind sicherlich aufgrund von Zeichen entstanden, die meine Font nicht wiedergeben kann.
Scrollbalken alle leider ohne die 2 Farben
Das geht nicht mehr per CSS-Voodoo, das hatte ich aber IIRC auch schon früher hier zu Thread geschrieben.
1 Überhangliste - Farbverlauf fehlt
2. Schrift zu groß, wie auch in der 3. Menüleiste (oben).
4 Kopfleiste - in Bereich: VON - BETREFF- AN weiße Farbe fehlt
Schaue ich mir an.
Hallo Neddy,
ich habe noch ein klein wenig gebastelt, schau Dir doch mal die ↓ Variante an.
/* ====================================================================
? 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-text {
font-family: Arial Black !important;
font-size: 16px !important;
color: #000 !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.)
============================================ */
#folderPaneHeaderBar {
border-bottom: 1px solid #D4D4D8 !important;
padding: 3px 6px !important;
}
#folderPaneHeaderBar,
#today-pane-panel > .sidebar-header {
appearance: none !important;
background-color: #9FA2D5 !important;
}
#today-pane-panel > .sidebar-header {
height: 1.4em !important;
min-height: 31px !important;
}
.sidebar-panel-scroll {
@media not (prefers-contrast) {
&::before, &::after {
height: 0 !important;
}
}
}
/* 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)
==================================================== */
#threadPaneHeaderBar {
background-color: #9FA2D5 !important;
}
#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 */
}
/* Kopfleiste der ThreadPane */
th[is="tree-view-table-header-cell"] > div > button,
thead[is="tree-view-table-header"] > tr > [is="tree-view-table-column-picker"] {
background: none !important;
background-color: #DBA2CC !important;
color: black !important;
}
/* =============================================
? 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;
}
li[title="Lokale Ordner"] > .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;
} */
#messageHeader #header-view-toolbar {
min-height: 1.4em !important;
background: none !important;
padding: 0 !important;
margin: 0 !important;
}
#unifiedToolbarContent > li > div > button,
li.extension-action > div > button {
font-family: Arial Black !important;
color: black !important;
background-color: #C8A2C8 !important;
border-radius: 4px !important;
margin-bottom: 1px !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 */
}
toolbarbutton.message-header-view-button,
toolbarbutton.message-header-view-button > toolbarbutton {
font-size: 14px !important;
}
/* =============================
? Menüleisten: Schrift und Farbe
============================= */
menubar {
padding-left: 3px !important;
}
menubar > menu {
font-size: 16px !important;
font-family: Arial Black !important;
border-radius: 5px !important;
border: 1px solid #D2B9D3 !important;
background-color: #D2B9D3 !important;
color: #000000 !important;
padding-top: 0 !important;
padding-bottom: 1px !important;
margin-top: 2px !important;
margin-right: 3px !important;
margin-bottom: 2px !important;
/* ? Erklärung: Menüleiste mit klarer Struktur und gut lesbarer Schrift */
}
menubar > menu:hover {
border: 1px solid #967996 !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
Hallo Neddy,
teste bitte die ↓ Version.
/* ====================================================================
? 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;
} */
#messageHeader #header-view-toolbar {
min-height: 1.4em !important;
background: none !important;
padding: 0 !important;
margin: 0 !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 */
}
toolbarbutton.message-header-view-button,
toolbarbutton.message-header-view-button > toolbarbutton {
font-size: 14px !important;
}
/* =============================
? Menüleisten: Schrift und Farbe
============================= */
menubar {
padding-left: 3px !important;
}
menubar > menu {
font-size: 16px !important;
font-family: Arial Black !important;
border-radius: 5px !important;
background-color: #D2B9D3 !important;
color: #000000 !important;
padding-top: 0 !important;
padding-bottom: 1px !important;
margin-top: 2px !important;
margin-right: 3px !important;
margin-bottom: 2px !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
Hallo Neddy,
hier mal ein erster Versuch, ist aber noch nicht wirklich fertig, schau bitte mal, was passt und was nicht.
/* ====================================================================
? 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
Ist der Schalter eingeschaltet wird der farbige Text angezeigt
Ist er ausgeschaltet wird der Text nur weiß auf schwarz angezeigt
Ich sehe das als Bug an, welchen Grund sollte es geben, das der Text nicht auch im dunklen Modus farbig angezeigt wird.
Neddy,
jetzt fehlt uns noch ein anonymisierter Screenshot, wir müssen den Ist-Zustand sehen, dann können wir uns ans Werk machen.
Wieder was gelernt.
Das tue ich selbst im höheren Alter jeden Tag ein wenig, das hält die Rübe frisch.