How To Add a Time Zone To Events 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 show you how to add a time zone after the time listed for events in your Squarespace website. I also wanted to share some clever code you can use to style the date displayed on the event list thumbnail.

A few important things to note before you copy and paste this into your own site:

→ The time zone will be displayed on the events list AND the individual events page - anywhere time is listed for that event will have the text added to the end of it.

→ There are a TON of creative things you can do with border codes. To learn more about borders, visit insidethesquare.co/borders

→ I am using color names in this tutorial, but color codes like RGB, HEX, and HSL will work too. To learn more about color options, visit: insidethesquare.co/colors

An August 2023, Squarespace changed the way you add code to a 7.1 site. The codes below still work! To add your CSS to Squarespace, navigate to Pages, then select Website Tools, and then Custom CSS.

Ready to rock? Here are the codes from this tutorial.

Add time zone to events listing:

.event-time-12hr:after{
content:" PST"
}

Customize the event date: must be set as a “side tag” in 7.1

.eventlist-datetag{
border-radius:50%;
box-shadow: 5px 5px 15px rgba(0,0,0,0.2);
background-color:purple;
color: yellow
}