kellijayne Posted February 27, 2022 Share Posted February 27, 2022 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 Link to comment
tuanphan Posted February 27, 2022 Share Posted February 27, 2022 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; } bycrawford, kellijayne and meganheath 3 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
paul2009 Posted February 27, 2022 Share Posted February 27, 2022 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 ⬇️ sayreambrosio and kellijayne 2 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
kellijayne Posted February 27, 2022 Author Share Posted February 27, 2022 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
kirkroberts Posted May 18, 2022 Share Posted May 18, 2022 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 tuanphan 1 Link to comment
aliciainspired Posted March 15 Share Posted March 15 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? Link to comment
kirkroberts Posted March 15 Share Posted March 15 (edited) 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. Edited March 21 by kirkroberts tuanphan 1 Link to comment
aliciainspired Posted March 21 Share Posted March 21 Thank you, that didn't seem to work though. https://www.naturefirst.info/events Link to comment
kirkroberts Posted March 21 Share Posted March 21 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. Link to comment
aliciainspired Posted March 21 Share Posted March 21 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? Link to comment
kirkroberts Posted March 21 Share Posted March 21 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 Posted March 22 Share Posted March 22 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? Link to comment
kirkroberts Posted March 22 Share Posted March 22 (edited) @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 March 22 by kirkroberts Link to comment
aliciainspired Posted March 22 Share Posted March 22 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
kirkroberts Posted March 22 Share Posted March 22 @aliciainspired You have that declaration in a media query with max-width 700px: Link to comment
aliciainspired Posted March 22 Share Posted March 22 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? Link to comment
kirkroberts Posted March 22 Share Posted March 22 @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
aliciainspired Posted March 22 Share Posted March 22 Oh you legend thank you so much! kirkroberts 1 Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment