MEC button colour on single event

[muriel]

Hi! How do I change the button background colour on an MEC single event? The button that says ‘Next’—it’s currently a bright green. e.g. here: https://www.capetownswing.co.za/events/cts-diversity-inclusivity-07-20/

[marc_a]

Hi @muriel,

To change the button background color on a MEC single event page, you need to add a little CSS code, please go to X > Theme Options then CSS and add the code below.

.mec-wrap .mec-events-meta-group button:not(.owl-dot):not(.gm-control-active) {
background-color: #ff0000;
}

You can change the hex code “#ff0000” to your desire hex color, you can find here the corresponding hex code for your desire color.

"Please note that providing custom code is outside the scope of our theme support. Issues that will arise from the use of custom codes should be forwarded to a 3rd party developer."

Thank you.

[muriel]

That’s perfect, thank you! And how would I specifically target the "back"and “next” buttons?

[marc_a]

Hello @muriel,

The css code I gave to you can be used to target the “Next” button then to target the “Back button” you could use this line of code.

.mec-single-event .mec-events-meta-group-booking button.mec-book-form-back-button {
background-color: #ff0000 !important;
} 

Thank you.

[muriel]

Awesome thank you

[marc_a]

@muriel,

You’re welcome.

[christian]

Hey @muriel,

If you need more MEC customizations, please consider signing up to our One service here https://theme.co/one. That’s where we provide custom development guidance.

Thanks.