Add Advanced Map Block to Events Page

Site URL: https://www.firstblessing.org/2022-events

My client is currently using an events page on a Squarespace 7.0 site. It is the Bedford template so it doesn't allow me to add any other blocks because it doesn't have any of the usual insertion points. They would like to utilize the Advanced Map Block plugin to show a map of the different locations for their events on the events page. Is this something that can be accomplished with CSS code or Javascript?

I think you can add a standard page, use summary block to pull events from event page, then you can add Advanced Map Block!

Thanks @tuanphan! It would be preferable for the map block to be on the same page as the events because we wanted a quick "at-a-glance" type thing for people to see events in their area. Plus, that's also where people are registering for each event. I was hoping there was some way to code it into the existing event page. I will try it with a new page and see what my client thinks.

Would you be able to help me with code to adjust font color/size of the event title/date/time in the summary block? https://www.firstblessing.org/new-page-1

On 6/4/2022 at 4:05 AM, SarahO said:

Thanks @tuanphan! It would be preferable for the map block to be on the same page as the events because we wanted a quick "at-a-glance" type thing for people to see events in their area. Plus, that's also where people are registering for each event. I was hoping there was some way to code it into the existing event page. I will try it with a new page and see what my client thinks.

Would you be able to help me with code to adjust font color/size of the event title/date/time in the summary block? https://www.firstblessing.org/new-page-1

Add to Page Header

<style>
  /* title */
  a.summary-title-link {
    font-size: 30px;
    color: Red !important;
}
  /* Date */
  time.summary-metadata-item.summary-metadata-item--date {
    color: green !important;
    font-size: 30px !important;
}
  /* time */
  span.event-time-12hr {
    font-size: 40px;
    color: violet;
}
</style>