CSS Code für Themen/Nachrichtenliste

Mapenzi · August 5, 2023 at 9:00 PM

Hallo aus Lutetia,

inzwischen habe ich einen nicht geringen Teil meiner userChrome.css Datei von der v102 zur v115 transponiert, aber bei einigen Code für die Themen/Nachrichtenliste komme ich nicht weiter.

Bislang habe ich die CSS Code für eine dezente "Zebrastreifung" sowie die Hintergrundfarben einer selektierten Nachricht gefunden, je nachdem ob sie im Fokus steht oder nicht.

CSS

  /* :::: Threadpane tweaks :::: */

.tree-table  { 
background-color: azure !important; }

#threadTree tr:nth-child(2n) {
  background-image: linear-gradient(rgba(0,0,0,.05), rgba(0,0,0,.05)) !important;  }

[is="tree-view-table-body"]:focus > .selected[data-properties~="untagged"] {
  background-color: royalblue !important; }
  
tr[is="thread-row"].selected[data-properties~="untagged"] {
  background-color: highlight !important; }

Display More

Da ich relativ häufig Schlagwörter zur Kennzeichnung bestimmter Nachrichten benutze, hatte ich in v102 die Hintergrundfarbe für "im Fokus/nicht im Fokus" auch auf mit Schlagwörtern belegte, selektierte Nachrichten erweitert. Ein Beispiel für den Tag "Wichtig" (important) in v102:

CSS

/* :::: Tag tweaks :::: */

