Jump to content

How to turn Event page "source link" URL into button

Go to solution Solved by tuanphan,

Recommended Posts

Source URL turns the title into an external link, is it that title that you want to turn into a button? (style it as a button?) CAn you share your website URL?

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment
  • 2 weeks later...

Try this Custom CSS:

a.eventitem-sourceurllink {
  padding: 6px 12px;
  background: #f2c14e;
  border-radius:6px;
}

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment

Thanks for the response, Ziggy! I added your CSS to the site so you can see the result. Is there a way to target the text that reads "Source" with a display:none to hide it and to change the display text for the hyperlink to "Learn More" or "Click Here" or something similar? 

Link to comment
On 8/10/2023 at 6:44 AM, j__ said:

Thanks for the response, Ziggy! I added your CSS to the site so you can see the result. Is there a way to target the text that reads "Source" with a display:none to hide it and to change the display text for the hyperlink to "Learn More" or "Click Here" or something similar? 

You can use this CSS code

/* learn more text */
.eventitem-sourceurl {
    visibility: hidden;
}

.eventitem-sourceurl a {
    visibility: visible;
    margin-left: -50px;
}

.eventitem-sourceurl:before {
    content: "Learn more ";
    visibility: visible;
}

 

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
  • 3 weeks later...
  • Solution
On 8/26/2023 at 9:14 PM, j__ said:

This is great @tuanphan! I've added that CSS so you can see the result. Is there anyway to make the URL display as the "Learn More" or "Purchase Tickets" rather than having that text display before the full (complex) link? 

Change to this code

.eventitem-sourceurl {
    visibility: hidden;
}

.eventitem-sourceurl a {
    visibility: visible;
    margin-left: -50px;
    margin-top: -30px;
    opacity: 0;
    display: block;
}

.eventitem-sourceurl:before {
    content: "Purchase tickets:";
    visibility: visible;
    padding: 6px 12px;
    background: #f2c14e;
    border-radius: 6px;
}

 

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
  • 4 months later...

Hi @tuanphan - I'm looking to do something similar on my site's individual event pages. I used your code and made a couple of adjustments, but I'd like it to look like the button I boxed in red in the attached screenshot. I'd also like the text to be white and add some space between the last line of text in the event description and the button. Can you please provide updated code to help fix this? Here's the code I have currently:

 

.eventitem-sourceurl {
    visibility: hidden;
}

.eventitem-sourceurl a {
    visibility: visible;
    margin-left: -50px;
    margin-top: -15px;
    opacity: 0;
    display: block;
}

.eventitem-sourceurl:before {
    content: "Purchase tickets:";
    visibility: visible;
    padding: 10px 20px;
    background: #119861;
    border-radius: 0px;
}

 

Thank you!

Events Page 1.png

Link to comment
On 1/7/2024 at 4:44 AM, socialstylate said:

Hi @tuanphan - I'm looking to do something similar on my site's individual event pages. I used your code and made a couple of adjustments, but I'd like it to look like the button I boxed in red in the attached screenshot. I'd also like the text to be white and add some space between the last line of text in the event description and the button. Can you please provide updated code to help fix this? Here's the code I have currently:

 

.eventitem-sourceurl {
    visibility: hidden;
}

.eventitem-sourceurl a {
    visibility: visible;
    margin-left: -50px;
    margin-top: -15px;
    opacity: 0;
    display: block;
}

.eventitem-sourceurl:before {
    content: "Purchase tickets:";
    visibility: visible;
    padding: 10px 20px;
    background: #119861;
    border-radius: 0px;
}

 

Thank you!

Events Page 1.png

Can you share link to this event? We can check 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
On 1/10/2024 at 10:11 AM, socialstylate said:

@tuanphan The event from the screenshot has passed, so I selected an event coming up. Here's the link: https://www.barreverie.com/events-2-1/bourbon-dinner

Thank you!

I see you figured it out?

image.png.77c87240461e55cedc616dbf7c68e2ee.png

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

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.