Jump to content

Changing the word 'Source' on events listing page

Recommended Posts

Hello, total SquareSpace noob here - so please bear with me!

I've created a list of events using the SquareSpace events listing. When entering the details there's a Source box which I've used to enter the URL to an external website where people can buy tickets.

When published, this URL can be seen prefixed with the word 'Source' - I'd like to change it so that say 'Buy Tickets' instead of 'Source'.

Is this doable with some CSS?

TIA

Link to comment

It can be done by both CSS or Javascript. 

  • Using CSS, you can make the element invisible which says source, and inject a pseudo element in place with word 'buy tickets'
  • with javascript, you can target the element and replace its word directly.

if there is no way to update the text from editor, then these options can be used. If you provide the link to your site, I can help you write the code.

Edited by Vicks
Link to comment
  • 1 year later...

This solution didn't work for me @Vicks. Could you look at this page and let me know how I can do it?

https://www.ontheboards.org/events/24-25/javaad-alipoor

I'd like to change the "Source: " to "Tickets" and hide the href portion. Also it would be amazing if it could show up as a standard primary button, like the "Tickets" button I placed there. I'd like it to have the same formating and animation as other buttons on the website.

<div class="sqs-block-button-container sqs-block-button-container--left preFade fadeIn" data-animation-role="button" data-alignment="left" data-button-size="medium" data-button-type="primary" id="yui_3_17_2_1_1718425389793_306" style="transition-timing-function: ease; transition-duration: 1.5s; transition-delay: 0.458182s;">
  <a href="" class="sqs-block-button-element--medium sqs-button-element--primary sqs-block-button-element" data-initialized="true">
    Tickets
  </a>
</div>

Edited by VladaKremenovic
Link to comment
On 6/15/2024 at 11:28 AM, VladaKremenovic said:

This solution didn't work for me @Vicks. Could you look at this page and let me know how I can do it?

https://www.ontheboards.org/events/24-25/javaad-alipoor

I'd like to change the "Source: " to "Tickets" and hide the href portion. Also it would be amazing if it could show up as a standard primary button, like the "Tickets" button I placed there. I'd like it to have the same formating and animation as other buttons on the website.

<div class="sqs-block-button-container sqs-block-button-container--left preFade fadeIn" data-animation-role="button" data-alignment="left" data-button-size="medium" data-button-type="primary" id="yui_3_17_2_1_1718425389793_306" style="transition-timing-function: ease; transition-duration: 1.5s; transition-delay: 0.458182s;">
  <a href="" class="sqs-block-button-element--medium sqs-button-element--primary sqs-block-button-element" data-initialized="true">
    Tickets
  </a>
</div>

You can use this code to Custom CSS box

/* Source */
.eventitem-sourceurl {
    font-size: 0;
}
.eventitem-sourceurl a:before {
    content: "Tickets";
    font-size: 16px;
    border: 2px solid #000;
    padding: 10px 15px;
}

image.png.eb6255325538afa37d20d94913944a01.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.