Kategorien farblich hervorheben

Naturfreund · 2020-05-12 20_56_41-Kalender - Mozilla Thunderbird.png

Um Rückfragen vorzubeugen, bitten wir um folgende Angaben:

Thunderbird-Version: 68.8
Lightning-Version: 68.8
Betriebssystem + Version: Windows 10 Home
Google-Kalender mit "Provider for Google-Calendar" (ja/nein): ja
Google- oder sonstiger Kalender mit WebDAV / CalDAV (ja/nein/was genau):
Eingesetzte Antivirensoftware: Windows Defender
Firewall (Betriebssystem-intern/Externe Software):

Hallo zusammen,

wenn ich einer Kategorie eine Farbe zuweisen, so erscheinen Termine in dieser Kategorie nur mit einem Balken in dieser Farbe ganz rechts.

Ich möchte den farblichen Balken aber nicht nur ganz rechts, sondern über die gesamte Fläche des Termins. Wie kann ich das bewerkstelligen?

Besten Dank

Gerhard

edvoldi

Hallo Naturfreund,

Zitat von Naturfreund

Ich möchte den farblichen Balken aber nicht nur ganz rechts, sondern über die gesamte Fläche des Termins. Wie kann ich das bewerkstelligen?

~~Das kann man nicht ändern.~~

Teste einmal diesen Code.

CSS

.calendar-event-box-container[categories~="kategoriename"] {   
background: #3cb371 !important; 
}
.calendar-event-box-container[categories~="kategoriename"] {
text-align:center !important;
border: 2px solid blue !important;
}
calendar-category-box[categories~="kategoriename"] {
    display: none !important;
}

Gruß
EDV-Oldi

Naturfreund

Hallo EDV-Oldie,

ich habe den Code im Thunderbird-Profil in userChrome.css eingefügt, aber es hat sich nichts geändert - auch nicht nach dem Neustart des Rechners.

Besten Gruß

Gerhard

edvoldi

Hast Du denn schon andere Codes in Thunderbird einfügen?

Naturfreund

Nur die folgenden:

edvoldi

Entschuldigung, ich habe vergessen dabei zu schreiben, das Du natürlich kategoriename durch den Namen Deiner Kategorie ersetzen muss, den Namen aber kleinschreiben.
Wenn Du das für mehrere Kategorien brauchst, musst Du auch für jede Kategorie so ein Code erstellen.

Z.B. für Urlaub

Code

[categories~="urlaub"]

Gruß
EDV-Oldi

Naturfreund

Es funktioniert nach wie vor nicht. Muss ich möglicherweise in Zeile 6 "blue" durch "red" ersetzen?

Naturfreund

Guten Morgen EDV-Oldie,

mir ist zwischenzeitlich ein anderer Gedanke gekommen, den ich auch schon umgesetzt habe: Ich habe einen neuen Kalender erstellt, den ich "Geburtskalender" genannt habe und ihm die Farbe rot zugewiesen.

Herzlichen Dank für Deine Hilfe

Gerhard

edvoldi

Zitat von Naturfreund

Es funktioniert nach wie vor nicht. Muss ich möglicherweise in Zeile 6 "blue" durch "red" ersetzen?

Die Farben kannst Du natürlich selber auswählen.
Hast Du denn jedes mal nach einer Änderung Thunderbird neu gestartet, am besten noch mit leeren des Scriptcaches?

Zitat von Naturfreund

Ich habe einen neuen Kalender erstellt,

Das ist so wie so die bessere Lösung.
Aber auch im Geburtstagskalender habe ich 4 Kategorien.
Da mir die Kalenderfarben wichtig sind vergebe ich für die Kategorien kleine Bildchen.

Gruß
EDV-Oldi

kardio

Das ist so wie so die bessere Lösung.Aber auch im Geburtstagskalender habe ich 4 Kategorien.
Da mir die Kalenderfarben wichtig sind vergebe ich für die Kategorien kleine Bildchen.

Zitat von edvoldi

Gruß
EDV-Oldi

Hallo EDV-Oldi,

gibts die Möglichkeit mit den kleinen Bildchen auch noch in Version 91.5 ?

