CSS "even and odd" Regeln

Jean_Dean

Ich nutze die Mehrzeilen Ansicht und würde gerne jede 2 Spalte in einem dunkleren Hintergrund darstellen

Ich habe mich mal in CSS probiert, aber das funktioniert nicht wirklich.

Wohl auch weil ich nicht die richtige CSS-Anweisung finde/nutze.

Das habe ich versucht (Die Farben dienen nur als Beispiel)

CSS

#threadTree treechildren::-moz-tree-row(multiline, li:nth-last-child(odd)) {
    background-color: green !important;
}
#threadTree treechildren::-moz-tree-row(multiline, li:nth-last-child(even) {
    background-color: red !important;
}

Und hier ein Beispiel wie es am Ende aussehen sollte

jorgk3

Also, striped multi-line geht schon, siehe hier unter "Themes".

Hier noch mein persönliches userChrome.css. Vorsicht: Work in progress mit 'ner Menge junk.

Oh, ich lese das gerade noch einmal, Du willst Spalten hervorheben. Keine Ahnung.

Thunder

Zitat von Jean_Dean

jede 2 Spalte

Würde mich wundern, wenn wirklich Spalten gemeint sind. Der Begriff wird immer wieder mal versehentlich für die Zeilen verwendet.

Mapenzi

Hallo,

Zitat von Jean_Dean

Das habe ich versucht

Dieser CSS Code zeigt auch bei mir keinerlei Wirkung.

Ich benutze hier (in der Mac-Version von TB 91) den folgenden Code, der eine dezente Zebrastreifung bewirkt, etwa so wie es in früheren Versionen Standard war.

Dabei werden auch die Tag-Farben berücksichtigt.

CSS

/* ::: Alternating row colors in thread pane ::: */

#threadTree treechildren::-moz-tree-row(multicol, odd, untagged) {
background-color: azure !important; }

#threadTree treechildren::-moz-tree-row(untagged, selected) {
background-color: #c0d0ff !important; }

#threadTree treechildren::-moz-tree-row(untagged, selected, focus) {
background-color: Highlight !important; }

#threadTree treechildren { 
background-color: #e6eff1 !important; }

Alles anzeigen

Das sieht bei mir dann so aus

Jean_Dean

Zitat von Thunder

Würde mich wundern, wenn wirklich Spalten gemeint sind. Der Begriff wird immer wieder mal versehentlich für die Zeilen verwendet.

Dann bitte aber auch gleich richtigstellen. Danke

Jean_Dean

@jorgk3 Danke. Da muss ich mal sehen, ob ich mich irgendwie durchfinde, aber das suchte ich 👍

Mapenzi Auch an dich vielen Dank. Auch was ich suchte 😁

nowar

Zitat von Mapenzi

Das sieht bei mir dann so aus

Versuchen Sie, die Zeilenhöhen zu ändern, und die Höhen der geraden und ungeraden Zeilen werden unterschiedlich sein.

Dies gilt für alle Zebra-Stilarten, die keinen Code zum Ausrichten der Höhen von geraden und ungeraden Linien haben. Wir müssen folgenden Code hinzufügen

CSS

/* row height in thread pane. Values of height: and min-height: must be the same */
#threadTree > treechildren::-moz-tree-row {
height: 32px !important;
min-height: 32px !important;
}

Zitat von Jean_Dean

Ich nutze die Mehrzeilen Ansicht und würde gerne jede 2 Spalte in einem dunkleren Hintergrund darstellen

CSS

/* Thunderbird userChrome.css */
/* Go to about:config and set toolkit.legacyUserProfileCustomizations.stylesheets = true (by default = false) */
/*****************************************************************/
/* colour for even numbered rows */
#threadTree treechildren::-moz-tree-row(even) {
background-image: linear-gradient(rgba(0,0,0,.08), rgba(0,0,0,.08)) !important;  /* Highlight, complication for tagged rows */
}
/**********End of code**********/

/* ----------------- FOLDER PANE ----------------- */

