Hi everyone! So good news. I've figured out how to target both the individual event page AND the individual listing on the main events page to add multiple time zones for 7.1
So, as stated above, adding a single time zone to all events looks like this:
.event-time-localized:after {
content: "EST";
padding-left: 4px;
font-size: 12px;
text-transform: uppercase;
}
and you can add font and color stylings as you see fit.
But lets say you need SEVERAL time zones for your events.
To target an individual events page and change the time zone from EST to say, CST, you need to target the Item ID. Adding the "Find Squarespace IDs" plugin to your browser makes this easy. The code looks like this:
#item-62cede731029326783a956d3 (your ID number will be different) {
.event-time-localized:after {
content: "CST";
padding-left: 4px;
font-size: 12px;
text-transform: uppercase;
}
}
However, there is a third step. Even though the individual events page will show CST, it will NOT show as CST on the main events listing page. And targeting that event to make this change is not as intuitive.
Go to your main events listing page. Use the ID Finder to find the Section Id for the event listing. you're then going to target the individual event with :nth of type(#). This is based on the order your events are in on the page (so the top event would be 1, the one after 2, etc). The only caveat with using this method is that this nth of type will obviously change every time you make a new event, but its the only workaround i've found so far. Your code will look like this:
section[data-section-id="6234a612748f0177abe21b21"] (your section ID will be different) {
:nth-of-type(3) (your number will be different depending on where the event is on the page) {
.event-time-localized:after {
content: "CST" !important;
}
}
}
And there you have it. It is not acceptable that Squarespace has not added simple time-zone changes to their events, especially when so many companies have gone completely virtual since the pandemic. Hopefully, this helps everyone here.