Calendar blocks can display blog posts, products, images, and events that are scheduled or have already happened. There are not many options for customizing the look of this Calendar in Squarespace, but with the codes in this video, you’ll be able to update a calendar block with colors, borders, and more!
– – –
Brand new to CSS for Squarespace? Check out my free training → https://insidethesquare.co/learn
– – –
This tutorial was recorded using Fluid Engine in Squaespce version 7.1 but the codes will work for older versions of Squarespace, no modifications required!
In this free Squarespace tutorial, you’ll learn how to:
Give the calendar a border
Change the month and year text style
Fill in today’s date with a custom color
Create round event days
Change the color of event days
Here are the codes from this tutorial. Be sure to change the borders, fonts, and custom colors to match your site style!
Give the calendar a border:
.yui3-squarespacecalendar-content {border:1px solid red}
Change the month and year text style:
.yui3-calendar-header-label{color:purple; text-transform:uppercase; letter-spacing: .5rem}
Fill in today’s date with a custom color:
.yui3-calendar-day.today {background:#e5f5f6!important}
Remove the border from today’s date:
.yui3-calendar-day.today {border: none!important}
Create round event days:
.yui3-squarespacecalendar .has-event{
Border-radius: 50%!important
}
Change the color of event days:
.yui3-squarespacecalendar .has-event{
background:#e5f5f6!important
}
– – –
Why do all of these codes say !important? We are using custom css to overwrite the original file, and sometimes a browser will ignore our code, so we have to label it !important.
Want to combine these codes? Use a semi-colon to separate your properties! Learn more at https://insidethesquare.co/resources/css-symbols
– – –
🔗 Related Links 🔗
Creating border codes: https://insidethesquare.co/borders
Coding in color: https://insidethesquare.co/colors
Squarespace Fluid Engine: https://insidethesquare.co/fluid
– – –
🤩 Download over 100+ pages of custom codes and pro tips for customizing Squarespace in one awesome PDF. Order the Squarespace CSS Cheat Sheet, available now at 👉 https://insidethesquare.co/css
– – –
💸 GET 10% OFF YOUR FIRST YEAR OF SQUARESPACE 💸
Use my affiliate link and code PARTNER10 – You’ll save 10% off your first annual subscription & Squarespace will give me a little commission for sending you their way 😎
🔗 PARTNER10 → https://insidethesquare.co/partner10
– – –
🙋 Need some help? Visit https://insidethesquare.co/code-help to see my current support options.
– – –
🥰 SUPPORT MY CHANNEL → https://paypal.me/insidethesquare
💻 WEBSITE → https://insidethesquare.co
📧 NEWSLETTER → https://insidethesquare.co/email
🤳 INSTAGRAM → https://www.instagram.com/thinkinsidethesquare
👍 FACEBOOK → https://business.facebook.com/insidethesquare
📌 PINTEREST → https://www.pinterest.com/insidethesquare
—
