Jump to content

CHANGE CALENDAR DAY BACKGROUND AFTER HOVER

Go to solution Solved by Jia,

Recommended Posts

Hieveryone, im looking for help on this code, i would to change the color of event days, as you can see on this page https://www.med-training.org/blsd the days have the white number, i want to keep the numbers on white but the text when you hover on event i want to be on another color, cause as you can see its difficult to read. thats the code that im using for my calendar.

.yui3-squarespacecalendar 
.compact-layout .yui3-calendar-day.has-event, 
.yui3-squarespacecalendar  { color: #323e8b; border-radius:6px !important; }
//today calendar color//
.yui3-squarespacecalendar .today{ border-radius:6px ;color: #ff3333 !important; }

//event date colors//
.yui3-squarespacecalendar .compact-layout .yui3-calendar-day.has-event{ background: #323e8b !important; 
}

///change all date text color//
td.has-event * {
    color: white !important; 
}

 

Link to comment
  • Solution
3 hours ago, HOPEITALY said:

Hieveryone, im looking for help on this code, i would to change the color of event days, as you can see on this page https://www.med-training.org/blsd the days have the white number, i want to keep the numbers on white but the text when you hover on event i want to be on another color, cause as you can see its difficult to read. thats the code that im using for my calendar.

.yui3-squarespacecalendar 
.compact-layout .yui3-calendar-day.has-event, 
.yui3-squarespacecalendar  { color: #323e8b; border-radius:6px !important; }
//today calendar color//
.yui3-squarespacecalendar .today{ border-radius:6px ;color: #ff3333 !important; }

//event date colors//
.yui3-squarespacecalendar .compact-layout .yui3-calendar-day.has-event{ background: #323e8b !important; 
}

///change all date text color//
td.has-event * {
    color: white !important; 
}

 

Hi, add this code to custom css:

.flyoutitem-datetime.flyoutitem-datetime--12hr {
  color:black !important;
}

.flyoutitem-excerpt p {
  color:black !important;
}

.yui3-squarespaceccalendar .flyoutitem-link-arrow:before {
  color:black;
}

Please give this a 👍 if it helps. Make sure to quote me or tag me in your reply, otherwise I won't be notified.

Link to comment
On 4/9/2024 at 10:24 AM, HOPEITALY said:

Really thanks, it works, the arrow on the link still white but no problem, thanks a lot. 

Ahh sorry, there was a typo (calendar) in the code, use this one instead:

.yui3-squarespacecalendar .flyoutitem-link-arrow:before {
  color:black;
}

Please give this a 👍 if it helps. Make sure to quote me or tag me in your reply, otherwise I won't be notified.

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.