Da hatte sich doch mal was geändert, oder? Finde jedenfalls nix mehr und die Zeilen ins userChrome.css zu schreiben ändert leider gar nix.

Danke und Gruss

Kardio

edvoldi

Hallo kardio,

Zitat von kardio

gibts die Möglichkeit mit den kleinen Bildchen auch noch in Version 91.5 ?

Ich habe zum Beispiel für die Kategorie "Geburtstag" diesen Code.

CSS

/*   Kategorie: Geburtstag   */
    .calendar-category-box[style="background-color: var(--category-geburtstag-color);"] {
    min-width: 15px !important;
    background-image:url("file:///C:/Dropbox/Chrome/Icons/gebw.png") !important;
    background-repeat: no-repeat !important;
    }

oder mit base64 Bild

CSS

    .calendar-category-box[style="background-color: var(--category-geburtstag-color);"] {
    min-width: 15px !important;
    background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAACTUlEQVR4Xq3RXUhTYRgH8P/ZmXmOH+mO7MNoOQwk6NTmR7GwiwrL8iKDiCireVdQGJEX86pidRFIRhdeCMWpLjMv8mI4b5SCECkcgtDWZqCxGZub05kf5+wJXrY16ePK3+Xz8Pzf5+HFtjPYXXLtFZ+y5/JoxHz1PRkvjZH5zFDEeFRRxOp2Gf+z+/QTt+3GxGbn6xi9CxD5F4i+xIh8YaKbryJkOjW0WVrT5f77cFufe3+3n15MZdjgfIqYmW8JmpzbZLXBGY32nR8mwXw9H6JjaztcMl/T7Ll49gAkkcNsEljeAPN9PobxqSir6XkdutxtKLYe8RSJx9g5HADsvTaqVB9qdJ1rMqAwWZdexOfpORx02pGzoQFvfWH4nyov1ZSnUw8AKvhWg8mAYAKMpRTokAGxSILdlMFz/yJWBAkzcSCcBFShFnxRcSsAsIB1XrDEVoGV7NqBOABNxf3jesz+TGLYDyxJEgplKiUL4tkAUjWEEwCvQ16VyFogbQ3La/gDEZDfQLeUiEbTsHAACAxi6dxTa6ANDlCx1Y+F6O+AdGpEiEVdqmRBDk9gSFsHr3LgCHmZUBDaSmok/42Jr4O9ZcFJ1SQSTCWArQK47QTT2OBAR1MZTILGekYhA92YVwU+9qLQzrq77l3tXmro1+jwAFFrX4haHn2ilocT5OwZp/pnq6xXUa8QcKEbWRwKlFpvuctrnB7biWZ9VZ1t68nTQQQGvepS6EMP8KYX/7Kj4qRcUvVAKbc+jlQ7Bsgs95NYeS8C3FEAp4zt9gv5lvx9cOlvNAAAAABJRU5ErkJggg==") no-repeat !important;
    }

Gruß

EDV-Oldie

kardio

Hallo EDV-Oldie,

danke für die schnelle Antwort.

Habs in die userChrome.css reinkopiert und den Pfad und Kategorienamen (in Kleinbuchstaben) angepasst, leider passiert nischte.

In der alten Version klappte es ja sogar, Bilder vor den Text im Kalender zu bauen:

CSS

.calendar-event-box-container[categories~="xl"] {
height:34px !important;
border: solid #ffffff 1px !important;
padding-left: 35px !important;
padding-top: 4px !important;
background: #00ffc0 !important;
background-image: url("pics/xl.png") !important;
background-position: bottom left !important;
background-repeat: no-repeat !important;
font-weight: bold ;
}
calendar-category-box[categories~="xl"] {
display: none !important;
}

Alles anzeigen

Gibts da gar keine Möglichkeit mehr? Habe leider trotz intensiver Suche nichts brauchbares gefunden.

Gruss Kardio

edvoldi

Hallo kardio,

Zitat von kardio

In der alten Version klappte es ja sogar, Bilder vor den Text im Kalender zu bauen:

Die Bilder sind jetzt hinter dem Text zu sehen

.

Zitat von kardio

Habs in die userChrome.css reinkopiert und den Pfad und Kategorienamen (in Kleinbuchstaben) angepasst, leider passiert nischte.

