Textlink into a button - event excerpt

Site URL: https://www.tpgsportsevents.com/events

Hi,

I'm trying to add a view event button to my events summary block. I have set up a textlink in the event excerpt, how can I change this to  a button?

Thanks very much!
NJB

If button same link as title, you can add this code into Design > Custom CSS

.eventlist-title .eventlist-title-link:after {
    content: "Read More";
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    top: -50%;
    background-color: black;
    max-height: 50px;
    display: flex;
    align-items: center;
    padding: 10px 20px;
    border-radius: 10px;
    color: white;
    font-size: 16px;
}

If different, please enable text link in excerpt, then we can give code to turn text link to button easier

Hi, thanks for getting back to me.

I have created a text link in the excerpt, what is the code for the button?

Thanks

@tuanphan

On 2/17/2022 at 2:18 AM, NJBFIlms said:

Hi, thanks for getting back to me.

 

I have created a text link in the excerpt, what is the code for the button?

 

Thanks

@tuanphan

Which event did you add? I don't see it here

On 2/20/2022 at 10:59 PM, tuanphan said:

Which event did you add? I don't see it here

Tuanphan - love to follow up on this, I tried pasting in the code but it resulted in the button floating over my excerpt text. 

https://www.salastina.org/concerts

Thank you!

On 9/8/2022 at 1:20 PM, MSalas said:

Tuanphan - love to follow up on this, I tried pasting in the code but it resulted in the button floating over my excerpt text. 

https://www.salastina.org/concerts

 

Thank you!

Try this new code

.eventlist-title .eventlist-title-link:after {
    content: "Read More";
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    background-color: black;
    max-height: 50px;
    display: flex;
    align-items: center;
    padding: 10px 20px;
    border-radius: 10px;
    color: white;
    font-size: 16px;
}

Hi @tuanphan 🙂

I could not see how to turn the excerpt into a link to the event (for now its just the title and graphic which is causing some confusion). Do you know if this is possible?

I also tried using the code above to make a button for "event info" but it fails if the except is too long and also in mobile view.
 

Here is a link to our site: https://www.dromtaberna.com/

Thank you again,
Paula
 

On 10/5/2022 at 1:41 AM, singthegreys said:

Hi @tuanphan 🙂

I could not see how to turn the excerpt into a link to the event (for now its just the title and graphic which is causing some confusion). Do you know if this is possible?

I also tried using the code above to make a button for "event info" but it fails if the except is too long and also in mobile view.
 

Here is a link to our site: https://www.dromtaberna.com/

Thank you again,
Paula
 

Yes. If excerpt too long, it will caused problem. You can reduce excerpt length

or add link manually on excerpt.

How can I add the link manually?

On 10/11/2022 at 11:29 PM, singthegreys said:

How can I add the link manually?

I guess you can edit Event Excerpt >> Do this?

On 9/8/2022 at 2:20 AM, MSalas said:

Tuanphan - love to follow up on this, I tried pasting in the code but it resulted in the button floating over my excerpt text. 

https://www.salastina.org/concerts

 

Thank you!

@MSalas Hi, I noticed that you ended up changing the button to say 'tickets and event info' instead of adding a separate tickets button. How did you do this? 

Thanks! 

(or if anyone else knows how I might achieve this please let me know!) 

On 8/16/2024 at 11:06 PM, User1776 said:

@MSalas Hi, I noticed that you ended up changing the button to say 'tickets and event info' instead of adding a separate tickets button. How did you do this? 

Thanks! 

(or if anyone else knows how I might achieve this please let me know!) 

To rename button text, use this code to Website Tools > Code Injection > Footer

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $(".eventlist-button").html(function() { 
          return $(this).html().replace("View Event", "tickets and event info");  
    });
});
</script>