Meinst Du die Abstände der Tabs selbst?
die beinhalten doch das Altrosa mit dem blau zusammen. Also kurz gesagt -Ja.
Dann füge das → padding: 0 !important; und das → margin-right: 2px !important; dem Eintrag für Tabs (tab {…}) hinzu.
Kannst du mir den Code kompltt sagen . Ich traue mir das so nicht zu.
Bitte testen:
Das hat tatsächlich funktioniert. Danke
Jetzt brauche ich nur noch die dunkelblauen Abstände zwischen den einzelnen Altrosa-Button in der Tableiste/-Zeile auf ca. 1 bis 3 mm verringern. Sie sind ca. 8 mm breit.
Ebenso in dem Nachrichten-Bereich unten rechts der Scrollbalken, der sich hartnäckig weigert meine Farb-Kombi anzunehmen. Alle anderen Scrollis sind richtig. Bei euch funktioniert es. Ich weiß nicht, wo ich suchen soll.
Grüße Neddy
Teste bitte die Version, ich habe das mal alle font-size:-Einträge auskommentiert und die 3 Leisten oben noch verkleinert.
/*
Einträge auskommentiert
Sieht das nicht so aus, oder kann es auch anderes gemacht werden?
In deiner neuen CSS hatte ich nichts gesehen.
}
*/
Teste bitte die Version, ich habe das mal alle font-size:-Einträge auskommentiert und die 3 Leisten oben noch verkleinert.
Ich habe die Version (Beitrag 42) eben gerade getestet. Was mir besonders aufgefallen ist, dass die Tableiste mit blauen breiten Zwischenräumen versehen sind, die ja auch den Hintergrund bilden. Da würden maximal 1-2 mm reichen. Meine Versuche, es hinzukriegen, waren alle erfolglos.
Der dunkelrote Punkt für die ungelesenen Mails oben in der Nachrichtenliste ist immer noch nicht da.
Die ungelesenen sind alle mit einem blauen Unterstrich versehen. Aber der dunkelrote Punkt würde übersichtlicher sein für meinen Geschmack
Der Scrollbalken unten im Nachrichtenteil will immer noch keine Farbe annehmen.
Grüße Neddy
Fahre mal mit dem Mauszeiger über besagte Scrollbar, vielleicht wird sie nur nicht korrekt farbig aktualisiert.
Habe ich gemacht - keine Veränderung. Da steckt der Wurm drin.
Ich weiß auch nicht, was ich noch machen könnte.
Ich hatte mal erwähnt, dass oben die Menüleiste (Datei, Bearbeiten usw,...), die darunterliegende Tableiste ebenso insgesamt zu groß ausfallen. Wurde man es mit dem folgenden Code verkleinern können, oder sind mehrere Codes beteiligt?
img[data-l10n-id="threadpane-message-new"] {
width: 16px !important;
height: 16px !important;
fill: #F20 !important;
stroke: #900 !important;
}
Früher gab es ein tolles Tool dafür - "Theme Font & Size Changer". Dieses deckte alle Bereiche ab.
Grüße Neddy
Der Code für die Tabbar und Tabs fehlte z.B..
Kannst du mir die Codes genauer benennen, damit ich sie korrigieren kann? Oder ist es in der aktuellen CSS - im Beitrag: 38 schon erledigt?
Die CSS habe ich eben getestet. Besagte Srollleiste ist bei mir nicht farbig. Alle anderen sind Ok.
Ungelesene Mails haben zwar keinen dunkelroten Punkt, aber dafür einen blauen Unterstrich. Wenn du mir den Code sagts, kann ich die Farbe ändern in dunkelrot. Also kann ich davon ausgehen, dass die dafür vorgesehenen schwachen grünen Punkte nicht veränderbar sind?
Grüße Neddy
Ist das CSS wirklich vollständig? Hier werden z.B. die Tabs nicht umgestaltet.
Das weiß ich nicht, kannst du mir sagen, was genau gemeint ist. Wie viel sind es, oder kannst du Bilder oder die code senden?
Funktioniert hier merkwürdigerweise ohne Probleme
1. Welche Codes sind unvollständig? Wenn sie bei dir funktionieren, dann muss ich schauen, was bei mir blockieren könnte. Zurzeit wird unten im Nachrichtenbereich der Scrollbalken noch nicht farbig angezeigt. Die dunkelroten Punkte für die ungelesenen Nachrichten sind auch nicht vorhanden.
2. In TB wirkt alles zu groß.
Früher gab es dafür das "Theme Font & Size Changer" Man konnte dadurch insgesamt alles kleiner stellen. So auch oben die Menü- und auch die Tableiste und hatte eine bessere Übersicht.
Grüße Neddy
/* -----------------------------------------------------------------------------------------------------------
🧩 Abschnitt 1/6 – Kommentarstruktur, Tabs & allgemeines Layout
-------------------------------------------------------------------------------------------------------------- */
/* --- Hier beginnen die CSS ohne obige Notizen, da sie keine Relevanz für die Code haben --- */
/* Abschnitt 1 – Hauptleisten & Tabzeile (Farben & Popup-Stil) */
/* Hintergrundfarbe für Unified Toolbar & Tableiste */
#unifiedToolbar,
#tabs-toolbar {
background-image: none !important;
background-color: #666699 !important;
}
/* Tab-Überhangliste (rechter Pfeil) mit Farbverlauf */
/* Achtung: Färbt auch andere Popups */
.menupopup-arrowscrollbox {
background: linear-gradient(#BA78AB, #666699) !important;
}
/* Schriftgröße im Überhang-Menü */
#alltabs-popup > menuitem > .menu-text {
font-size: 14px !important;
}
/* Abschnitt 1 – Ende */
/* Gesamter Nachrichtenkopf mit Farbverlauf und Layout */
#msgHeaderView {
background: linear-gradient(#BA78AB, #666699) !important;
min-height: 90px !important;
padding: 12px 20px !important;
display: grid !important;
grid-template-columns: auto 1fr !important;
gap: 16px !important;
align-items: center !important;
}
/* ✳️ Feldnamen: „Von“, „Betreff“, „An“ – weiß & fett */
#msgHeaderView label,
#msgHeaderView .headerName,
#msgHeaderView .headerValue label {
color: white !important;
font-family: "Arial Black", Arial, sans-serif !important;
font-weight: bold !important;
white-space: nowrap !important;
text-align: left !important;
}
/* 🖤 Feldwerte: Namen, Betrefftext etc. – schwarz & fett */
#msgHeaderView .headerValue {
color: black !important;
font-family: "Arial Black", Arial, sans-serif !important;
font-weight: bold !important;
text-align: left !important;
}
/* ⚪️ Buttons im Nachrichtenkopf – weiße Schrift, Standard-Hintergrund */
#msgHeaderView toolbarbutton {
color: white !important;
font-family: "Arial Black", Arial, sans-serif !important;
font-weight: bold !important;
background-color: transparent !important; /* Kein eigener Hintergrund */
border: none !important;
outline: none !important;
box-shadow: none !important;
}
/* 🖌️ Hover-Effekt für Buttons – optional */
#msgHeaderView toolbarbutton:hover {
background-color: rgba(255, 255, 255, 0.2) !important;
cursor: pointer !important;
}
/* 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.)
============================================ */
#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 (#DBA2CC) 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: #8888C1 !important;
color: black !important;
}
li[title="Lokale Ordner"] > .container {
background-color: #8888C1 !important;
color: black !important;
}
/* Abschnitt 2 – Schriftarten & Textgestaltung */
/* 📑 Schriftgröße der Tableiste (Tabs) verkleinern */
tab {
font-size: 11px !important;
}
/* 🗂️ Schriftgröße der Menüleiste (Datei, Bearbeiten, Ansicht ...) verkleinern */
menubar > menu {
font-size: 11px !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 */
}
/* Scrollbar (Neu - Bildlaufleisten 2 Farben, #CC6699, #666699) */
/* Farbe 1: Thumb (Daumen) - Farbe 2: Hintergrund*/
:root {
scrollbar-color: #CC6699 #666699 !important;
}
/* ======================================
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
======================================= */
/* 🎯 Buttons im Nachrichtenkopf – Neu - blaugrauer Hintergrund + weiße Schrift */
#msgHeaderView toolbarbutton {
background-color: #8888C1 !important; /* Blaugrau */
color: white !important;
font-family: "Arial Black", Arial, sans-serif !important;
font-weight: bold !important;
border: none !important;
outline: none !important;
box-shadow: none !important;
padding: 4px 8px !important;
border-radius: 4px !important;
}
/* 🖱️ Optional: Neu - Hover-Effekt für Buttons */
#msgHeaderView toolbarbutton:hover {
background-color: #666699 !important; /* dunkleres Blaugrau beim Hover */
cursor: pointer !important;
}
/* #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 */
}
/* Neu - Abschnitt 3 – Rahmen & Abstände */
/* Menüleiste verkleinern */
menubar {
font-size: 12px !important;
padding: 2px 6px !important;
min-height: 20px !important;
}
/* Tableiste verkleinern */
tab {
font-size: 12px !important;
padding: 2px 8px !important;
min-height: 24px !important;
}
/* Tabbar kompakter */
#tabbar-toolbar {
min-height: 28px !important;
padding: 0px !important;
}
/* Abschnitt 3 – Ende */
/* ----------------------------------------------------------------------------------------------
? 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 !!! Im Bild ist zuerkennen, dass unten der Scrollbalken keine Farbe hat.
Ungelesene Nachrichten haben leider nur einen schwachen grünen Punkt. Könnte man ihn auch dunkelrot machen und damit sehbarer?
Diese beiden Punkte wären noch offen.
Die aktuelle Code-Liste ist auf den neuesten Stand und hat nach meiner Einschätzung gut funktioniert. Sollten später Rückfragen kommen, bitte ich darum, diese als Vorlage zu berücksichtigen. Auch würde ich gerne wissen, ob die CSS doppelte Einträge hat und in den Abschnitten richtig zugeordnet ist.
Welcher Code ist es im Beitrag 28, der dazu führte, dass die Tab-Überhangliste den Farbverlauf erhalten hat.
Ebenso muss ich vorher wissen, welcher Code es ist, der den Hintergrund der Tableiste mit einem dunkleren Blaugrauton versehen ist.
Diese beiden Code funktionieren und möchte sie gleich in meiner korrigierten Liste mit übernehmen. Habe lange danach gesucht.
Aber ich konnte sie leider nicht finden, weil sie keinen Titel oder Namen haben. Es dauert ein wenig, bis ich mit allem durch bin. Code richtig zu interpretieren, ist nicht einfach für mich.
Grüße Neddy
bitte teste die ↓ Version.
Der Farbverlauf ist in der Tab-Überhangliste da.
Dafür sind meine Scrollbalken-Doppelfarben weg wieder weg.
In der Kopfleiste ist leider die weiße Farbe - VON - Betreff - An auch wieder weg
Vielleicht wäre es gut gewesen, dass du meine aktuelle CSS als Grundlage oder Vorlage überprüfen könntest, und darauf weiter aufbauen. Vielleicht wären dann meine positiven Umsetzungen mit deinen jetzigen
kombinierbar. Dazu müsste ich wissen, welche von deinen funktioniert haben
Grüße Neddy
Hallo,
1. kann die Menü-Leiste insgesamt verkleinert werden?
Wäre es möglich, die Hintergrundfarbe der Tableiste auch in Blaugrau, wie die Menüleiste, zu ändern? Ich glaube, sie ist im HG Beige.
3. In der Nachrichten liste, ist oben ein ICON für ungelesene Nachrichten.
Dort befindet sich ein schwacher, grüner Punkt. Könnte man ihn auf dunkelrot setzen, wenn Nachrichten neu hereinkommen?
4. Die Scrollbalken konnte ich einstellen, aber leider nicht unten für die Nachrichten.
Der Kopfbereich ist jetzt richtig.
Die weiße Farbe für - VON -Betreff - AN ist auf Weiß umgestellt.
Auch die 6 Button (Blaugrau)
Nur konnte man beim Zuklappen vor dem VON keine 2. Zeile mit Mailadresse und Betreff gebildet werden.
Wie im Firefox war mir es nicht möglich, die Überhangliste mit meinem Farbverlauf zu versehen.
Grüße Neddy
ich habe noch ein klein wenig gebastelt,
Ich habe in der neuen CSS-Code-Listen-Block oben folgendes geändert:
/* =====================================================
? Thunderbird Benutzeroberfläche – Benutzerdefiniertes Design
?? Version: TB 141 esr) Gesamtfassung Stand: 05.08.2025 20:03h (bereinigt)
?? Basis: Code vom 08.01.2025 + Umstellungen/Ergänzungen TB-Forum Beitrag: 23
?? Hinweis: about:config
- toolkit.legacyUserProfileCustomizations.stylesheets` ? true
- devtools.chrome.enabled` ? true
============================================== */
Was bedeuten die vielen Fragezeichen ??? - Sind es Fehler, oder habe ich die Antwort übersehen?
----------------------------------------------------------------------------------
Die Idee von dir, die Mail-Adressen links im Ordnerbaum einfarbig zu belassen, finde ich sehr gut. Ich habe dabei auch den Farbcode #8888C1 getestet, welcher auch sehr gut aussieht. Der Farbverlauf ist trotzdem geblieben.
Scrollbalken alle leider ohne die 2 Farben
-------------------------------------------------------
Aus TB-Forum Beitrag: 23 (267).png
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
5. Schriftgröße der 6 Button richtig.
Grüße 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 (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 !!!
--------------------------------------------- */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
Das ist kein Theme
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.
Verwendest Du ein Theme?
Ja - Compact Headers
Ausschließlich für die TB-Kopfzeile zum Auf- und Zuklappen
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
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 !!!
-----------------------------------------------
*/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