CSS Code für Themen/Nachrichtenliste

Mapenzi

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; }

Alles anzeigen

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; }

Alles anzeigen

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

Zitat von 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

Zitat von 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

Zitat von 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;
}

Alles anzeigen

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;
}

Alles anzeigen

Viel Glück!

dharkness21

Zitat von 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

Zitat von 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

Zitat von 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

Zitat von 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

Zitat von 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

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

Hallo edvoldi,

Zitat von edvoldi

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

Ja, so ist es.

Zitat von edvoldi

Wie hast Du das Zebra Muster hinbekommen?

Das habe ich hier gefunden

TB 115: Alternating row background colors in threadpane

edvoldi

Danke,

werde ich heute Abend einmal testen.

dharkness21

Zitat von 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;
}

Alles anzeigen

edvoldi

Zitat von Mapenzi

Das habe ich hier gefunden

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

dharkness21

Zitat von edvoldi

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

Du meinst die Folderpane?

edvoldi

Zitat von dharkness21

Du meinst die Folderpane?

Ja

dharkness21

Zitat von edvoldi

Zitat von 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

Ich will nichts zentrieren, sondern Zebra Streifen.

Beitrag

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

6. August 2023 um 17:49

dharkness21

Zitat von 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;
}

Alles anzeigen

edvoldi

Zitat von 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 128.4.3 ESR veröffentlicht

Thunderbird 115.16.2 ESR veröffentlicht

Ähnliche Themen

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