Event calendar date Upcoming events (List) customzation

Support
#1

Hi support team. I have 3 problems to solve:

  1. First I need to change the background colors of the date and month boxes
  2. Second, I need to align the «Day, Location» text with the title of the event
  3. Third, I want the event title to display as typed in the event page. I Want to remove the capitalized parameter

Thank you for your help.

#2

Hi @philippe,

Thank you for reaching out to us. To change the styling please navigate to M.E. Calendar > Settings > Styling Options then choose a Color Skin

Please checkout the documentation as well https://webnus.net/dox/modern-events-calendar/

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.

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

If you’re having trouble with the CSS styling then you can share the URL of the page in question so we can take a look.

Hope this helps!

#3

Hi @Nabeel. The first point was solved with a custom color.

I need to know the class of the event title to display as typed in the event page. I Want to remove the capitalized parameter and made it display with the 800 width.

#4

Hello There,

To change the case of the title and the font weight, please make use of this code:

.mec-wrap .mec-event-title {
    text-transform: capitalize;
    font-weight: 800;
}

Please understand that the font weight will only work if the font file is loaded on the page.

Please let us know how it goes.

#5

Hi @RueNel. This code has mixed effect on the event list in the home page http://dev.cckl.org

The text-transform: capitalize; does the job but the font-weight: 800; does not.

Strangely, the font-weight: 800; have changed the events page http://dev.cckl.org/activites/ that is good too.

So I am still needing the font-weight: 800; on this page http://dev.cckl.org

#6

Hi again,

To fix the issue, please replace the previous CSS with the following one:

.mec-wrap .mec-event-title {
    text-transform: capitalize;
    font-weight: 800 !important;
}

Don’t forget to clear all caches including your browser’s cache after adding the code. Let us know how this goes!

#7

Hi @Nabeel. This is perfect.

Now, I want the event page http://dev.cckl.org/activites/ to display the featured Image in this list.

#8

Hi again,

To display the featured image in the list, please checkout the video in the following link https://webnus.net/dox/modern-events-calendar/list-view-skin/

For the usage / settings and features of Modern Events Calendar, please refer to it’s documentation here https://webnus.net/dox/modern-events-calendar/ Also checkout the related demo here https://webnus.net/modern-events-calendar/list-view-classic-style/

Hope this helps!

#9

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.