Jump to content

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

Recommended Posts

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

Event-Button.jpg

Link to comment

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;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
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:

DvfMsMMIYi.thumb.gif.23923e56fa474e48c6325fe0708432ce.gif

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

About: Squarespace Circle Leader since 2017. I value honesty, transparency, diversity and great design ♥.
Work: Squarespace Developer and founder of SF Digital, building the features Squarespace didn't include™. 
Content: Links in my posts may refer to SF Digital products or may be affiliate links.

Catch up on all the release notes and announcements 2023 [for Circle members only]. There's a public version here too!
If I helped, you can thank me by clicking one of the emojis below. If you prefer, you can buy me a coffee.
Improve your online store with our extensions.

Link to comment
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!

Link to comment
  • 2 months later...
  • 9 months later...
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?

Screenshot 2023-03-15 at 14.08.56.png

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.

Edited by kirkroberts
Link to comment
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.

Link to comment

@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.

Edited by kirkroberts
Link to comment
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.

Link to comment

@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.

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.