wieder mal CSS anpassen - Kalenderfarben

K.Achim

Moin allerseits.

Nutze TB v78.12.0 auf diversen Rechnern mit Win 10/64 und 8.1/64 und möchte Farben in der Kalenderansicht ändern.

Habe hier und im Camp-Firefox viel zu dem Thema gefunden, leider tu' ich mich schwer bei der Anwendung des "Inspectors".

Konkret geht es um die Hintergrundfarben der Tage außerhalb des aktuellen Monats. Aktuell sind diese leicht grau hinterlegt und setzen sich für mich nicht stark genug vom Weiß des aktuellen Monats ab, weswegen ich die Grautöne für Wochentage und Wochenenden jeweils ein, zwei Nuancen dunkler gestalten würde.

Eine modifizierte userchrome.css ist bereits vorhanden, nur welche Einträge wären in diesem Fall für mein Vorhaben nötig?

Ich hoffe da mal ganz frech auf Eure Unterstützung

Danke und bleibt gesund

Achim

edvoldi

Hallo K.Achim,

bitte testen:

CSS

/*   Letzter und kommender Monat in mehrwöchiger und Monatsansicht   */ 
    .calendar-month-day-box-other-month .calendar-month-day-box-date-label[relation="past"],
    .calendar-month-day-box-other-month .calendar-month-day-box-date-label[relation="future"],    
    .calendar-month-day-box-other-month[relation="past"],
    .calendar-month-day-box-other-month[relation="future"]    {
    background: #ffffff !important;
    }
    
/*   ---------------------------------------------------------   */
    
/*   Resttage in mehrwöchiger und Monatsansicht   */
    .calendar-month-day-box-date-label,
    .calendar-month-day-box-current-month {
    background: #eeeeee !important; 
    }
    
/*   ---------------------------------------------------------   */

Alles anzeigen

Farben muss Du noch anpassen.

Gruß

EDV-Oldie

MSFreak

Schaue mal ob du was davon gebrauchen kannst

CSS

/* Farbe Adressbuch Detailansicht */
#CardViewInnerBox {
background-color: #e8edf2;color: black !important; }


