Button layout

[playmakerne]

Hi, I got excellent help for creating a button in the events template in this thread: https://theeventscalendar.com/support/forums/topic/add-a-button-to-the-event-template/
Thank you very much for that.

However the thread was closed down, before we got to make the layout on the button (for details, please read the thread).

Can someone help me with this?

Kind Regards,
Christine

[Geoff B.]

Good evening Christine and welcome back!

Thank you for reaching out to us.
I would love to help you with this topic.

Could you point me towards a URL on your website where the button currently is so that I can tweak the styling with you ?

Best regards,

Geoff B.

 

[playmakerne]

That sounds good.

If the button looks something like the turqoise button in the upper right corner of this site, it’s good: http://ny.playmakerne.dk/tilbud/

Christine

[Geoff B.]

Good evening Christine,

Thank you for showing me the button you would like to use an example for your styling.

However, I am actually looking for an example of the unstyled link on your site (TILMELD).
Somehow I can’t seem to find it ?

Have a great day!

Geoff B.

[playmakerne]

Oh sorry, I misunderstood you.

The unstyled link is only present at the top of this event at the moment: http://ny.playmakerne.dk/event/aalborg-bibliotekerne/

Christine

[Geoff B.]

Good evening Christine,

Thank you for the URL.

To style the button is a 2 step process:

1. You will need to add a CSS class to it
2. You will need to add the following CSS rule

1. Change your snippet to

/* Tribe, insert event website ask enrol link before event content */
function tribe_enrol_link ( ){

$website = tribe_get_event_website_url( );

// bail if no website
if ( empty( $website ) ) return false;

echo ‘TILMELD‘;
}

2. Here’s the CSS code to add

.tilmeldbutton {
margin: 0 2% 20px;
height: 38px;
background-color: #5cc4b7;
border-color: #5cc4b7;
color: #140667;
font-family: 'Open Sans', Arial, Helvetica, 'Nimbus Sans L', sans-serif;
font-size: 14px;
line-height: 36px;
font-weight: bold;
font-style: normal;
text-transform: uppercase;
padding: 0 28px;
text-align: center;
border-width: 2px;
border-style: solid;
-webkit-border-radius: 20px;
border-radius: 20px;
}

Let me know how that goes.

Best regards,
Geoff B.

[playmakerne]

Thank you for your reply,

I changed the snippet, but it made the link disappear, so I reinserted the old snippet, and the link came back.

I added the CSS to the style.css sheet (Is that where I was supposed to add it?) It didn’t work – neither with the old snippet nor the new one.

Thank you for your patience!
Christine

[Geoff B.]

Good afternoon Christine,

My bad, somehow the code update for the snippet did not render properly in my previous reply.
This is why my solution did not work.

Please find the correct updated snippet here: https://gist.github.com/GeoffEW/30fb1f8909fd6c0320edf5321caaf3eb

And yes, adding these rules to your theme’s style.css file will work.

Let me know how that goes.

Best regards,
Geoff B.

[playmakerne]

It works perfectly now. Both the link and the layout.

Thank you very much for your patience and your help.

Best Regards
Christine

[Geoff B.]

Good afternoon Christine,

I am so glad this worked out for you!

You are welcome back on our support forums any time 🙂

For now, I am going to close this thread.

Have a great week!

Geoff B.

[Author]

Posts