Past Events Images

Ask the Community Customization
1

Hello,
I’d like to tweak the images of past events, like changing the opacity, etc. but I cannot find which css element I should call.
Can someone help me with this ?
Thanks a lot.

2 Likes
3

Hi there, @Axel_Clamens :wave:

We have a solution that changes the opacity of all past event elements:

.eapp-events-calendar-layout-pastEvents{
  opacity: 0.7 !important;
}

Does it work for you, or you’d like only images to be faded out?

2 Likes
4

It’s great thank you! But If I could get the code for the images only it would be even better !

2 Likes
5

Sure, here is the code for images only:

.eapp-events-calendar-layout-pastEvents img {
  opacity: 0.5 !important;
}
2 Likes
6

Hello.
I just realized that my css for past events doesn’t work anymore.
I want to:

  • use Lexend Giga in the layout past event title
  • Hide the date
  • desaturate the images

Here’s my code:

.eapp-events-calendar-layout-pastEventsTitle.jsx-4168876896 {
color: rgb(138, 138, 138);
font-size: 40px;
font-family: ‘Lexend Giga’, sans-serif;
line-height: 1; / Réduction de l’interlignage /
letter-spacing: -2px; / Réduction de l’espacement entre les lettres /
margin-top: 50px; / Ajoute un espace au-dessus de l’élément /
margin-bottom: 12px; / Ajoute un espace au-dessus de l’élément */
text-transform: uppercase;
}

.eapp-events-calendar-layout-pastEvents {
filter: grayscale(92%);
}

.eapp-events-calendar-layout-pastEvents img {
opacity: 1 !important;
}

and the url:

Can you help me solving this little issue ?
Thanks!

1 Like
7

Hi there. @Axel_Clamens :waving_hand:

Apologies for this inconvenience!

The classes for the past events elements have been changed, this is why the code stopped working.

I’ve adjusted the code in your widget. Here is how it looks now:

/* TITRE RUBRIQUE ÉVÉNEMENTS PASSÉS */
.eapp-events-calendar-layout-past-events-title {
    color: rgb(138, 138, 138);
    font-size: 40px;
    font-family: 'Lexend Giga', sans-serif;
    line-height: 1; /* Réduction de l'interlignage */
    letter-spacing: -2px; /* Réduction de l'espacement entre les lettres */
    margin-top: 50px; /* Ajoute un espace au-dessus de l'élément */
    margin-bottom: 12px; /* Ajoute un espace au-dessus de l'élément */
    text-transform: uppercase;
}


/* POUR DÉSATURER LES ÉLÉMENTS PASSÉS */
.eapp-events-calendar-layout-past-events {
  filter: grayscale(92%);
}

/* POUR DÉSATURER UNIQUEMENT L'IMAGE */
.eapp-events-calendar-layout-past-events img {
  opacity: 1 !important;
}

And here is the code to hide the dates in past events:

.eapp-events-calendar-layout-past-events .eapp-events-calendar-date-element-component {
  display:none!important;
}

Please check it out and let me know if you like the result :slightly_smiling_face:

1 Like