/* Farbe letzter und kommender Monat in mehrwöchiger und Monatsansicht */ 
.calendar-month-day-box-other-month .calendar-month-day-box-date-label[relation="past"],
.calendar-month-day-box-other-month .calendar-month-day-box-date-label[relation="future"],    
.calendar-month-day-box-other-month[relation="past"],
.calendar-month-day-box-other-month[relation="future"]    {
 background: #2A2A2E !important;}
 
  
/* Farbe Wochenende */
#day-view .calendar-header-container[weekend="true"],  
#day-view .calendar-event-column-linebox[weekend="true"] {
 background: #424242  !important;}
#week-view .calendar-header-container[weekend="true"],
#week-view .calendar-event-column-linebox[weekend="true"] { 
 background: #424242  !important;}
    
/* Farbe Wochenende in mehrwöchiger und Monatsansicht */
.calendar-month-day-box-day-off.calendar-month-day-box-current-month,
.calendar-month-day-box-date-label[weekend="true"] {
 background: #424242 !important;}
.calendar-month-day-box-other-month,
.calendar-month-day-box-date-label{
 background: #606064 !important;}
    
    
/* Kalendertag "Heute" deutlicher durch Rahmen und Farbe hervorheben */
.calendar-month-day-box-current-month[relation="today"],
.calendar-month-day-box-day-off[relation="today"],
.calendar-month-day-box-other-month[relation="today"] {
 border: 1px solid #9FA3D9!important;}
 
 
/* Aktueller Tag in mehrwöchiger und Monatsansicht */ 
.calendar-month-day-box-current-month[relation="today"],
.calendar-month-day-box-day-off[relation="today"],
.calendar-month-day-box-other-month[relation="today"],
.calendar-month-day-box-date-label[relation="today"] {
background: #606064 !important;}


/* Kalendertag "selektierter Tag" */
.calendar-month-day-box-current-month[selected="true"],
.calendar-month-day-box-day-off[selected="true"],
.calendar-month-day-box-other-month[selected="true"] {
 background-color: #6E6E6E !important;}
 
 
/* Rahmen um die Tagestermine löschen */
.calendar-month-day-box .calendar-month-day-box-item[allday="true"],
.calendar-color-box {
border-color: transparent !important;
box-shadow: none !important;}

Alles anzeigen

Bei der dunklen Theme sieht es bei mir so aus

K.Achim

Das ging ja schnell, herzlichen Dank

Habe auch schon eine Weile mit Euren Vorschlägen gebastelt und komme schon fast zu meinem Begehr, wenn ich es so mache:

CSS

/* Farbe letzter und kommender Monat in mehrwöchiger und Monatsansicht */ .calendar-month-day-box-other-month[relation="past"],.calendar-month-day-box-other-month[relation="future"]    { background: #bbbbbb !important;}

/* Farbe letzter und kommender Monat in mehrwöchiger und Monatsansicht Label*/ .calendar-month-day-box-other-month .calendar-month-day-box-date-label[relation="past"],.calendar-month-day-box-other-month .calendar-month-day-box-date-label[relation="future"]	{   background: #656565 !important;}

/* Farbe Wochenende in mehrwöchiger und Monatsansicht */
.calendar-month-day-box-day-off.calendar-month-day-box-other-month,.calendar-month-day-box-date-label[weekend="true"] { background: #9f9f9f!important;}

Die Farben sind allerdings noch nicht fix. Und was ich bisher nicht hinbekommen habe, die Label an den "other-month"- Wochenenden unabhängig von den restlichen "other-month"-Wochentagen einzufärben.

Werde noch ein wenig damit spielen müssen.

Habt mir schonmal sehr geholfen

Danke und Gruß

Achim

edvoldi

Zitat von K.Achim

Und was ich bisher nicht hinbekommen habe

Meinst Du so etwas?

CSS

/*   Wochenende in mehrwöchiger und Monatsansicht   */
    .calendar-month-day-box-day-off.calendar-month-day-box-current-month,
    .calendar-month-day-box-date-label[weekend="true"] {
    background: #f7ffe3 !important; 
    }
    
/*   ---------------------------------------------------------   */

Gruß

EDV-Oldie

K.Achim

Leider nein, das färbt die Wochenendtage, nicht den "Kopf"

Ich versuche es mal zu verdeutlichen. Im folgenden Bild hat Punkt (1) und (3) nach meinem Code die gleiche Farbe und ich kann diese nicht unabhängig voneinander einstellen. Eigentlich möchte ich jedoch alle Hintergründe an den Punkten (1) - (4) unabhängig behandeln können...

Mir ist aber gerade eben noch ein Problem aufgefallen. Der aktuelle Tag hat bei mir einen roten Rahmen, der markierte Tag bekommt einen gelben Hintergrund. Letzteres wird nicht bei den von mir an den gemäß Code eingegrauten Tagen angewendet. Gibt es da auch eine Lösung für?

Danke und Gruß

Achim

edvoldi

Meinst Du das so?

CSS

/*   Letzter und kommender Monat in mehrwöchiger und Monatsansicht   */ 
    .calendar-month-day-box-other-month .calendar-month-day-box-date-label[relation="past"],
    .calendar-month-day-box-other-month .calendar-month-day-box-date-label[relation="future"]    {
    background: yellow !important;
    }    
    .calendar-month-day-box-other-month[relation="past"],
    .calendar-month-day-box-other-month[relation="future"]    {
    background: red !important;
    }

Gruß

EDV-Oldie

K.Achim

Noch ein Problem festgestellt: In der Ansicht "mehrere Wochen" wirkt sich der Code nicht aus...

Edit: sehe grad Deine Antwort, prüfe ich

K.Achim

Zitat von edvoldi

Meinst Du das so?

Leider nein, auch so werden die Kopfdaten an Wochentagen und and Wochenenden gleich eingefärbt, in diesem Falle gelb...

Grüßle

edvoldi

So sieht das mit dem Code bei mir aus:

Gruß

EDV-Oldie

K.Achim

Hier noch eine besonders hübsche Demo

Gruß

Achim

edvoldi

Scheinbar unterscheidet der Kalender in der "Mehrere Wochen" Ansicht nicht zwischen alten und neuen Monat.

Der Code heißt überall

Code

.calendar-month-day-box-current-month

Gruß

EDV-Oldie

K.Achim

Kein Problem, im Wesentlichen funktionierts ja und ich kann damit leben. Hier jetzt nochmal mein aktueller Code, der auch alle Tage wieder gelb selektieren kann.

CSS

/* Farbe letzter und kommender Monat in Monatsansicht*/
.calendar-month-day-box-other-month[relation="past"],.calendar-month-day-box-other-month[relation="future"]    { background: #e1e1e1 !important;}

/* Farbe letzter und kommender Monat in Monatsansicht Label*/
.calendar-month-day-box-other-month .calendar-month-day-box-date-label[relation="past"],.calendar-month-day-box-other-month .calendar-month-day-box-date-label[relation="future"]    {   background: #c3c3c3 !important;}

/* Kalendertag "selektierter Tag" */
.calendar-month-day-box-current-month[selected="true"],.calendar-month-day-box-day-off[selected="true"],.calendar-month-day-box-other-month[selected="true"] { background-color: #fdfddb !important;}

Also Danke Euch nochmal

Gruß

Achim

bananovic

Jetzt möchte ich auch meinen Senf dazugeben. Ich habe in die userChrome.css Einträge aufgenommen, die die nicht mehr funktionierende Erweiterung CalendarTweaks ersetzten, und zwar mit den gleichen Farben.

CSS

/*******************************************************************/
/* KALENDER (Lightning) - Ersatz für CalendarTweaks ab TB 78 */
/*******************************************************************/

/* Header für den heutigen Tag in allen Kalenderansichten rosa */
#day-view calendar-day-label[relation="today1day"],
#week-view calendar-day-label[relation="today"],
#multiweek-view calendar-day-label[relation="today"],
#month-view calendar-day-label[relation="today"],
.calendar-month-day-box-date-label[relation="today"] {
    background-color: #FFC0C0 !important;
    border: none !important; 
}

/* Heutiger Tag im Minikalender rosa */
.minimonth-day[today="true"] {
   background-color: #FFF0F0 !important;
   border-color: #FFA0A0 !important;
}

/* Die einzelnen Zeilen im Tageskalender mit verschiedenen Gelbtönen 
für Tagesansicht und Nachtansicht */
#day-view .calendar-event-column-linebox[off-time="true"] {
   background-color: #F5F0DE !important;
}
#day-view .calendar-event-column-linebox:Not([off-time="true"]) {
   background-color: #FFFAE8 !important;
}

/* Die einzelnen Zeilen im heutigen Tag im Wochenkalender mit 
verschiedenen Gelbtönen für Tagesansicht und Nachtansicht */
#week-view .calendar-event-column-linebox[relation="today"][off-time="true"] {
   background-color: #F5F0DE !important;
}
#week-view .calendar-event-column-linebox[relation="today"]:Not([off-time="true"]) {
   background-color: #FFFAE8 !important;
}

/* Heutiger Tag, wenn nicht ausgewählt, im Monatskalender und Mehrwochenkalender rosa */
#multiweek-view calendar-month-day-box[relation="today"]:Not([selected="true"]),
#month-view calendar-month-day-box[relation="today"]:Not([selected="true"]) {
   background-color: #FFF0F0 !important; 
}

/* Die einzelnen Zeilen im heutigen Tag, wenn nicht ausgewählt, im Wochenkalender mit 
verschiedenen Rosatönen für Tagesansicht und Nachtansicht */
#week-view .calendar-event-column-header[relation="today"]:Not([selected="true"]),
#week-view .calendar-event-column-linebox[relation="today"]:Not([off-time="true"]):Not([selected="true"]) {
   background-color: #FFF0F0 !important; 
}
#week-view .calendar-event-column-linebox[relation="today"][off-time="true"]:Not([selected="true"]) {
   background-color: #F5E6E6 !important;
}

/* Ausgewählten Eintrag in allen Kalenderansichten mit einem Rahmen versehen */
calendar-event-box[selected="true"],
calendar-month-day-box-item[selected="true"] {
    border: 1px solid !important;
}

/*******************************************************************/

Alles anzeigen

Wessix

Zitat von bananovic

Jetzt möchte ich auch meinen Senf dazugeben. Ich habe in die userChrome.css Einträge aufgenommen, die die nicht mehr funktionierende Erweiterung CalendarTweaks ersetzten, und zwar mit den gleichen Farben.

CSS

/*******************************************************************/
/* KALENDER (Lightning) - Ersatz für CalendarTweaks ab TB 78 */
/*******************************************************************/

/* Header für den heutigen Tag in allen Kalenderansichten rosa */
#day-view calendar-day-label[relation="today1day"],
#week-view calendar-day-label[relation="today"],
#multiweek-view calendar-day-label[relation="today"],
#month-view calendar-day-label[relation="today"],
.calendar-month-day-box-date-label[relation="today"] {
    background-color: #FFC0C0 !important;
    border: none !important; 
}

/* Heutiger Tag im Minikalender rosa */
.minimonth-day[today="true"] {
   background-color: #FFF0F0 !important;
   border-color: #FFA0A0 !important;
}

/* Die einzelnen Zeilen im Tageskalender mit verschiedenen Gelbtönen 
für Tagesansicht und Nachtansicht */
#day-view .calendar-event-column-linebox[off-time="true"] {
   background-color: #F5F0DE !important;
}
#day-view .calendar-event-column-linebox:Not([off-time="true"]) {
   background-color: #FFFAE8 !important;
}

/* Die einzelnen Zeilen im heutigen Tag im Wochenkalender mit 
verschiedenen Gelbtönen für Tagesansicht und Nachtansicht */
#week-view .calendar-event-column-linebox[relation="today"][off-time="true"] {
   background-color: #F5F0DE !important;
}
#week-view .calendar-event-column-linebox[relation="today"]:Not([off-time="true"]) {
   background-color: #FFFAE8 !important;
}

/* Heutiger Tag, wenn nicht ausgewählt, im Monatskalender und Mehrwochenkalender rosa */
#multiweek-view calendar-month-day-box[relation="today"]:Not([selected="true"]),
#month-view calendar-month-day-box[relation="today"]:Not([selected="true"]) {
   background-color: #FFF0F0 !important; 
}

