Adding Custom CSS

I want to change the color of the blue dot on the Calendar. I was thinking I could add this code to the custom.css file with the new color number but it’s not working.

.calendar_table_date.today span {
background: #387c2b;
}

HI @Sue are you able to link to this page? Feel free to post a screenshot of the URL if you don’t want it to end up indexed in a search engine.

Ok here it is. I’ve temporarily removed it from the secure zone so you can view it here.
Screen Shot 2021-06-09 at 1.07.06 PM

@Sue It’s because of the CSS cascade. You have two selectors that have the same specificity, but the event-calendar.min.css comes after your custom.css.

You can solve this by giving your rule more specificity. I was able to get it to work with

div.calendar_table_date.today span {
background: #387c2b;

}

Or you can always take the nuclear option by adding !important.

What you have will work. The problem is the order of how things are loading. Your “custom.css” style sheet is loading before the “event-calendar.css” You can try adding “!important” to your style or just edit the /cms-assets/css/event-calendar.min.css. You will have to do this via FTP. Just know that an update could reset it.

Thanks! That worked.