MEC Update Today Changed Button Styling

[beta_c10inc]

I did an update today for the MEC Calendar, and the button styling defined by my X theme options are being over-written and I can’t find where to change them.

Here is one of our event pages:

https://c10inc.com/events/atlanta-2018-braves-gant-pendelton/

The buttons are supposed to be #45c4e4 with a hover of #212120

and instead they are green…

Also,

On this page:

https://c10inc.com/upcoming-events/

We are using the carousel view for the calendar and after the update, the owl dots styling is off…

If anyone can help, it would be greatly appreciated!!

[friech]

Hi There,

Thank you for writing in, yes I see that the buttons color is being written but with MEC styling too. What version of MEC do you have now? Please check here and see if that version corresponds with the latest supported version (2.7.2).

Also, try clearing any caching feature (plugin, server-side, CDN, and browser’s cache) your site might have.

If the issue persists, please provide us login credentials in a secure note so we can take a closer look.

Cheers!

[beta_c10inc]

Thanks for your help!

Ya it is not a supported version. The version of MEC that I am using is 2.8.0.

I sent a secure note above.

Please take a look when you can!

I appreciate your support!!

[rad]

Hi there,

May I know which buttons are affected? I can’t compare it to previous one. Plus, the buttons has no connection with X button (x-btn class), does it have customization? Maybe we can re-add it with different class name.

As for the dot in the event page, please add this CSS to your global custom CSS

.mec-owl-theme .owl-dots .owl-dot {
    -webkit-appearance: button-bevel !important;
    -moz-appearance: !important;
}

Thanks!

[beta_c10inc]

Thanks for your help with those owl dots! It was bothering me!

For the buttons, I’m not sure where it is being over-written but it is over the themes button styling.

I wrote out those buttons in the html section of the MEC Events page and before I ran the update they were following the style I set in the x theme theme options.

I really appreciate you looking into it!

Thank you!

[Prasant]

Hello @beta_c10inc,

Thanks for asking.

Actually styling of the button in MEC is not coming from X Theme rather it’s inheriting MEC’s CSS as it’s handed coded into the MEC CSS files. Here is a screenshot. https://cloudup.com/cZt7PRUUNf3

Now, if you would like to change the styling, please add following CSS under X > Theme Options > CSS:

.mec-wrap button:not(.owl-dot) {
    background-color: #45c4e4;
}

.mec-wrap button:hover{background-color: #212120;}

If you would like to learn CSS, I am sharing few resources that you take a look to get started with CSS and an interesting tool that you can use to speed up the development process.

I recommend you to watch following video that will help you to get started with CSS.

https://www.youtube.com/watch?v=MFR4WXiLzpc

Sometimes it can get a bit difficult to find out the right selector to be able to write the required CSS codes. A handy tool that can help you in this is Google Chrome dev tools. I am sharing the resource that you can refer to get started with dev tools.

https://developers.google.com/web/tools/chrome-devtools/css/

https://developers.google.com/web/tools/chrome-devtools/

https://www.youtube.com/watch?v=tP_kXBJWPhQ&t=200s

Thanks.