/* Die einzelnen Zeilen im heutigen Tag, wenn nicht ausgewählt, im Wochenkalender mit 
verschiedenen Rosatönen für Tagesansicht und Nachtansicht */
#week-view .calendar-event-column-header[relation="today"]:Not([selected="true"]),
#week-view .calendar-event-column-linebox[relation="today"]:Not([off-time="true"]):Not([selected="true"]) {
   background-color: #FFF0F0 !important; 
}
#week-view .calendar-event-column-linebox[relation="today"][off-time="true"]:Not([selected="true"]) {
   background-color: #F5E6E6 !important;
}

/* Ausgewählten Eintrag in allen Kalenderansichten mit einem Rahmen versehen */
calendar-event-box[selected="true"],
calendar-month-day-box-item[selected="true"] {
    border: 1px solid !important;
}

/*******************************************************************/

Alles anzeigen

Kanne es sein das einiges von dem oben aufgeführten nicht mehr funktioniert, probiere die einzelnen Anpassungen durch um die UserChrome.css besser zu verstehen aber einiges hat in Version 102 anscheinend keinen Effekt mehr. Kann das sein. Gibt es irgendwo eine Art Referenz über die editierbaren Elemente?

graba

Wessix

Kleiner Hinweis: Diese Webseite: Zitate verwenden