/* row height in folder pane */
#folderTree treechildren::-moz-tree-row {
height: 20pt !important;
margin-top: -1px !important;
margin-bottom: -1px !important;
}

/* remove thin blue row line artifacts remaining after hover in folder pane */
#folderTree treechildren::-moz-tree-row(hover),
#folderTree treechildren::-moz-tree-row(selected){
margin-top: 0px !important;
margin-bottom: 0px !important;
}

/* hovered item background color in folder pane, default #0A246A */
#folderTree treechildren::-moz-tree-row(hover){
-moz-appearance: none !important;
background-color: #A9DFB3 !important;
}

/* hovered item text color in folder pane, default #FFFFFF */
#folderTree treechildren::-moz-tree-cell-text(hover){
color: #000000 !important;
}

/* selected item background color in folder pane, default #0A246A (dark blue)*/
#folderTree treechildren::-moz-tree-row(selected){
-moz-appearance: none !important;
background-color: #FF8000 !important;
}

/* selected item text color in folder pane, default #FFFFFF */
#folderTree treechildren::-moz-tree-cell-text(selected){
/*font-weight: bold !important;*/
color: #FFFFFF !important;
}

/* ----------------- THREAD PANE ----------------- */

/* remove thin blue row line artifacts remaining after hover in thread pane */
#threadTree treechildren::-moz-tree-row(hover),
#threadTree treechildren::-moz-tree-row(selected){
margin-top: 0px !important;
margin-bottom: 0px !important;
}

/* hovered item background color in thread pane, default #0A246A */
#threadTree treechildren::-moz-tree-row(hover) {
-moz-appearance: none !important;
background-color: #A9DFB3 !important;
}

/* hovered item text color in thread pane, default #FFFFFF */
#threadTree treechildren::-moz-tree-cell-text(hover){
color: #000000 !important;
}

/* selected item background color in thread pane, default #0A246A (dark blue) */
#threadTree treechildren::-moz-tree-row(selected) {
-moz-appearance: none !important;
background-color: #FF8000 !important;
}

/* selected item text color in thread pane, default #FFFFFF */
#threadTree treechildren::-moz-tree-cell-text(selected) {
-moz-appearance: none !important;
color: #FFFFFF !important;
}

/* row height in thread pane. Values of height: and min-height: must be the same */
#threadTree > treechildren::-moz-tree-row {
height: 32px !important;
min-height: 32px !important;
}
/**********End of code**********/

/* Global Font Size */
* { font-size: 13pt !important;
font-family: Verdana !important;
}
/**********End of code**********/

Alles anzeigen

Sie können die Abschnitte entfernen

/* ----------------- FOLDER PANE ----------------- */ und /* Global Font Size */ wenn sie nicht benötigt werden.

Sie können auch die Hintergrundfarbe der Spaltenüberschriften und die Schriftart ändern (mit anderem Code)

Beitrag

RE: Betterbird: "Schnupper-Version" 102.0

[…]

Ich habe bb8 als portable Version ausprobiert, keine Probleme, aber mein Wissen ist zu gering für eine detaillierte Analyse.

Standardmäßig gibt es keine Option, eine Spalte hinzuzufügen, um einer E-Mail einen beliebigen benutzerdefinierten Tag zuzuweisen. Ist es unmöglich, diese Option zu implementieren?

Der Inhalt kann nicht angezeigt werden, da er nicht mehr verfügbar ist.

nowar

24. Juni 2022 um 16:26

Mapenzi

Zitat von nowar

Wir müssen folgenden Code hinzufügen

Das stimmt nicht.

ich benutze zwar den Code für den Zeilenabstand

/* Line Spacing In Thread Pane */

#threadTree > treechildren::-moz-tree-row {

height: 19.4px !important;

min-height: 0px !important; }

aber gleichgültig, ob ich diese Code nun benutze oder nicht, die geraden und ungeraden Zebrastreifen haben alle die gleiche Höhe bzw den gleichen Abstand

Ohne den obigen Code für den Zeilenabstand:

Mit Code für den Zeilenabstand:

