M.E Calendar - Assign a class or ID to a single event

[dcc]

Hi Guys,

Is there any way I can assign an class or ID to a single event to have an alternate background image?
Ie, .see events output http://new.georgeiv.com.au/#events

Want to be able to have different background images for particular events.
Tried calling on it using labels and event ID but no luck so far.

Thanks in advance,

Cheers

[christopher]

Hi there,

Unfortunately, the Modern Grid generated code of the M.E.C. plugin does not have any ID or Class that you can use. But I suggest that you use a position based solution for this case. Kindly add the CSS code below to X > Launch > Options > CSS:

.mec-event-grid-modern .row:nth-child(1) .col-md-4:nth-child(1) .mec-event-article {
    background: green;
}

.mec-event-grid-modern .row:nth-child(1) .col-md-4:nth-child(2) .mec-event-article {
    background: yellow;
}

.mec-event-grid-modern .row:nth-child(1) .col-md-4:nth-child(3) .mec-event-article {
    background: red;
}

.mec-event-grid-modern .row:nth-child(2) .col-md-4:nth-child(1) .mec-event-article {
    background: blue;
}

.mec-event-grid-modern .row:nth-child(2) .col-md-4:nth-child(2) .mec-event-article {
    background: orange;
}

.mec-event-grid-modern .row:nth-child(2) .col-md-4:nth-child(3) .mec-event-article {
    background: purple;
}

Depending on the color of the background you will see which section of the CSS code is for which event so that you can add proper background images instead of the colors in the CSS code.

Thank you.

[dcc]

Thanks Christopher you absolute superstar! Worked perfectly.
As I’ve said previously - the best framework and best support to match.
Thanks again to you and your team.

[christian]

Thank you for your kind words, Claire. Glad we could help.