bananovic

Zitat von Wessix

Kanne es sein das einiges von dem oben aufgeführten nicht mehr funktioniert, probiere die einzelnen Anpassungen durch um die UserChrome.css besser zu verstehen aber einiges hat in Version 102 anscheinend keinen Effekt mehr. Kann das sein. Gibt es irgendwo eine Art Referenz über die editierbaren Elemente?

In TB102 hat sich einiges geändert. Um eine Optik wie in CalendarTweaks zu erzielen, muß der Code geändert werden. Er lautet jetzt wie folgt:

CSS

/*******************************************************************/
/* KALENDER (Lightning) - Ersatz für CalendarTweaks ab TB 78 */
/*******************************************************************/

/* Header für den heutigen Tag in allen Kalenderansichten rosa */
#day-view .day-column-today .day-column-heading,
#week-view .day-column-today .day-column-heading,
#multiweek-view calendar-day-label[relation="today"],
#month-view calendar-day-label[relation="today"],
.calendar-month-day-box-date-label[relation="today"] {
    background-color: #FFC0C0 !important;
    color: black !important;
    font-weight: normal !important;
}

/* Heutiger Tag im Minikalender rosa */
.minimonth-day[today="true"] {
   background-color: #FFF0F0 !important;
   border-color: #FFA0A0 !important;
}

