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

Since Squarespace automatically adds a button for past events, I now have two 'view event' buttons. Does anyone have a suggestion for how to fix this?

On 3/15/2023 at 9:09 AM, aliciainspired said:

Since Squarespace automatically adds a button for past events, I now have two 'view event' buttons. Does anyone have a suggestion for how to fix this?

You could try this in your Custom CSS:

.eventlist .eventlist-button, // all sqs event buttons, including any future buttons
.eventlist--past .eventlist-button // just the past buttons
{
	display: none !important;
}

If that doesn't work, share the URL of the page in question so we can see what you're working with.

Thank you, that didn't seem to work though.

https://www.naturefirst.info/events

48 minutes ago, aliciainspired said:

Thank you, that didn't seem to work though.

https://www.naturefirst.info/events

Sorry, you'll need to add the !important declaration to overcome the specificity of pre-existing styles. I added it to the post above.

1 hour ago, kirkroberts said:

Sorry, you'll need to add the !important declaration to overcome the specificity of pre-existing styles. I added it to the post above.

Thank you, I added the code but unfortunately the two buttons are still there?

17 minutes ago, aliciainspired said:

Thank you, I added the code but unfortunately the two buttons are still there?

Where did you add the CSS? I don't see it in the page source. Try adding it to the Custom CSS area of your site.

16 hours ago, kirkroberts said:

Where did you add the CSS? I don't see it in the page source. Try adding it to the Custom CSS area of your site.

I added the CSS to the Custom CSS area but maybe I have done something wrong?

@aliciainspired I'm glad you included some of your Custom CSS. There needs to be a space between .eventlist and .eventlist-button, and also between .eventlist--past and .eventlist-button . Otherwise they are joined and each pair of classes would need to be present on the same tag for the style to work. The space means the .eventlist-button tag is inside the .eventlist or .eventlist--past tag.

6 minutes ago, kirkroberts said:

@aliciainspired I'm glad you included some of your Custom CSS. There needs to be a space between .eventlist and .eventlist-button, and also between .eventlist--past and .eventlist-button . Otherwise they are joined and each pair of classes would need to be present on the same tag for the style to work. The space means the .eventlist-button tag is inside the .eventlist or .eventlist--past tag.

Ok cool I added he spaces but unfortunately the extra buttons haven't disappeared.

@aliciainspired You have that declaration in a media query with max-width 700px:

17 minutes ago, kirkroberts said:

@aliciainspired You have that declaration in a media query with max-width 700px:

My coding knowledge isn't very much, what should I change?

@aliciainspired The CSS that you added to Custom CSS for the buttons is inside the braces for the @media query. In your screenshot there is a curly brace at line 37. If you move the button CSS below that curly brace that will probably do it. Think of it as the declarations are "nested" inside of each other. You want to un-nest the button CSS so it is not inside the @media curly braces.

Oh you legend thank you so much!