How to customize event date tags in Squarespace

This tutorial is for both versions of Squarespace, 7.1 and older versions built with 7. For more information, visit https://insidethesquare.co/themes

This tutorial will teach you how to change the style of the date on your event list in Squarespace.

Make sure you have the event date visible on your site before you use these codes.

If you don’t see any event date, hop into edit mode on the event list page, select “manage events” and where it says date style, select “side tag”

Once you have that enabled, you can use the codes below! We’ll be changing the background color, font color, font style, and even changing the shape of the date.

---

Here are the codes from this tutorial:

You can combine multiple properties into one line, separating them with a semicolon.

Change colors:

.eventlist-datetag{background:pink; color:#50bdb8;}

Add a shadow:

.eventlist-datetag{box-shadow: 5px 5px 10px 10px rgb(0,0,0,0.2)}

Round Dates (works best with single day events):

.eventlist-datetag{border-radius:50%}

Leaf-shaped dates:

.eventlist-datetag{border-radius: 15px 0}

Move date to top left:

.eventlist-datetag{left:10px!important}

Move date to center:

 .eventlist-datetag{position:Relative; margin:auto; top:0}