treechildren::-moz-tree-cell(T_24label1, selected, focus) {
background-color: #FF0000 !important; }

treechildren::-moz-tree-cell-text(T_24label1) {
color: red !important; }

treechildren::-moz-tree-row(T_24label1, selected) {
background-color: highlight !important;
color: #000 !important; }

treechildren::-moz-tree-cell-text(T_24label1, selected, focus) {
background-color: #FF0000 !important;
color: #FFF !important; }

Display More

Ich habe die ThreadPane.css Datei der v115 von oben bis unten durchsucht und nicht geschafft, den vorigen Code zu transponieren.

Ebenso kann ich im Entwickler-Werkzeugkasten keinen Code finden, um die Schriftgröße in der Leiste mit den Spaltenköpfen zu ändern.

Es ist irgend wie unverständlich, dass ich einen Code für die Schriftfarbe (color) und font-style gefunden habe, in dem aber font-size nicht wirkt.

Im voraus herzlichen Dank für eure Vorschläge!

dharkness21 · August 5, 2023 at 9:43 PM

Quote from Mapenzi

um die Schriftgröße in der Leiste mit den Spaltenköpfen zu ändern.

Teste bitte mal das ↓.

CSS

.tree-table-header.threaded tr th div button {
    font-size: 20px !important;
}

Mapenzi · August 5, 2023 at 10:45 PM

Quote from dharkness21

Teste bitte mal das

Danke für den Vorschlag, leider ändert er nichts bei mir.

Der folgende Code funktioniert hier, aber nur mit den beiden Attributen

CSS

thead.tree-table-header  {
  font-style: italic !important;
  color: blue  !important; 
}

ThoBa · August 6, 2023 at 12:56 AM

Quote from Mapenzi
Der folgende Code funktioniert hier, aber nur mit den beiden Attributen
CSS
thead.tree-table-header  {
  font-style: italic !important;
  color: blue  !important; 
}

Ja, für die Tabellenüberschrift besteht nun aus einzelnen Buttons, welche

auch so behandelt werden möchten.

Schau einmal hier:

CSS

treecol, treecolpicker, tree-columnpicker-botton,
.button-column-picker,
#flaggedColButton, #threadColButton, #recipientColButton,
#junkStatusColButton, #statusColButton, #sizeColButton,
#accountColButton, #senderColButton, #locationColButton,
#dateColButton, #attachmentColButton, #subjectColButton, 
#correspondentColButton, #receivedColButton, #selectColButton,
#unreadButtonColHeaderButton, #totalColButton, #tagsColButton,
#priorityColButton, #unreadColButton, #idColButton,
#deleteColButton
{
    appearance: none !important; /* ab V115 */
    background: #FFFF80 !important;
    border: 1px solid gray !important;
    font-weight: bold !important;
    font-size: 14px !important;
}

Display More

Die zwei ersten Zeilen haben immer noch Einfluss auf Überschriften in anderen

Dialogen (siehe bspw. "Kalender" oder "OpenPGP-Schlüssel verwalten").

Möchtest du diese Buttons dann auch noch bei dem "Hovern" hervorheben

(Standard in der Grundeinstellung), so kommt folgender Code noch hinzu:

CSS

treecol:hover, treecolpicker:hover,
.button-column-picker:hover,
#flaggedColButton:hover, #threadColButton:hover,
#recipientColButton:hover, #junkStatusColButton:hover,
#statusColButton:hover, #sizeColButton:hover,
#accountColButton:hover, #senderColButton:hover,
#locationColButton:hover, #dateColButton:hover,
#attachmentColButton:hover, #subjectColButton:hover, 
#correspondentColButton:hover, #receivedColButton:hover,
#selectColButton:hover, #unreadButtonColHeaderButton:hover,
#totalColButton:hover, #tagsColButton:hover,
#priorityColButton:hover, #unreadColButton:hover,
#idColButton:hover, #deleteColButton:hover

{
/*    -moz-appearance: none !important; /* bis V102 */
    appearance: none !important; /* ab V115 */
    background: #d8f3ff !important;
    border: 1px solid gray !important;
    font-weight: bold !important;
    font-size: 14px !important;
}

Display More

Viel Glück!

dharkness21 · August 6, 2023 at 9:52 AM

Quote from ThoBa

Ja, für die Tabellenüberschrift besteht nun aus einzelnen Buttons, welche
auch so behandelt werden möchten

Nein, so aufwändig muss das nicht gemacht werden, schau Dir mein CSS an, das reicht völlig.

dharkness21 · August 6, 2023 at 10:41 AM

Quote from Mapenzi

Danke für den Vorschlag, leider ändert er nichts bei mir.

Dann solltest Du vorhergehende Einträge auf Fehler testen, funktioniert hier ohne Probleme.

Mapenzi · August 6, 2023 at 11:07 AM

Quote from dharkness21

Dann solltest Du vorhergehende Einträge auf Fehler testen, funktioniert hier ohne Probleme.

Ich habe jetzt noch mal getestet, nur mit deinem Code, und meine sämtlichen CSS entfernt!

Was mache ich falsch?

dharkness21 · August 6, 2023 at 11:12 AM

Quote from Mapenzi

Ich habe jetzt noch mal getestet, nur mit deinem Code, und meine sämtlichen CSS entfernt!

Entferne die @namespace-Zeile und das .threaded und teste erneut.

Mapenzi · August 6, 2023 at 5:36 PM

Quote from dharkness21

teste erneut.

Das Entfernen von .threaded hat den Unterschied gemacht, auch mit der @namespace Zeile!

Wenn ich letztere weglasse, funktionieren einige meiner Code nicht mehr.

Was mich jetzt noch stört, ist diese unharmonische Datums/Zeitanzeige

In der v102 konnte die Inhalte der Kolonnen Datum und Größe mittig anzeigen mit dem Code

CSS

treecol#sizeCol,
treechildren::-moz-tree-cell(sizeCol),
treecol#dateCol,
treechildren::-moz-tree-cell(dateCol) {
text-align: center !important; }

Ich werde halt mal weiter testen mit den neuen Identitäten der Spalten bzw Kolonnen

edvoldi · August 6, 2023 at 5:43 PM

Hallo Mapenzi,

ich vermute das obere Bild ist aus der Version 115 oder?

Wie hast Du das Zebra Muster hinbekommen?

Ich habe das schon gesucht.

Gruß EDV-Oldie getippt auf dem Smartphone

Mapenzi · August 6, 2023 at 5:49 PM

Hallo edvoldi,

Quote from edvoldi

ich vermute das obere Bild ist aus der Version 115 oder?

Ja, so ist es.

Quote from edvoldi

Wie hast Du das Zebra Muster hinbekommen?

Das habe ich hier gefunden

TB 115: Alternating row background colors in threadpane

edvoldi · August 6, 2023 at 6:07 PM

Danke,

werde ich heute Abend einmal testen.

dharkness21 · August 6, 2023 at 8:04 PM

Quote from Mapenzi

In der v102 konnte die Inhalte der Kolonnen Datum und Größe mittig anzeigen mit dem Code

In der 115'er geht es so ↓.

CSS

/* Text der Spaltenöpfe zentrieren. */
.tree-table-header.threaded tr th div button#dateColButton,
.tree-table-header.threaded tr th div button#sizeColButton {
    appearance: none !important;
    text-align: center !important;
}
/* Text der Spalten zentrieren. */
#threadTree table[is="tree-view-table"] > tbody > tr > td.datecol-column,
#threadTree table[is="tree-view-table"] > tbody > tr > td.sizecol-column {
    appearance: none !important;
    text-align: center !important;
}

Display More

edvoldi · August 6, 2023 at 9:28 PM

Quote from Mapenzi

Das habe ich hier gefunden

hast Du auch noch einen Code für die linke Spalte mit den Mail Konten?

dharkness21 · August 6, 2023 at 9:30 PM

Quote from edvoldi

hast Du auch noch einen Code für die linke Spalte mit den Mail Konten?

Du meinst die Folderpane?

edvoldi · August 6, 2023 at 9:31 PM

Quote from dharkness21

Du meinst die Folderpane?

Ja

dharkness21 · August 6, 2023 at 9:34 PM

Quote from edvoldi

Quote from dharkness21

Du meinst die Folderpane?

Ja

In dem Fall verstehe ich nicht, was Du da zentriert haben möchtest, nur die Kontennamen, oder die Größe oder was sonst?

edvoldi · August 6, 2023 at 9:37 PM

Ich will nichts zentrieren, sondern Zebra Streifen.

Post

RE: CSS Code für Themen/Nachrichtenliste

Hallo edvoldi,

[…]

Ja, so ist es.

[…]

Das habe ich hier gefunden

TB 115: Alternating row background colors in threadpane

Mapenzi

August 6, 2023 at 5:49 PM

dharkness21 · August 6, 2023 at 9:51 PM

Quote from edvoldi

Ich will nichts zentrieren, sondern Zebra Streifen.

Ok, das habe ich falsch verstanden, bitte teste mal das ↓.

CSS

/* Zebra Folderpane */
treechildren::-moz-tree-cell(selected, focus) {
    appearance: none !important;
    background-color: #006800 !important;
}

treechildren::-moz-tree-row(selected) {
    appearance: none !important;
    background-color: #5F5F68 !important;
}
treechildren::-moz-tree-row(selected, focus) {
    appearance: none !important;
    background-color: #38383D !important;
}
treechildren::-moz-tree-cell-text(selected),
treechildren::-moz-tree-cell-text(selected, focus) {
    appearance: none !important;
    color: #FFF !important;
}
treechildren::-moz-tree-cell-text(hover),
treechildren::-moz-tree-cell-text(selected, hover),
treechildren::-moz-tree-cell-text(selected, focus, hover) {
    appearance: none !important;
    color: #000 !important;
}
treechildren::-moz-tree-row(hover),
treechildren::-moz-tree-row(selected, hover),
treechildren::-moz-tree-row(selected, focus, hover) {
    appearance: none !important;
    background-color: #D1E2F2 !important;
}

/* Zebra Threadpane */
#threadTree tr {
    background-image: none !important;
    background-color: #006ece !important;
}
#threadTree tr:nth-child(2n) {
    background-image: none !important;
    background-color: #003d76 !important;
}
#threadTree tr.selected {
    background-image: none !important;
    background-color: #006800 !important;
}
#threadTree tr:nth-child(2n).selected {
    background-image: none !important;
    background-color: #006800 !important;
}
#threadTree tr:hover,
#threadTree tr:nth-child(2n):hover,
#threadTree tr.selected:hover,
#threadTree tr:nth-child(2n).selected:hover {
    background-image: none !important;
    background-color: #D1E2F2 !important;
    color: #000 !important;
}