Hast Du auch einen Neustart mit löschen des Script Caches gemacht?
Oder besser noch einmal im Fehlerbehebungsmodus starten. und dann wieder normal.

Gruß

EDV-Oldie

kardio

Im Entwicklerwerkzeuge-Modus zeigt er Änderungen immer sofort an. Da brauch ich nix neu starten oder Cache löschen.

Und ob die Bilder vor oder hinter dem Text sind ist mir auch wurscht, Hauptsache, sie werden überhaupt angezeigt.

Aber bitte abhängig von der Kategorie und nicht vom Kalender, ich werd hier noch wahnsinnig...

Gruss Kardio

dharkness21

Hallo kardio,

schau mal, ob Du damit ↓ etwas anfangen kannst.

CSS

.calendar-color-box {
    border-radius: 0 !important;
    border: 1px solid #B2B2B2 !important;
    background-image: none !important;
    padding: 2px !important;
}

.calendar-category-box {
    border-radius: 0 !important;
    min-width: 193px !important;
    background-image: none !important;
    padding: 0 !important;
    margin: 0 0 0 -148px !important;
}
.alarm-icons-box,
.reminder-icon {
    margin: 2px -35px 0 0 !important;
}
.item-classification-box,
.reminder-icon,
.event-name-label,
.item-time-label,
.alarm-icons-box {
    z-index: 100000 !important;
    color: #000 !important;
}
.item-time-label {
    margin-left: 2px !important;
}

Alles anzeigen

dharkness21

Hier nun meine vorerst fertige Version.

CSS

.calendar-color-box {
    border-radius: 0 !important;
    border: 1px solid #B2B2B2 !important;
    background-image: none !important;
    padding: 2px !important;
}

.calendar-category-box {
    border-radius: 0 !important;
    min-width: 193px !important;
    background-image: none !important;
    padding: 0 !important;
    margin: 0 0 0 -148px !important;
}
.item-classification-icon,
.reminder-icon,
.event-name-label,
.item-time-label,
.alarm-icons-box {
    z-index: 100000 !important;
    color: #000 !important;
}
/* .alarm-icons-box {
    margin: 3px -40px 0 0 !important;
} */
.reminder-icon {
    margin: 3px -45px 0 0 !important;
}
.item-classification-icon {
    margin: 3px -25px 0 9px !important;
}
.item-time-label {
    margin-left: 2px !important;
}

Alles anzeigen

kardio

Guten Morgen,

bin mit meinem Grundstyling soweit zufrieden, eben die Bilder fehlen noch.

Wäre folgender Ansatz noch was?

Das man alle Felder, bei denen die Hintergrundfarbe die Farbe der Kategorie hat, das Hintergrundbild reinmacht???

Also codisch ausgedrückt so ungefähr:

CSS

.calendar-category-box[background-color=var(--category-meinekategorie-color)]{
margin:0 0 0 -10px !important;
min-width: 20px !important;
min-height: 20px !important;
height:34px !important;
border: solid #ffffff 1px !important;
padding-left: 20px !important;
padding-top: 4px !important;
padding-bottom: 4px !important;
background-image: url("pics/bild.png") !important;
background-position: bottom left !important;
background-repeat: no-repeat !important;
}

Alles anzeigen

Bin jetzt nicht so der CSS-Spezi, funktioniert das mit Bedingungen so?

Hier mein aktueller Stand:

CSS

.calendar-category-box{
margin:0 0 0 -10px !important;
min-width: 20px !important;
min-height: 20px !important;
height:34px !important;
border: solid #ffffff 1px !important;
padding-left: 20px !important;
padding-top: 4px !important;
padding-bottom: 4px !important;
}
.alarm-icons-box,.reminder-icon{
margin:0 0 0 0 !important;
}
.event-name-label,.item-time-label,.alarm-icons-box,.reminder-icon{
z-index:100000!important;
padding-left: 8px !important;
padding-bottom: 4px !important;
}
.calendar-item-flex{
padding:0!important;
background-color:lightblue !important;
}
.calendar-month-day-box-list-item{
margin:0!important;
}
.calendar-color-box{
border:none!important;
}
.event-name-label{
white-space:break-spaces!important;
padding-top: 4px !important;
padding-bottom: 4px !important;
}
.item-time-label {
font-weight: bold !important;
}

