@Jk1 said:

I needed this to set the header color

yes, I thought you were talking about text color, not background…

@Jk1 said:

Now I just need to figure out how to set all the text to black.

check the module doc and css for the ‘opposing color’ I think he calls it…

I needed this to set the header color

background-color: var(--calendarColor);

Now I just need to figure out how to set all the text to black.

Thanks for your help! Very much appreciated.

So, if you target a big blob, and another targets THAT big blob, the second one wins.

If you look at the css file provided by the module (same folder) you will see how it targets different elements

BUT what I want is the timed event, “Grandpa sam…” to also have a colored background like “Juneteenth” ( but of course a different color since it’s not a holiday).

.CX3 .event .headline {
  color: green;
}

image

I removed all of the other .CX3 entries and left this.

.normal,
.dimmed,
header,
body {
  color: #fff;
}

.CX3 .headline {
  color: var(--calendarColor);
}

and this is what it shows.

So you set it, then changed it

It works on my Ext3

I appreciate the help.

custom.css

.normal,
.dimmed,
header,
body {
  color: #fff;
}


.CX3 .headline {
  color: var(--calendarColor);
}

/* set text color to match color for the calendar list */
.CX3 .event:not(.fullday) .headline .title {
  color: var(--calendarColor);
}


/* Remove the colored dot marker completely in CalendarExt3 */
.CX3 .event.singleday .headline:not(.useSymbol)::before, 
.CX3 .event.singleday .headline.useSymbol .symbol.noSymbol::before { 
  display: none !important; 
}

/* Optional: Clean up spacing if the headline text looks cut off */
.CX3 .event .headline {
  padding-left: 0px !important;
  margin-left: 0px !important;
}

.CX3 .headline {
  color: var(--calendarColor);
}

from here
https://github.com/MMRIZE/MMM-CalendarExt3#styling-with-css