#threadTree tbody .children.collapsed[data-properties~="hasUnread"][data-properties~="read"] :where(td) {
    appearance: none !important;
    background-color: #F20 !important;
    color: #eee8aa !important;
}
#threadTree tbody .children[data-properties~="hasUnread"][data-properties~="read"] :where(td) {
    appearance: none !important;
    background-color: #FF7909 !important;
    color: #000 !important;
}
#threadTree tbody .children.collapsed[data-properties~="hasUnread"][data-properties~="read"].selected :where(td) {
    appearance: none !important;
    background-color: #800 !important;
    color: #eee8aa !important;
}
#threadTree tbody .children[data-properties~="hasUnread"][data-properties~="read"].selected :where(td) {
    appearance: none !important;
    background-color: #873f05 !important;
    color: #FFF !important;
}
#threadTree tbody .children:hover :where(td),
#threadTree tbody .children.collapsed[data-properties~="hasUnread"][data-properties~="read"]:hover :where(td),
#threadTree tbody .children[data-properties~="hasUnread"][data-properties~="read"]:hover :where(td),
#threadTree tbody .children.collapsed[data-properties~="hasUnread"][data-properties~="read"].selected:hover :where(td),
#threadTree tbody .children[data-properties~="hasUnread"][data-properties~="read"].selected:hover :where(td){
    appearance: none !important;
    background-color: #D1E2F2 !important;
    color: #000 !important;
}

tr[data-properties~="imapdeleted"][data-properties~="read"] {
    color: #fc4242 !important;
}
tr[data-properties~="untagged"][data-properties~="unread"] {
    color: #fc7e00 !important;
}
tr[data-properties~="new"][data-properties~="unread"] :where(td) {
    appearance: none !important;
    color: #62cf61 !important;
}

Display More

edvoldi · August 6, 2023 at 9:57 PM

Quote from dharkness21

Ok, das habe ich falsch verstanden, bitte teste mal das ↓

Der Code hat auf die Folderpane keine Auswirkung, nur die Threadpane wird geändert.

CSS Code für Themen/Nachrichtenliste

RE: CSS Code für Themen/Nachrichtenliste

Thunderbird 155.0.1 veröffentlicht

Thunderbird 153.2.0 ESR veröffentlicht

Thunderbird 140.15.0 ESR veröffentlicht

Similar Threads

Problem mit dem Anpassen von eMail Benachrichtigung. Eingabe der Sekunden für die Einblendung nicht möglich!

CSS Code für Einrücken der Ordner im Ordnerbaum

Nach Update auf Version 102.1.2: CSS-Code im Kalender teilweise ohne Funktion

CardBook - eigene Themes Farbe werden überschrieben

UserCSSLoader4g+TB.uc.js läd css-Dateien nicht mehr

CSS Code - Emoji Symbol deaktiverien - Verfassen