Calendar color customization

Hello Everyone !

I am reaching out because I am a bit stuck on some little coding tweak. I already went through the forum but the answers I found do not really work. Here is my issue:

I have the pro version of Squarespace which allow me coding. I have a website (Brine template) with an english/french version and on both version I created a event calendar page. In order to have my logo color to pop-out and keep up with my branding / visual identity, I added a green background to that calendar page.

Desktop / Tablet version:
It's looking good as a small image is displayed on the day I m running a class/event.

Mobile version:
There is no image displayed, fair enough, however with that green color, I cannot really see the days there is an event. 

My idea is to: When there  is an event schedule I want to change the color of the square from that weird light green color to a gold color, numbers would be in white.
So on the mobile version, an event would be displayed like that : The entire square would be gold & the date displayed in white. What code shall I insert ? Shall I insert it in the advance option custom css of my page?

Here are some pictures of the calendar on the desktop & mobile. 
Here is the link to my website www.qualitycupofcoffee.com 
PS: Don't mind, I have been working on it on the last few days, the videos banners seems to be loading slower than usual. I still need to have a look at it. 

Many thanks !
Manon

@tuanphan Oh my ... ! Thanks a lot, it works perfectly ! I can't believe I spent hours trying to figure out/find the code.

Have a great Sunday, you rock  👊

PS: Also agree, the gold color for desktop color is not an option. I prefer the focus to be on the drawing/images ! I am gonna monitor the website performance to see if those dark colours still works on visitors /  clicking behaviours.

Manon

how do you keep thumbnail image in events for mobile calendar?

On 11/3/2019 at 10:52 AM, tuanphan said:

Add to Home > Design > Custom CSS

/* Mobile */
@media screen and (max-width:640px) {
td.has-event {
    background: gold !important;
}
td.has-event * {
    color: white !important;
}
}

On 10/15/2020 at 7:40 AM, Gfmgrp said:

how do you keep thumbnail image in events for mobile calendar?

 

On 12/21/2020 at 6:14 AM, DanPrime said:

 

I'd also like to know this.

@tunaphan can you help? 🙂

Can you share url? We can help easier

On 12/22/2020 at 2:27 AM, tuanphan said:

Can you share url? We can help easier

Hi Tunaphan, thank you.

The site is www.crewehc.co.uk, at the bottom of the home page is a calendar block which is all in red at the moment. If I drag the block any smaller the Thumbnails disappear and just have a grey square and don't show at all on mobile devices.

Is there a way to force the thumbnails to stay using CSS? 🙂 

12 hours ago, DanPrime said:

Hi Tunaphan, thank you.

The site is www.crewehc.co.uk, at the bottom of the home page is a calendar block which is all in red at the moment. If I drag the block any smaller the Thumbnails disappear and just have a grey square and don't show at all on mobile devices.

Is there a way to force the thumbnails to stay using CSS? 🙂 

Hi. You want to change red to another color?

4 hours ago, tuanphan said:

Hi. You want to change red to another color?

 

Hi, no so when the calendar is reduced in size (e.g. on the mobile site) it looses the thumbnail images. I’m looking for a way that I can force the thumbnail images to show whatever the size of the calendar block. 

@tunaphan do you know how I can do this? 🙂 

18 hours ago, DanPrime said:

@tunaphan do you know how I can do this? 🙂 

Thumbnail, you mean red color?

Add to Design > Custom CSS

.yui3-squarespacecalendar .compact-layout .background {
    display: block !important;
}

On 1/10/2021 at 11:52 AM, tuanphan said:

Thumbnail, you mean red color?

Add to Design > Custom CSS

.yui3-squarespacecalendar .compact-layout .background {
    display: block !important;
}

 

Ah that didn’t do it, I’m just looking to make the event image appear behind the date the same as it would on the desktop site. 

I've manages to get to the bottom of it, thanks for your help. 

On 3/26/2021 at 7:29 PM, DanPrime said:

I've manages to get to the bottom of it, thanks for your help. 

How did you adjust the colors? I'm trying to white blocks on my mobile only - (I have a black background now and on mobile you can't see what days have events). 

https://goldensquirrelpub.com/calendar

7 minutes ago, JCDandP said:

How did you adjust the colors? I'm trying to white blocks on my mobile only - (I have a black background now and on mobile you can't see what days have events). 

https://goldensquirrelpub.com/calendar

I was able to fix mine with this code:

/* Mobile */
@media screen and (max-width:640px) {
td.has-event {
    background: gold !important;
}
td.has-event * {
    color: black !important;
}
}