Modern Events Calendar Customization

[quituck]

Hi,
So I’m using the Modern Events Calendar and need some assistance customizing it.

1. I would like to change invert the colors meaning I would like to change the background color to black.
2. I would like to make the Event Heading white.
3. Also I would like to change the color of the Month and day of the week to white.
4. I would like to change the button bg color to red, make the the border white and the text white. I would like the button hover colors changed to a white bg, and text and border red.
5. I would also like to change the button text for “certain” events to Buy Tickets.
6. I would like to change the border of the social icons to red and the bg color to white.

Please see the image attached for changes…

Thank you

[friech]

Hi Quituck,

Thank you for writing in, first please navigate to M.E. Calendar > Settings > Styling Options then choose a Color Skin

Then for the remaining styling that was not covered by the Color Skin, I recommend you to watch following video that will help you to get started with CSS.

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.

Get Started With Viewing And Changing CSS  |  Tools for Web Developers

Chrome DevTools  |  Tools for Web Developers  |  Google...

Let us know how it goes,
Cheers!

[quituck]

I understand CSS pretty well .

I couldn’t figure out how to make the necessary changes I need and the settings don’t allow me to make those custom changes.

I’ve tried things like .mec-booking-btn; .mec-event-date…etc you get the idea

Please advise

Thank you.

[christian]

Hey @quituck,

The developer tools tutorials @friech recommended should get you started finding the selectors you need. I’d just like to make clear that customization is outside the scope of our support. Please see our Terms. We want to help you get started so we’ll show you how to achieve what you need by providing some more samples and/or tutorials but note that we are not responsible for coding all of your styling needs. I hope you’ll understand.

Please give us the URL of your events page and we’ll show you how to get those selectors.

Thanks.

[quituck]

I appreciate your assistance.

Thanks.

[Alaa]

Hi @quituck

These are the CSS codes needed:

.mec-wrap, .mec-wrap a {
    background-color: black;
    color: #fff!important;
}

.mec-event-list-modern .mec-event-date .event-f {
    color: #fff;
}
.mec-event-list-modern .mec-event-date .event-da {
    color: #fff;
}
.mec-event-list-modern .mec-event-sharing>li i {
    border: 1px solid #f00;
    background-color: #fff;
}
.mec-event-list-modern .mec-btn-wrapper .mec-booking-button {
    border: 1px solid #ffffff;
    color: #fff;
    background-color: #f00;
}
.mec-month-divider span {
    color: #ffffff;
} 

If they aren’t working for some reason then there must be something wrong in the (X > Theme Options > CSS) section, most probably a broken code added there or something, if that’s the case, then please provide us with WordPress Dashboard login details in a “Secure Note” so we can investigate this issue.

Thanks.

[quituck]

Thanks Alaa, Just two more things.

1. I need the class to change the blue highlight under the month the red.

2. Also I can’t figure out how to change the text from view details to buy tickets? I don’t want to change every button to buy tickets just a few. How can I do this?

Please see the image attached for reference.

Thanks again.

[nico]

Hi @quituck,

1. I could see that the CSS is generated by the MEC CSS. As shown the image below,

You could change the CSS directly in the MEC or add this code your custom CSS:

.mec-month-divider span:before{
    border:none;
}

2. I have not tested this code your however you could use this code below to change your button text.

Please add following JS code under Pro > Launch > Theme Options > Js to change the button text:

jQuery(document).ready(function($) {$('.mec-booking-button').each(function() {$(this).text('Buy Tickets');});});

You can replace Buy Tickets from above code as per requirement.

Let us know how it goes.

Thanks.

[quituck]

Hi Nico,
Thanks for your assistance.

The css code did not help me to change the border accent to red it removed it. I tired next to border color: red; and no change.

Also the js code change the button text however it changed all the buttons. How can I apply that code to only change the text on certain event because not all of them will require a ticket purchase.

Lastly I ran into a few more css problems. Please take a look at the image attached.

1. I need to change the text below the headers to black so that it legible.

2. I would also like to change the event slider on the home page button hover color to red.

Please advise.

Thanks!

[nico]

Hi @quituck,

To change the border color or the line below your header. Replace the code above with this:

.mec-month-divider span:before{
    border-bottom: 4px solid #ff0000;
} 

In regards to the script, to change specific button. You need to change this part below

'.mec-booking-button'

Change it to the specific class that you want to change.

For example:

jQuery(document).ready(function($) {$('.mec-event-list-modern .mec-btn-wrapper .mec-booking-button').each(function() {$(this).text('Buy Tickets');});});

And for your other site, it is on under construction mode.

Would you mind sharing us access so we could suggest the best code to you request.

Don’t forget to set it in a secure note.

Thanks.

[quituck]

Thanks for the advice. How can I apply the JS code to a single event? It seems to change the text on all of the buttons listed under the shortcode. I want to be able to change the button text individually. Do I need to add a page id to the code or something for it to work?

Also the site is no longer under construction. Please take a look so I can:

1. Change the text below the headers to black so that it is legible.

2. Change the event slider on the home page button hover color to red.

Please reference the last image I attached.

Thanks

[rad]

Hi @quituck,

For that another site, please add this CSS as well,

.mec-single-event:not(.mec-single-modern) .mec-local-time-details ul, 
.mec-single-event .mec-event-meta .mec-events-event-categories a, .mec-single-event .mec-event-meta dd {
    color: #000;
} 
.mec-slider-t4-content.mec-event-grid-modern .mec-booking-button:hover {
    background: red;
}

Thanks!

[quituck]

Thanks for the css help.

However you avoided my question regarding the JS code.

" How can I apply the JS code to a single event? It seems to change the text on all of the buttons listed under the shortcode. I want to be able to change the button text individually. Do I need to add a page id to the code or something for it to work?"

jQuery(document).ready(function($) {$(’.mec-event-list-modern .mec-btn-wrapper .mec-booking-button’).each(function() {$(this).text(‘Buy Tickets’);});});

jQuery(document).ready(function($) {$(’.mec-booking-button’).each(function() {$(this).text(‘Buy Tickets’);});});

Please advise.

Thanks!

[nico]

Hi @quituck,

As I checked your setup again, I could not get any unique class or id of your button so you could adjust the buttons individually.

In this case, the customization might take some time to achieve and it would be best that you will need to contact a custom developer.

Thank you so much for understanding.