Events page - separating past events and buttons

Hi!

I would like to display upcoming and past events on my site's event page. When I turn on "show past events" the default is separating past events from upcoming with a thin white line. I don't think it is noticeable enough and could be confusing to visitors. Is there a way I can add a "Past Events" heading above or below the white line? (Like I have done for "Upcoming Events" in the attached screenshots.)

There is also a "View Event" button appearing only for past events. Is there a way to either remove this button from past events or make it appear on all events so that it is consistent?

Here is a link to the page I am referencing: https://www.hartfordpresscoop.com/events

Thanks!

I was able to use the code that @tuanphan provided in this thread to add a "Past Events" heading!  

This isn't a full solution but a start.

Add the following to Design > Custom CSS.

.eventlist--upcoming + .eventlist--past .eventlist-past-upcoming-divider {

  height : 1.25em;
  
  }

.eventlist--upcoming + .eventlist--past .eventlist-past-upcoming-divider::before {

  content : 'Past Events';
  display : block;
  font-family : new-spirit;
  margin-top : 0.25em;
  
  }

Let us know how it goes.

On 6/1/2023 at 5:37 PM, knar said:

Is there a way I can add a "Past Events" heading above or below the white line?

You could try something like this:

.eventlist.eventlist--past hr::before {
  content: "Past Events";
  font-size: 56px;
  font-family: new-spirit;
  font-weight: 500;
}
.eventlist-past-upcoming-divider {
  padding-bottom: 90px;
  padding-top: 17px;
}

On 6/1/2023 at 5:37 PM, knar said:

There is also a "View Event" button appearing only for past events. Is there a way to either remove this button from past events

.eventlist-button.sqs-editable-button.sqs-button-element--primary {
  display: none;
}

Did this help? Please give feedback by clicking an icon below  ⬇️

Hi! Stupid questions maybe, but can I use the "Page Header Code Injection" under Advanced to make the changes to the event page (such as the above)? If I have to use Design > Custom CSS, where do I paste the code you suggested? Just anywhere in the "code box"? Many thanks! 

1 hour ago, JMJM said:

can I use the "Page Header Code Injection" under Advanced to make the changes to the event page (such as the above)? If I have to use Design > Custom CSS, where do I paste the code you suggested?

You can paste this directly into the Custom CSS panel. Squarespace are making changes to the navigation but it is currently in Design > Custom CSS. If the panel isn't empty, go to the very end, press enter to add a new line and then paste it.