/* Die Zeile unter heutiger Tag im Tageskalender weiß */
#day-view .allday-events-list {
   background-color: #FFFFFF !important;
}

/* Die einzelnen Zeilen im Tageskalender mit verschiedenen Gelbtönen 
für Tagesansicht und Nachtansicht */
#day-view .multiday-hour-box {
   background-color: #FFFAE8 !important;
}
#day-view .multiday-hour-box-off-time {
   background-color: #F5F0DE !important;
}

/* Die einzelnen Zeilen in der Timebar grau bzw. weiß einfärben */
#day-view .multiday-hour-box.multiday-timebar-time {
   background-color: #FFFFFF !important;
}
#day-view .multiday-hour-box.multiday-timebar-time.multiday-hour-box-off-time {
   background-color: #D9D9D9 !important;
}

/* Die einzelnen Zeilen im heutigen Tag im Wochenkalender mit 
verschiedenen Gelbtönen für Tagesansicht und Nachtansicht */
#week-view .day-column-today .multiday-hour-box {
   background-color: #FFFAE8 !important;
}
#week-view .day-column-today .multiday-hour-box-off-time {
   background-color: #F5F0DE !important;
}

/* Heutiger Tag, wenn nicht ausgewählt, im Monatskalender und Mehrwochenkalender rosa */
#multiweek-view calendar-month-day-box[relation="today"]:Not([selected="true"]),
#month-view calendar-month-day-box[relation="today"]:Not([selected="true"]) {
   background-color: #FFF0F0 !important; 
}

/* TB 102: Die einzelnen Zeilen im heutigen Tag, wenn nicht ausgewählt, im Wochenkalender mit 
verschiedenen Rosatönen für Tagesansicht und Nachtansicht */
#week-view .day-column-today:not(.day-column-selected) .allday-events-list,
#week-view .day-column-today:not(.day-column-selected) .multiday-hour-box {
   background-color: #FFF0F0 !important;
}
#week-view .day-column-today:not(.day-column-selected) .multiday-hour-box-off-time {
   background-color: #F5E6E6 !important;
}

/* Ausgewählten Eintrag in allen Kalenderansichten mit einem Rahmen versehen */
calendar-event-box[selected="true"],
calendar-month-day-box-item[selected="true"] {
    border: 1px solid !important;
}

/* Hintergrund des Wochennummer-Feldes ausschalten */
.calendar-month-day-box-week-label[relation="today"] {
  opacity: 1 !important;
}

/* Die Kategorie-Box wieder breiter machen, wie in TB 91.
Dann muß man das Reminder-Icon nach links verschieben */
.calendar-category-box {
width: 7px !important;
}
.reminder-icon,
.item-recurrence-icon {
padding-right: 7px !important;
}

Alles anzeigen

futterkohl

Kann mir jemand sagen, mit welchem Code ich den Rahmen um ganztägige Termine wegbekomme? Bisher hat bei mir

/* Rahmen um die Tagestermine löschen */

calendar-month-day-box calendar-month-day-box-item[allday="true"]

.calendar-color-box {

border-color: transparent !important;

box-shadow: none !important;

gegriffen, scheint nach dem Update von 78 auf 102 nicht mehr zu funzen...

edvoldi

Hallo futterkohl,

ich benutze schon ewig diesen Code dafür.

CSS

/*   Rahmen um die Tagestermine löschen   */

.calendar-month-day-box .calendar-month-day-box-item[allday="true"],
.calendar-color-box {
border-color: transparent !important;
box-shadow: none !important;
}

Gruß

EDV-Oldie

futterkohl

Zitat von edvoldi

Hallo futterkohl,
ich benutze schon ewig diesen Code dafür.

Glaube bei mir fehlte einfach nur mittendrin irgendwo ein Punkt egal habe Deinen kopiert, läuft, danke

wieder mal CSS anpassen - Kalenderfarben

Thunderbird 128.5.2 ESR veröffentlicht

Thunderbird 115.18.0 ESR veröffentlicht

Ähnliche Themen

Total verändertes Theme ; zeigt her Eure Themes

Form udn Farben der Ordner

Textfarbe von Mailtext anpassen (Ubuntu Dark Theme)

Nach Update auf 78: Symbolleisten und Anpassen-Menü im Nachrichten-Fenster verschwunden

Tab anpassen über CSS

68.6.0 - Schriftgröße beim Drucken anpassen [erl.]