M.E. Calender use a other css

[Blume_REMC]

Hi there,

what do I have to do, so that the calender uses the same css settings as the theme? if I change the settings in the custom css of the calendar this also changes the complete css of the theme.
For example, the p or the h3 looks completely different in calender detail than in the rest of the theme, if I adjust that in the calendar css it also changes in the theme.
https://www.roadeagle-arnsdorf.de/meute/test/

Tanks and best regards Blume

[Prasant]

Hello Blume,

Thanks for writing in!

You will have to make CSS changes to mimic the Theme Styling into Modern Event Calendar. To make sure changes are not global in nature, you will have to use MEC selector followed by element to write the CSS. So, let say you want to make the changes into the <p> tag that’s used in MEC. Here’s the selector and CSS that can be considered:

.mec-wrap p {
   font-size: 12px;
    color: #ddd;
} 

Here mec-wrap is the selector in Modern Event Calendar. We have used that selector to make sure that the <p> tag changes are not global or site level but is restricted to MEC.

1- I have found the proper CSS code selector using the Chrome browser Developer Toolbar: https://www.youtube.com/watch?v=wcFnnxfA70g

2- For the CSS code itself, I suggest that you get started with this tutorial: https://www.youtube.com/watch?v=yfoY53QXEnI

Thanks.