How to add a time zone to events in Squarespace + Event List Date Styles [Video]

Cheap and easy Video Content Marketing

How to add a time zone to events in Squarespace + Event List Date Styles

Brand new to CSS? Awesome! 😍 I want to teach you the basics – check out my free training here 👉

This tutorial is for any version of Squarespace, 7 or 7.1!

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 is more than one way to do this! This is just one approach of many because code is super customizable.

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

+ 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:

→ 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}

▸▸▸ Ready for more?
The codes in this tutorial are just the beginning of all the cool things you can do with Custom CSS! When you’re ready to dive in and start customizing, you can use codes from my CSS Cheat Sheet. It has over 30 pages of code snippets and pro tips to help you get started. Download your copy at

▸▸▸ Ready to be an expert?
Copy & pasting CSS is a great way to get started, but if you really want to level up your skills and write your own code, then you’re ready for the Custom Code Academy. I created this course to teach you everything I know about CSS for Squarespace. Enrollment is open right now, and access lasts a lifetime. Join the academy today at

#squarespace #squarespacecss #howto #customizesquarespace #css #squarespacetricks #squarespacehacks

The term “Squarespace” is a trademark of Squarespace, Inc. I am not affiliated with Squarespace, Inc. I just really love their platform.

Watch/Read More


Add Reviews from TripAdvisor to Squarespace site in only 2 minutes - coding, no sweat. Free and easy. Advantages: • Demonstrate any number of reviews• Use filters to reveal selected reviews• Call-to-action button to leave a new review on Facebook How to embed Reviews from TripAdvisor to Squarespace website? To add the reviews on your website, you will need to follow these 3 easy steps1) Generate and adjust the widget; 2) Copy a unique code from in the notification window; 3) Display this code on your site. Find more information about adding Squarespace Reviews from TripAdvisor here -