tribe-events-button cannot style

[Greg]

I am seriously struggling with the button styling to use the class tribe-events-button in other places on my site.

If I try to use <div id=”tribe-events”><div class=”tribe-events-button”> etc it doesn’t inherit the styling either. What am I missing?

How can I use the styling in order places outside of the forms provided with the plugin?

[Geoff]

Hi Greg,

Sorry for the trouble with styling!

Are you trying to use the styling on pages outside of the calendar? If so, it’s worth noting that the plugin’s stylesheet does not get loaded on those pages.

If you are using the styles on calendar pages, it’s possible that theme styles are overriding them. If you send me a link where I can see one of the buttons that isn’t styling, then I’d be happy to check it out and see what I can do.

Thanks!
Geoff

[Greg]

This reply is private.

[Geoff]

This reply is private.

[Greg]

This reply is private.

[Geoff]

Hi Greg,

That page is unfortunately not considered part of the calendar, which is why the calendar stylesheet isn’t loading and allowing you to use the calendar button class.

You can add a button style to your theme’s stylesheet and use it if you’d like, but the calendar one itself cannot be used. So, for example:

.my-button-class {
background-color: #21759b;
background-image: none;
border: 0;
-webkit-border-radius: 3px;
border-radius: 3px;
-webkit-box-shadow: none;
box-shadow: none;
color: #fff;
cursor: pointer;
display: inline-block;
font-size: 11px;
font-weight: 700;
letter-spacing: 1px;
line-height: normal;
padding: 6px 9px;
text-align: center;
text-decoration: none;
text-transform: uppercase;
vertical-align: middle;
zoom: 1;
}

…then call it on your link:

<a class="my-button-class" href="#">My Button!</a>

Cheers!
Geoff

[Greg]

Great thanks Geoff. That works perfectly.

Greg

[Geoff]

Right on! Thanks for following up and letting me know–I’m glad that helps. 🙂

Geoff

[Author]

Posts