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

Thunderbird 102.1.2

Windows 10 64bit

Hallo zusammen,

gestern habe ich mich mal an das Update auf die neuste Version herangetraut. Es hat soweit funktioniert nur so wie zu erwarten muss ich einiges an meiner userChrome.css ändern. Für den Kalender habe ich in der 91er Version folgenden Code verwendet:

.calendar-category-box[style="background-color: var(--category-entsorgung_gartenabfall-color);"],
.calendar-category-box[style="background-color: var(--category-entsorgung_sperrgut-color);"],
.calendar-category-box[style="background-color: var(--category-entsorgung_gelber_sack-color);"],
.calendar-category-box[style="background-color: var(--category-entsorgung_restabfall-color);"],
.calendar-category-box[style="background-color: var(--category-entsorgung_altpapier-color);"] {
min-width: 35px !important;
min-height: 25px !important;
padding: 4px !important;
background-position: right top !important;
background-repeat: no-repeat !important;
}

.calendar-category-box[style="background-color: var(--category-entsorgung_gartenabfall-color);"] {
background-image: url("gruenschnitt.png") !important;
}
.calendar-category-box[style="background-color: var(--category-entsorgung_sperrgut-color);"] {
background-image: url("sperrmuell.png") !important;
}
.calendar-category-box[style="background-color: var(--category-entsorgung_gelber_sack-color);"] {
background-image: url("gelbersack.png") !important;
}
.calendar-category-box[style="background-color: var(--category-entsorgung_restabfall-color);"] {
background-image: url("restabfall.png") !important;
}
.calendar-category-box[style="background-color: var(--category-entsorgung_altpapier-color);"] {
background-image: url("altpapier.png") !important;
}

Den oben genannten Code (stammt von edvoldie) habe ich aus einem Thread übernommen und angepasst (Kategorien farblich hervorheben). Leider funktioniert das nun in der Version 102.1.2 zumindest bei mir nicht mehr und es werden keine Grafiken mehr angezeigt.

Wie muß ich den Code ändern, daß ich im Kalender wieder meine gewohnte Ansicht mit den Grafiken habe?

Zitat von dharkness21

Teste es mal so ↓ in der Form, die Anpassungen musst Du noch mit der korrekten Pfadangabe vervollständigen und Du musst die von mir verwendete Reihenfolge verwenden.

Habe ich probiert, bei mir funktioniert das so leider auch nicht. Es werden weterhin keine Bilder angezeigt.

Inzwischen habe ich selber noch etwas weiter geforscht und wenn ich im Einstellungsmenü des Kalenders den Kategorien eine Farbe zuordne (was im 91er Thunderbird nicht notwendig war) erscheinen die Bilder wieder. Scheinbar wurde ein "hidden" im Code hinzugefügt, welches ohne Farbzuordnung das ganze auszublenden scheint.

Damit ich die Höhe der Termine an die Bilder anpassen kann, musste ich noch folgenden Code mit einfügen, da der alte oben angegebene scheinbar daraufhin nicht mehr funktioniert:

calendar-event-box, calendar-editable-item, calendar-month-day-box-item {
  height: 40px !important;
}

Soweit in Ordnung, allerdings wurden die Bilder im 91er Thunderbird auch in der Seitenleiste (Agenda) immer automatisch mit angezeigt. Das funktioniert leider zur Zeit auch nicht mehr. Was muss ich ändern, damit das auch wieder funktioniert?

Zitat von edvoldi

jede Kategorie muss eine Farbe zugeordnet werde, es ist egal welche.

Ich benutze für Bilder diesen Code:

Danke edvoldie für die Ansicht Deines Code's. Leider werden auch damit die Bilder nicht mehr in der Seitenleiste angezeigt. Im Kalender selber sind sie vorhanden.

Bei mir funktioniert -moz-box-ordinal-group nach dem Update leider auch nicht mehr. Ich nutze diesen Codeschnipsel zum umstellen der Reihenfolge verschiedener Buttons im Thunderbird. Ist dieser Codeschnipsel inzwischen auch obsolet geworden und/oder gibt es noch eine andere Möglichkeit die Reihenfolge verschiedener Buttons im Thunderbird zu ändern?

Zitat von edvoldi

Meinst Du damit den Tagesplan?

Hier werden keine Kategorien mehr angezeigt.

Ja den meinte ich. War das in der 91er Version auch schon so? Ich habe noch im Kopf, daß die Icons immer im Tagesplan mit angezeigt wurden, bin mir jetzt aber gerade nicht mehr sicher ob das noch in der 91er Version gewesen ist...

Zitat von edvoldi

Es kommt auf die Button, die meisten kann einfach verschieben.

Ja ok das weiß ich. Ich habe mich aber auch etwas undeutlich ausgedrückt, mein Fehler

Ich meinte die Message Header Buttons, welche über der Email bzw. Nachricht angezeigt werden. Es gibt dafür zwar auch ein Addon, womit sich das realisieren läßt, allerdings hatte ich das mal mit CSS im 91er gemacht, da man ja nicht genau weiß wie lange entsprechende Addons Kompatibel gehalten werden. CSS kann ich glücklicherweise selber pflegen, auch wenn ich mich hier und da mal einlesen oder nachfragen muss.

Zitat von edvoldi

Nein, da wurden Bilder angezeigt.

Dann hatte ich es doch noch richtig im Kopf gehabt. Gibt es denn noch eine andere Möglichkeit dort die entsprechenden Bilder anzeigen zu lassen?

