OddBurton Posted February 22, 2022 Share Posted February 22, 2022 Site URL: https://www.bigmarinelakeassociation.org/events The Events Listing template currently displays / separates PAST Event listings under a barely noticeable grey line. It's confusing the hell out of my customer's site users. They want to display the past events. Is it possible to add text or a custom banner above the Past Event listings to help users identify these listings? I've found references for doing this using older templates, but the code does not apply to the new system template. Can anyone help me out here? Link to comment
Beyondspace Posted February 22, 2022 Share Posted February 22, 2022 39 minutes ago, OddBurton said: Site URL: https://www.bigmarinelakeassociation.org/events The Events Listing template currently displays / separates PAST Event listings under a barely noticeable grey line. It's confusing the hell out of my customer's site users. They want to display the past events. Is it possible to add text or a custom banner above the Past Event listings to help users identify these listings? I've found references for doing this using older templates, but the code does not apply to the new system template. Can anyone help me out here? Do you mean something like this? BeyondSpace - Squarespace Website Developer 🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox, video lightbox and much more) 🗓️ Delivery Date Picker (Squarespace Date picker form field) 💫 Gallery block 7.1 workaround 🥳 No-code customisations for Squarespace 🚀 Learn how to rank new pages on Google in 48 hours! If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you! Link to comment
tuanphan Posted February 27, 2022 Share Posted February 27, 2022 On 2/22/2022 at 11:56 AM, OddBurton said: Site URL: https://www.bigmarinelakeassociation.org/events The Events Listing template currently displays / separates PAST Event listings under a barely noticeable grey line. It's confusing the hell out of my customer's site users. They want to display the past events. Is it possible to add text or a custom banner above the Past Event listings to help users identify these listings? I've found references for doing this using older templates, but the code does not apply to the new system template. Can anyone help me out here? Add this to Design > Custom CSS. It will add text "past event" on top of past events on listing page .eventlist.eventlist--past:before { content: "Past Event"; display: block; font-size: 30px; text-align: center; margin-top: 50px; } Naoms, laurlaurfl234 and sarawhite 3 Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
scdesign Posted April 14, 2023 Share Posted April 14, 2023 I know this is an old topic, but is there a way to style the text using my H3 style? Link to comment
tuanphan Posted April 16, 2023 Share Posted April 16, 2023 On 4/15/2023 at 12:32 AM, scdesign said: I know this is an old topic, but is there a way to style the text using my H3 style? Yes. If you share link to a page where you use heading 3, we can check h3 style & add to code easier Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
mrawatanderson Posted February 28 Share Posted February 28 @tuanphan stumbled across this and the code is very helpful. I'm wondering if it's possible to add a colored background to the "Past Events" text that would further differentiate the current events from the past events. Link to comment
tuanphan Posted March 2 Share Posted March 2 On 2/29/2024 at 12:57 AM, mrawatanderson said: @tuanphan stumbled across this and the code is very helpful. I'm wondering if it's possible to add a colored background to the "Past Events" text that would further differentiate the current events from the past events. You can adjust the code .eventlist.eventlist--past:before { content: "Past Event"; display: block; font-size: 30px; text-align: center; margin-top: 50px; background-color: #f1f; padding: 10px 20px; color: #fff; } Naoms 1 Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
nataliaamelia Posted Monday at 07:52 AM Share Posted Monday at 07:52 AM Hi, I have added the code and it shows the title past event very close to the first event what would be the addition to the code for some padding under the title? and should I remove completely the previous code, or just paste a new one? Many thanks! Link to comment
tuanphan Posted Tuesday at 08:59 AM Share Posted Tuesday at 08:59 AM On 9/30/2024 at 2:52 PM, nataliaamelia said: Hi, I have added the code and it shows the title past event very close to the first event what would be the addition to the code for some padding under the title? and should I remove completely the previous code, or just paste a new one? Many thanks! Can you share link to page? Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
nataliaamelia Posted Tuesday at 11:37 AM Share Posted Tuesday at 11:37 AM @tuanphan here you go https://www.nataliaameliasaied.com/events Link to comment
tuanphan Posted Thursday at 11:43 AM Share Posted Thursday at 11:43 AM On 10/1/2024 at 6:37 PM, nataliaamelia said: @tuanphan here you go https://www.nataliaameliasaied.com/events You can add margin-bottom to the code .eventlist.eventlist--past:before { content: "Past Events"; display: block; font-size: 30px; text-align: center; margin-top: 50px; margin-bottom: 100px; } nataliaamelia 1 Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) 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