MEC customization

[jeremybury]

I am using the MEC plugin included in my Pro theme . I would like to display a single page with a list of all the events but without link to each event page. So, I would need to:

• cancel the button “voir” at the end of the event line
• cancel the possibility of clicking on the name of the event on each line

Also, I would like to:

• cancel the color bullet point for label next to the name of the event
• reduce the space (padding or margin?) between the horizontal line under the month and the first event of the month.

Thanks for your help!

The page is : new2020.jeremybury.fr/events-schedule

[jade]

Hello Jeremy,

It looks like you were able to get rid of the “voir” link and the bullet:

As for stopping the event name to be linked, you can write the CSS selector to target it then use the pointer-events attribute to disable the click events.

https://www.w3schools.com/cssref/css3_pr_pointer-events.asp

• How to get CSS selectors - https://goo.gl/BmoH39
• Get Started With Viewing And Changing CSS - https://goo.gl/7xFhDa

@jeremybury

reduce the space (padding or margin?) between the horizontal line under the month and the first event of the month.

There is a default bottom margin below the months heading and top padding for the events.

Try adding this code:

.mec-month-divider {
    margin-bottom: 0;
}

Kindly note that since this is a custom code that changes the default behavior/display of the theme, you will be responsible to maintain or update the code in case you require further changes or if the code stops working in future updates. If you are uncertain how to proceed, it would be best to get in touch with a developer.

Hope this helps.

[jeremybury]

@jade

It looks like you were able to get rid of the “voir” link and the bullet:

Yes, I could do it using this code:
.btn-wrapper {
. text-align: center;
. display: none;
}

@jade

As for stopping the event name to be linked, you can write the CSS selector to target it then use the pointer-events attribute to disable the click events.

https://www.w3schools.com/cssref/css3_pr_pointer-events.asp

• How to get CSS selectors - https://goo.gl/BmoH39
• Get Started With Viewing And Changing CSS - https://goo.gl/7xFhDa

I have read these pages but I still don’t know how to stop the link…
Using Chrome inspector, I get this:

but then I don’t know what to do…

[ruenel]

Hello Jeremy,

It seems that you already resolve your issue because I am seeing this custom css:

.mec-wrap .mec-event-article a {
    pointer-events: none;
}

For more details about pointer events property, please check this out:

• https://css-tricks.com/almanac/properties/p/pointer-events/

[jeremybury]

Hi,
Yes, I tried to add this custom css but it doesn’t work!!!

[ruenel]

Hello Jeremy,

You may have added it incorrectly. Can you please add it back so we can check your page? Or maybe, to better assist you with your issue, kindly provide us access to your site so that we can check your settings. Please create a secure note with the following info:
– Link to your site
– WordPress Admin username / password
​
To know how to create a secure note, please check this out: https://theme.co/docs/getting-support

Regards.

[jeremybury]

I don’t know what happened because you saw this custom css

@ruenel

.mec-wrap .mec-event-article a { pointer-events: none; }

but then when I have been in the ME Calendar plugin settings I couldn’t see its anymore… So I have added the code again and now it works!

Thanks again for your help!

[jade]

Glad to hear it’s sorted.

Cheers!