squareuser Posted November 23, 2020 Share Posted November 23, 2020 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
tuanphan Posted December 4, 2020 Share Posted December 4, 2020 Can you share link to page where you use calendar block? We can help easier Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
RyanCaldarone Posted December 19, 2020 Share Posted December 19, 2020 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 ingetspoke 1 Link to comment
derricksrandomviews Posted December 19, 2020 Share Posted December 19, 2020 (edited) 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 December 21, 2020 by derricksrandomviews ingetspoke 1 Link to comment
DanPrime Posted December 20, 2020 Share Posted December 20, 2020 (edited) 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 December 21, 2020 by DanPrime RyanCaldarone and ingetspoke 2 Link to comment
RyanCaldarone Posted December 21, 2020 Share Posted December 21, 2020 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 🙂 derricksrandomviews 1 Link to comment
nabwilson Posted August 27, 2021 Share Posted August 27, 2021 Dan, I looked at your website crewehc.co.uk, and see you resolved this when viewing on mobile. I am having the exact same problem, can you tell me how you did it? Ie forcing the Thumbnail image to display on Mobile or sub 600px calendars? Thanks Ben Link to comment
tuanphan Posted August 30, 2021 Share Posted August 30, 2021 On 8/27/2021 at 7:35 PM, nabwilson said: Dan, I looked at your website crewehc.co.uk, and see you resolved this when viewing on mobile. I am having the exact same problem, can you tell me how you did it? Ie forcing the Thumbnail image to display on Mobile or sub 600px calendars? Thanks Ben Can you share link to event on your site? We can take a look Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
DanPrime Posted September 7, 2021 Share Posted September 7, 2021 (edited) On 8/27/2021 at 1:35 PM, nabwilson said: Dan, I looked at your website crewehc.co.uk, and see you resolved this when viewing on mobile. I am having the exact same problem, can you tell me how you did it? Ie forcing the Thumbnail image to display on Mobile or sub 600px calendars? Thanks Ben Sure thing, I cheated a bit in the end as I was only looking for a solid colour fill rather than an actual image. I used the below CSS. When there is an event scheduled on the linked calendar the box will show as green, and when there is no event scheduled it will show as red (But obviously you can change the hex code to suit). Just add it to Design> Custom CSS __ //Cal Block Museum Open Green// .yui3-squarespacecalendar .compact-layout .yui3-calendar-day.has-event{ background: #06c258 !important; } // Cal Block Museum Closed Red // .yui3-squarespacecalendar .compact-layout .yui3-calendar-day{ background: #CD001A !important; } __ Edited September 7, 2021 by DanPrime Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment