7.1 Event Page - VIEW EVENT button missing! I've scoured this forum for an answer!

Site URL: https://starlightstageshows.squarespace.com

The only thing I found searching endlessly on google and this forum was to enable "show expert" and place a button there...  but when I do that the entire event page shows on the Event list page! I just cant believe the 7.1 would get rid of such a crucial element!  I was hoping for a CSS solution or code inject... please tell me it's possible 😳
https://starlightstageshows.squarespace.com
PW: StarlightStage

Add to Design > Custom CSS

.eventlist-title .eventlist-title-link:after {
    content: "View Event";
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    background-color: #7fabff;
    color: white;
    font-size: 18px;
    padding-left: 10px;
    padding-right: 10px;
}

10 hours ago, kellijayne said:

7.1 Event Page - VIEW EVENT button missing! I just can't believe the 7.1 would get rid of such a crucial element! 

Hi @kellijayne

Yes, this is one of those strange omissions from Squarespace 7.1. For some reason, Squarespace haven't added this option yet.

There are a number of 'workarounds':

• You can add a link manually in the excerpt and style it with CSS (see my previous post. This is necessary when the button will link to an external page. It's a pain because you'll need to add it to each event excerpt manually.
• You can use a CSS pseudo class (like the one posted above). This isn't what I'd call a 'safe' or professional quality solution because the "button" positioning isn't predictable and may move around depending on the browser's width. You'll also need to style it separately.
• You can use a JavaScript solution. This will add the buttons and automatically style them to match the other buttons on the site. However, before offering a JS solution, I want to check if the site is on a Business Plan (or above) because as I'm sure you know, Personal Plans don't support JS.

Example:

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

10 hours ago, tuanphan said:

Add to Design > Custom CSS

.eventlist-title .eventlist-title-link:after {
    content: "View Event";
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    background-color: #7fabff;
    color: white;
    font-size: 18px;
    padding-left: 10px;
    padding-right: 10px;
}

 

THANK YOU SO MUCH tuanphan!!! Works perfectly!

Here is a JavaScript solution for anyone who wants/needs it. As Paul mentioned, you must be on at least the Business plan to use this.

https://kirkroberts.com/blog/automatically-add-view-event-buttons-to-a-squarespace-7-1-events-page-20220518