CSS "even and odd" Regeln

  • 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

  • Hallo,

    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.


    Das sieht bei mir dann so aus


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

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

    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)

  • 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:


  • 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)

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


  • 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

  • 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?

    Edited once, last by 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, ....

  • 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.

  • 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.

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