Alles anzeigen

Schönen Sonntag!

Gruss Kardio

dharkness21

Zitat von kardio

bin mit meinem Grundstyling soweit zufrieden, eben die Bilder fehlen noch.

Ich habe mal ein wenig an Deinem CSS geschraubt, schau mal ob es Dir so gefällt.

CSS

.calendar-month-day-box-list-item {
    margin: 1px !important;
}
.calendar-color-box {
    border: solid 1px #000 !important;
}
.calendar-category-box {
    min-width: 20px !important;
    min-height: 26px !important;
    border-left: solid 1px #000 !important;
    padding-top: 4px !important;
    padding-bottom: 4px !important;
    padding-left: 20px !important;
    margin: 0 0 0 -10px !important;
}

/* Für eine Kategorie. */
/* Der Pfad muss noch angepasst werden, es muss aber die gleiche Syntax verwendet werden. */
.calendar-category-box[style="background-color: var(--category-verschiedenes-color);"] {
    background-image: url("file:///H:/Profile/Firefox/Fx57-H-Default/chrome/icons/Bild50.gif") !important;
    background-position: bottom left !important;
    background-repeat: no-repeat !important;
}
/* 2te Kategorie zum Testen. */
.calendar-category-box[style="background-color: var(--category-gesch-uxe4-ft-color);"] {
    background-image: url("file:///H:/Profile/Firefox/Fx57-H-Default/chrome/icons/Bild7.png") !important;
    background-position: bottom left !important;
    background-repeat: no-repeat !important;
}

.item-classification-icon {
    margin: 0 -15px 0 0 !important;
}
.reminder-icon {
    margin: 0 -30px 0 0 !important;
}
.item-classification-icon,
.event-name-label,
.item-time-label,
.alarm-icons-box,
.reminder-icon {
    z-index: 100000!important;
    padding-bottom: 4px !important;
}
.event-name-label,
.item-time-label {
    padding-left: 8px !important;
}
.calendar-item-flex {
    padding: 0 !important;
    background-color: lightblue !important;
}
.item-classification-icon,
.reminder-icon,
.event-name-label,
.item-time-label,
.alarm-icons-box {
    z-index: 100000 !important;
    color: #000 !important;
}
.event-name-label {
    white-space: break-spaces !important;
    padding-top: 4px !important;
    padding-bottom: 4px !important;
}
.item-time-label {
    font-weight: bold !important;
}

Alles anzeigen

P.S.:

Ich habe den Code auch noch ein wenig logisch sortiert und der besseren Übersicht wegen m.M.n. besser ausgerichtet.

dharkness21

So * sieht es derzeit mit dem ** CSS-Voodoo bei mir aus.

*

**

CSS

.calendar-month-day-box-list-item {
    margin: 1px !important;
}
.calendar-color-box {
    border-radius: 0 !important;
    border: 1px solid #B2B2B2 !important;
    background-image: none !important;
    padding: 2px !important;
}

.calendar-category-box {
    min-height: 24px !important;
    min-width: 195px !important;
    border-radius: 0 !important;
    background-image: none !important;
    padding: 0 !important;
    margin: 0 0 0 -148px !important;
}
.item-classification-icon,
.reminder-icon,
.event-name-label,
.item-time-label,
.alarm-icons-box {
    z-index: 100000 !important;
    color: #000 !important;
}
.event-name-label,
.item-time-label {
    padding-bottom: 2px !important;
}
.reminder-icon {
    margin: 4px -45px 0 0 !important;
}
.item-classification-icon {
    margin: 4px -25px 0 9px !important;
}
.event-name-label {
    white-space: break-spaces !important;
}
.item-time-label {
    margin-left: 2px !important;
}

Alles anzeigen

P.S.:

Der farbige Rand um den Kalender ist die in den Kalendereinstellungen zugeordnete Farbe.

kardio

Super, funktioniert alles wie gewünscht! Du bist der Beste!!!

Vielen Dank und einen schönen Sonntag!

Gruss Kardio

Kategorien farblich hervorheben

Thunderbird 139.0.2 veröffentlicht

Thunderbird 128.11.1 ESR veröffentlicht