Support

Home Forums Event Espresso Premium Calendar colours

Calendar colours

Posted: June 26, 2020 at 8:48 am

Viewing 5 reply threads


SteveMBragg

June 26, 2020 at 8:48 am

How do I change the calendar colours?

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

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

Thanks

Steve B


Tony

  • Support Staff

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;
}


SteveMBragg

June 30, 2020 at 1:11 pm

Hi

The code you have given does not change the headers colour. What it does it change the background of the top navigation butons.

Which I would actually prefer anyway to have black background and white text and maybe the month button to be yellow text.

What I want to do is have the row with the days of the week with a different colour background and white text. You code does not do this.

Can you help please. So I need two pieces:-

Code for the row with days of the week.
Code for the navigation buttons.

Thanks

Steve


Tony

  • Support Staff

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;
}


SteveMBragg

June 30, 2020 at 1:29 pm

Thanks

You are using colour names instead of hex. As I am using special colours in places how do insert hex colours as I have tried replacing “yellow” with #ffffff as a test and it does not work.

Thanks

Steve


Tony

  • Support Staff

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.

Viewing 5 reply threads

The support post ‘Calendar colours’ is closed to new replies.

Have a question about this support post? Create a new support post in our support forums and include a link to this existing support post so we can help you.

Event Espresso