Support

June 29, 2020 at 3:50 am

Hi Steve,

Currently the day headers in the monthly view are white background grey text. I want to change that.

You’ll need to add your own CSS to change the styling to whatever you prefer, for example:

#espresso_calendar:not(.ui-widget).calendar_fullsize .fc-button {
    background: red;
    color: white;
}

Will change the headers to be red with white text.

Then:

#espresso_calendar:not(.ui-widget) .fc-state-active, 
#espresso_calendar:not(.ui-widget) .fc-state-hover, 
#espresso_calendar:not(.ui-widget) .fc-state-hover .fc-text-arrow {
    color: yellow !important;
}

Will change the colour of the ‘active’ tab and any hover to use yellow text.

You’ll obviously need to change those to suit and then add the above to Appearance -> Customize -> Additional CSS on your site.

Also how do I change the blue background on the “Upcoming” “button”

We don’t have an ‘Upcoming’ button but I’m guessing you mean the status banner, here: https://monosnap.com/file/PDHDFMOVWdMbrlFgoekapnZnQrHFrQ

if so you can use something like this:

.ee-status.event-active-status-DTU {
    background: red;
}

June 30, 2020 at 1:24 pm

My apologies, I misunderstand what you were looking for.

To change the day headers, use something like:

.fc-day-header {
    background: red;
    color: white;
}

The code for the navigation buttons I’ve already provided, you just need to change the colours to suit:

#espresso_calendar:not(.ui-widget).calendar_fullsize .fc-button {
    background: black;
    color: white;
}
#espresso_calendar:not(.ui-widget) .fc-state-active, 
#espresso_calendar:not(.ui-widget) .fc-state-hover, 
#espresso_calendar:not(.ui-widget) .fc-state-hover .fc-text-arrow {
    color: yellow !important;
}

June 30, 2020 at 4:36 pm

Yeah I’m just using colour names to just give simple examples but changing for hex is pretty much the same:

#espresso_calendar:not(.ui-widget) .fc-state-active, 
#espresso_calendar:not(.ui-widget) .fc-state-hover, 
#espresso_calendar:not(.ui-widget) .fc-state-hover .fc-text-arrow {
    color: #fff !important;
}

Works fine for me:

https://monosnap.com/file/VLvWeGuJ3kii6Ce8lSTOLx6t8tjegN

Note #fff is the same as #ffffff.

The !important is important here as you need to override the default styles, which also use !important, so you want your styles loading after those AND using !important to override them.