, Selbst wenn ich z. B. 25px als Zeilenabstand wähle, kann ich nicht mal Zehntel Millimeter Differenzen zwischen geraden und ungeraden Zeilen erkennen.

Dein kompletter "Threadpane" Code ergibt bei mir diese Ansicht, also keinerlei Zebrastreifen:

nowar

Zitat von Mapenzi

Dein kompletter "Threadpane" Code ergibt bei mir diese Ansicht, also keinerlei Zebrastreifen:

Es scheint durch Ihren anderen Code behindert zu werden. So sieht Zebra bei mir aus (TB v75.14.0, v91.10.0, v102.0b8, BB v91.10.0, v102.0)

Jean_Dean

Hier mal das, was ich bisher, mit eurer Hilfe, zusammengetragen habe.

CSS

/* !!! Go to about:config and set toolkit.legacyUserProfileCustomizations.stylesheets = true (default = false) !!! */

/* Font Grösse -> Absender, Topic, Uhrzeit !! */
#threadTree treechildren::-moz-tree-cell-text(multiline) {
  font-size: 13px;
}
#threadTree treechildren::-moz-tree-cell-text(multiline, colspan) {
  font-size: 12px;
}

/* Farbe Topic ändern - Font Style normal, nicht cursiv */
#threadTree treechildren::-moz-tree-cell-text(colspan) {
  font-style: normal !important;
  color: #666666 !important;
}

/* remove thin blue row line artifacts remaining after select (KLICK) a message in thread pane */
#threadTree treechildren::-moz-tree-row(selected) {
  border-top: 0px none !important;
  border-left: 2px solid rgb(0, 128, 43) !important; /* Fügt links eine dunkelgrüne Linie hinzu */
}
/* Threadpane links on Hover hellgrüne Linie */
#threadTree treechildren::-moz-tree-row(hover) {
  border-left: 2px solid rgb(0, 153, 51) !important;
}

/* Keine Ahnung */
#threadTree treechildren::-moz-tree-cell-text(correspondentCol) {
   #font-weight: bold !important;
}
#threadTree treechildren::-moz-tree-cell-text(senderCol) {
  #font-weight: bold !important;
}
#threadTree treechildren::-moz-tree-cell-text(recipientCol) {
  #font-weight: bold !important;
}

/* needed for TB 102 since there they style selected stuff in white which doesn't look good on light blue
#threadTree treechildren::-moz-tree-cell-text(untagged) {
  color: black !important;
}
#threadTree treechildren::-moz-tree-image(selected, untagged) {
  fill: black !important;
}
#threadTree treechildren::-moz-tree-twisty(selected, untagged) {
  fill: black !important;
}
#threadTree treechildren::-moz-tree-line(selected, untagged) {
  border-color: black !important;
}
 */

/* Neue Mails, für bessere Sichtbarkeit */
treechildren::-moz-tree-cell-text(multiline, colspan) {
  font-style: normal !important;
}
treechildren::-moz-tree-row(multiline, unread) {
  border-left: 2px solid rgb(0, 114, 198) !important;
  background-color: rgba(0, 114, 198, 0.03) !important;
}

/* colour for even numbered rows */
#threadTree treechildren::-moz-tree-row(even) {
  background-image: linear-gradient(rgba(0,0,0,.06), rgba(0,0,0,.06)) !important;  /* Highlight, complication for tagged rows */
}

/* Crazy multi-line stuff - übernommen von jorgk (Thunderbird Form DE)*

#threadTree treechildren::-moz-tree-row(multiline, unread) {
  border-left: 3px solid #0080C0 !important;
  background-color: rgba(0, 128, 192, 0.1) !important;
}
#threadTree treechildren::-moz-tree-cell-text(multiline) {
  font-size: 15px;
}
#threadTree treechildren::-moz-tree-cell-text(multiline, colspan) {
  font-size: 12px;
}
*/



/* Komplette CSS-Code eine Zusammenstellung von https://www.thunderbird-mail.de/forum/thread/89797-css-even-and-odd-regeln/ - Vielen Dank für die vielen Ideen */

