Styling Calendar Pro buttons and the Tickets Pro form

[Inbok]

Hi,

So far I have the following setup for all the buttons on Calendar Pro:

.post-content #tribe-bar-form .tribe-bar-submit input[type="submit"], .post-content #tribe-events .tribe-events-button, .single-tribe_events .sidebar .tribe-events-single-section .tribe-events-single-section-title {
background: #006e90;
color:#fff;
} 

What do I need to add to make the button background change color on mouseover?

Also, I’ve been trying to style the Tickets Pro form on the single events pages since it looks strange:

http://msad.staging.wpengine.com/class/3d-porfolio/2016-09-21/

What do I need to do to make the + / – quantity buttons look normal (i.e. fit on one line, smaller in size)?

Thanks!

[Geoff B.]

Good afternoon Inbok and welcome to the Events Calendar Support forum!

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

All you need to do is to add “:hover” after your CSS rules. E.g.:

.post-content #tribe-bar-form .tribe-bar-submit input[type="submit"]:hover, .post-content #tribe-events .tribe-events-button:hover, .single-tribe_events .sidebar .tribe-events-single-section .tribe-events-single-section-title:hover {
background: #000;
color:#fff;
}

What do I need to do to make the + / – quantity buttons look normal (i.e. fit on one line, smaller in size)?

You can try the following CSS rule.

#tribe-events .tribe-events-tickets .woocommerce {
width: 20%;
}

Let me know how that goes.

Best regards,
Geoff B.

[Inbok]

Hi Geoff!

Perfect – those worked nicely. Thanks!

[Geoff B.]

Good afternoon Inbok,

I’m super stoked to hear that.

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