Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 1

Adjust calendar block color?


squareuser

Question

Hello, 

I am helping an arts nonprofit org with their website. Their main audiences are Deaf, DeafBlind and Hard of Hearing community. The calendar is not deafblind-friendly right now. Is there a way for us to adjust the calendar to be more contrasted? 

Right now, it is white background with subtle gray squares.  That is not helpful. 

Is there a html code for calendar for us to adjust square colors to more darker? 

Link to comment

5 answers to this question

Recommended Posts

  • 0

I'm also interested in this topic. Client's site right now has the calendar block over a dark background image. The desktop version looks fine because of the larger resolution and the full bleed EVENT THUMBNAIL images that fill in the dates where events exist. 

But it's difficult to read and identify on mobile. Hopefully SquareSpace adds functionality to adjust opacity on the calendar for 7.1 soon. 

 

Ryan

Link to comment
  • 0
Place in Custom css the colors can be changed using hex codes which are found here:
https://www.color-hex.com/


yui3-squarespacecalendar .yui3-calendar-pane {
 padding: 12px; background: #f5f5f5 !important; }

.yui3-squarespacecalendar .today{
 color: #ff3333 !important; }

.yui3-squarespacecalendar .compact-layout 
.yui3-calendar-day.has-event{ background: #e7d073 !important; }

.yui3-squarespacecalendar 
.compact-layout .yui3-calendar-day.has-event, 
.yui3-squarespacecalendar  { color: #222 !important; }     

 

This code has worked also, depending on the template:

/background color//
.yui3-squarespacecalendar .yui3-calendar-pane { padding-top: 10px;  padding-bottom: 10px; background: white !important;
  filter: opacity(80%);
  border: 0px solid #ffffff;
}

//today calendar color//
.yui3-squarespacecalendar .today{ color: #ff3333 !important; }


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

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

Edited by derricksrandomviews
Link to comment
  • 0

Do we know if there is a way to force the Thumbnail image to display on Mobile or sub 600px calendars? I use a Green, Red or Yellow thumbnail to distinguish my events but these only hsow when the cal is over 600px in size.

 

website: crewehc.co.uk the calendar is at the bottom of the home page. 

Edited by DanPrime
Link to comment
  • 0
On 12/19/2020 at 12:30 PM, derricksrandomviews said:This code has worked also, depending on the template:


 

/background color//
.yui3-squarespacecalendar .yui3-calendar-pane { padding-top: 10px;  padding-bottom: 10px; background: white !important;
  filter: opacity(80%);
  border: 0px solid #ffffff;
}

//today calendar color//
.yui3-squarespacecalendar .today{ color: #ff3333 !important; }


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

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

This did it! Thanks a billion 🙂

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...