Alles anzeigen

nowar

Zitat von Jean_Dean

/* Threadpane links on Hover hellgrüne Linie */

Eine interessante Lösung.

Mapenzi

Zitat von nowar

Es scheint durch Ihren anderen Code behindert zu werden.

Nein, auch das nicht.

Wenn ich ausschließlich deinen CSS Code für Threadpane benutze, sieht es hier so aus

Es gibt halt gewisse Code-Unterschiede zwischen den verschiedenen Systemversionen von TB

nowar

Erneut geprüft. Der Code "FOLDER PANE" wurde entfernt, Zebra ist da.

Im Zweifelsfall oder bei Schwierigkeiten benenne ich die Hauptdatei userChrome.css in userChrome.css_____ um (der Einfachheit halber) und füge den fraglichen Code in eine neue, saubere userChrome.css ein, um den Einfluss des anderen Codes zu eliminieren.

Ich bin mir der Tatsache bewusst, dass einige Codes in anderen Versionen von TB nicht funktionieren könnten.

Haben Sie zufällig den Codeabschnitt /* colour for even numbered rows */ entfernt?

Mapenzi

Zitat von nowar

Haben Sie zufällig den Codeabschnitt /* colour for even numbered rows */ entfernt?

Zut, den hatte ich in der Tat nicht kopiert, da er nicht unter

Code

- THREAD PANE ---

stand. Daran lag es, also unnötig neu zu testen.

Ich habe die Gewohnheit, zugunsten der besseren Übersichtlichkeit meine CSS Code je nach Oberflächen-Teilfenster zu bündeln, dadurch finde ich mich viel schneller in den DevTools zurecht.

Also folderpane, threadpane, toolbars, Verfassenfenster, message header, address book, Tabs, Kalender, ....

Thunder

Zitat von Jean_Dean

Dann bitte aber auch gleich richtigstellen. Danke

Ähhhh, muss ich das jetzt verstehen? Du reagierst mit Daumen runter auf meinen obigen vollkommen richtig interpretierten Beitrag, dass Du (wenn ich nun nicht irre) die Zebra-Streifen für die Zeilen gemeint hast (obwohl Du von Spalten geschrieben hast). Was hätte ich dann bitte "auch gleich richtigstellen" sollen? Ich glaube, Du hast da irgendwas in den falschen Hals bekommen.

jorgk3

Also, ich habe diese Diskussion zum Anlass genommen, mein userChrome.css aufzuräumen, zu strukturieren und es für TB/BB 102 anzupassen. Hier ist das Ergebnis. Nicht in "dark mode" getestet.

Mapenzi

Zitat von jorgk3

Hier ist das Ergebnis

Da werde ich mal reinschauen.

Ich bin noch weit davon entfernt, habe erst etwa ein Drittel meiner userChrome.css Datei für v102 umgeschrieben, aber es gibt noch ain paar harte Nüsse, die ich nicht knacken kann.

jorgk3

Hier noch ein kleiner Tweak. Damit sehen die icons in selektierte Zeilen weniger schwarz aus.

Jean_Dean

Vielen Dank für eure Teilnahme.

jorgk3

Wir haben ja alle was gelernt. In meinem war noch ein Fehler, so ist es richtig:

CSS

#folderTree treechildren::-moz-tree-cell-text(selected) {
  color: black !important;
}

CSS "even and odd" Regeln

RE: Betterbird: "Schnupper-Version" 102.0

Thunderbird 128.4.3 ESR veröffentlicht

Thunderbird 115.16.2 ESR veröffentlicht

Ähnliche Themen

Diskussionsthread für Benutzerskripts

Allow HTML Temp preferences change to "Original HTML" and "Always show attachments inline" whenever "Show HTML" is invoked

Darstellung mehrtägiger Termine als durchgehender Balken

email wenn Neu andere Farbe in Ordnerliste

UserCSSLoader.uc.js arbeitet in TB 91nicht, in FF 91schon.