Kann ich zum Beispiel das Wort "Altpapier" in dem folgenden Code direkt ansprechen und somit diesem ein Bild zuweisen?

<span class="agenda-listitem-title">Altpapier</span>

Sowas wie das folgende funktioniert nicht aber ich dachte es könnte da ggf. etwas ähnliches geben um das Wort anzusprechen:

.agenda-listitem-title[name="Altpapier"] {
  background-color: red !important;
  background-image: url("altpapier.png") !important;
}

Zitat von edvoldi

wenn es den Code so gibt, und in der Browser-Werkzeuge so steht, ja.

Das Wort "Altpapier" ist der dazugehörige Kalender-Eintrag und dieser wird laut Entwicklerwerkzeug folgendermaßen ausgegeben:

<li xmlns="http://www.w3.org/1999/xhtml" is="agenda-listitem" class="agenda-listitem agenda-listitem-all-day" id="agenda-listitem-1da7cc6c-44df-4904-97a8-991d12bc7ecc##02445c64-a156-4532-bfe1-86380340bb0d" style="--item-backcolor: var(--calendar-02445c64-ux2d-a156-ux2d-4532-ux2d-bfe1-ux2d-86380340bb0d-backcolor); --item-forecolor: var(--calendar-02445c64-ux2d-a156-ux2d-4532-ux2d-bfe1-ux2d-86380340bb0d-forecolor);" role="option" aria-selected="false"><div class="agenda-date-header">Freitag, 9. September</div><div class="agenda-listitem-details">
            <div class="agenda-listitem-calendar"></div>
            <div class="agenda-listitem-details-inner">
              <time class="agenda-listitem-time"></time>
              <span class="agenda-listitem-title">Altpapier</span>
              <span class="agenda-listitem-relative"></span>
            </div>
            <img class="agenda-listitem-overlap" />
          </div></li>

Jetzt stellt sich für mich die Frage ob es möglich ist, genau diesen Eintrag anzusprechen (z.B. über das Wort "Altpapier") um diesen das entsprechende Bild zuzuordnen. Da in dem Kalender weitere Einträge sind, darf bzw. soll das Bild nur dann angezeigt werden, wenn z.B. das Wort "Altpapier" drin steht. Ich weiß allerdings nicht ob genau das geht und wie das dazugehörige CSS lauten müsste?

Momentan experimentiere ich mit ::before und ::after etwas herum, was insofern funktioniert, daß bei allen Einträgen im Kalender im Tagesplan immer das gleiche Bild angezeigt wird. Allerdings möchte ich nur beim Eintrag "Altpapier" auch das dazugehörige Bild anzeigen lassen und beim Eintrag "Gelber Sack" das dazu passende. Daher auch meine Idee, das ganze anhand des Wortes im Eintrag zu binden. Nur weiß ich nicht ob das überhaupt per CSS funktionieren würde, da ich keinen eindeutigen Selektor finden kann und/oder nicht weiß, ob man den Eintrag (Content) überhaupt als eindeutige Identifizierung nutzen kann.

Wie würde da ggf. der passende Code dafür aussehen (sofern das überhaupt möglich ist)?

Zitat von edvoldi

Dafür habe ich zur Zeit keine Lösung.

Ok trotzdem vielen Dank für die Unterstützung. Ich finde dafür zur Zeit auch keine Lösung, da ich keinen eindeutigen Selektor für Kalendereinträge im Tagesplan finden kann, welchen ich für individuelle Bilder nutzen könnte.

Wenn man den reinen Text, welcher als Termin angezeigt wird (in meinem Fall z.B. Altpapier) als Selektor nutzen könnte. Vielleicht gibt es dazu einen speziellen CSS-Trick, welcher dies ermöglicht. Gibt es denn noch weitere CSS-Spezialisten hier, die da ggf. einen Lösungsansatz haben?

Zitat von milupo

Altpapier oder was auch immer ist kein Selektor. Du kannst maximal das Element span und die Klasse verwenden, diese sind aber nicht eindeutig.

Ja, das ist ja leider genau das Problem an der Sache. Ich dachte daß es da ggf. einen CSS-Trick geben würde, den ich ggf. noch nicht kenne, welcher dann genau das Wort (in meinem Fall Altpapier) als eindeutigen Selektor "umwandeln" würde (z.B. mit Hilfe einer Pseudoklasse).

Zitat von milupo

Du könntest eins versuchen: Schaue nach, wieviele gleichartige Einträge es gibt und der wievielte Eintrag für Altpapier steht. Es könnte vielleicht funktionieren, die Pseudoklasse :nth-child() verwenden. In Klammern steht dann in diesem Fall die Zahl für die Position.

Daran habe ich auch schon gedacht, doch leider sind die Einträge bei mir nicht gleichartig. Ich vermute, daß es daran liegt, weil die Einträge ja einzeln generiert werden, somit haben sie dann auch keine gleichartigen Selektoren (zumindest finde bzw. sehe ich keine bei mir). Daher funktioniert die Methode leider auch nicht.

Ich befürchte, daß es dann rein CSS-technisch nicht mehr funktionieren wird. Ich finde da leider keine brauchbare Lösung momentan. Daher schonmal vielen Dank an alle, die sich dem Thema gewidmet haben.

Schade das die Anzeige der Kategorien im Tagesplan entfernt worden sind (warum wurden sie überhaupt entfernt?). Kennt denn jemand ein Addon (ggf. kann man es dann wieder realisieren), welches die Kategorien wieder in den Tagesplan anzeigen kann?