Past events background color

What do you think to automatically change background color of events passed.
In order to highlight users and rapidly make the difference with coming events.
Also, other suggestion, on passed events automatically stick a filigrane “passed”

1 Like

Hi there @MICHEL_A3A :wave:

At the moment, past events are displayed in the dedicated section below the upcoming events:

Do you want to keep the past events below and change their background color, or you want to display them before the upcoming events and change their background color?

Hi Max
I want to put past events after the current events but for the past events As soon as there is a new past event added, the background color becomes in another color (chosen) automatically rather than I do it by myself for each past events.

But in the top priority, I would appreciate to get the possibility to change the event text by, for example, putting some words in a specific color. Currently, all the event text is in black color, I cannot put a red color for some sentences in this text.

Also, if you have a look at my site, page “A la une”, look at one event where there is a button “Inscription”.
Below the button there is a tag text, for example “Tarif: 17€…”. How to write this in red color?

I hope my explanation is clear :crazy_face:
Thank you very much in advance.
Michel

Got it!

I’ll check with our devs if it’s possible to automatically change the background color of the past events and color of the button caption. I’ll let you know once I receive a response from them :slightly_smiling_face:

As for changing the color of the specific word, you can do this in the Code Editor of the event description:

image

Just add this tag before the needed word <span style="color: red;"> and this tag right after this word </span>. Here is an example:

<span style="color: red;">Venez</span>

Check it out and let me know if it helped :slightly_smiling_face:

Perfect!
Thanks a lot :+1:

1 Like

Hi @MICHEL_A3A :wave:

Thank you for waiting!

You can change the color of the Button Caption by adding this code to the Custom CSS field on the Appearance tab of your widget’s settings:

.eapp-events-calendar-button-element-caption {
  color: red;
}

To change the color of the past events, please use this code:

.eapp-events-calendar-layout-pastEvents .eapp-events-calendar-list-item-component {
  background-color: rgba(17, 17, 17, 0.15);
}

Test it out and let me know if you like what you see :slightly_smiling_face:

Hi Max

Thank you for your support and help.
Just to be sure, where should I insert these code, in each event or is there another place to insert which will apply the codes for all at a glance?
Kind regards
Michel

1 Like

This code should be added to the Custom CSS field of each widget where you’d like the background color of the past events to be changed:

image

Please let me know if this explains things or if you have any further questions :slightly_smiling_face:

Hi again,
I did it, please verify, but nothing different on my site.
Could be I made a mistake.
Thanks
Mike

1 Like

Could you please share a link to the page where your widget is installed?

Sorry Max, I am stupid, I have forgotten to publish again :crazy_face:
Working fine :+1:
Many thanks for this development.

No problem! You are always welcome :slightly_smiling_face:

Max,
Do you think it’s also possible to hide automatically the button “inscription” for past events with an additional code?
Mike

1 Like

I am not sure if it’s feasible, but I’ll gladly check it with our devs. I’ll let you know once I receive a response from them :wink:

To hide the button from your past events, we’ve added this code to the Custom CSS field:

.eapp-events-calendar-layout-pastEvents .eapp-events-calendar-button-element-component {
  display: none;
}

Please check it and let me know how it works :slightly_smiling_face:

However, there is no option to automatically remove the button from the popup of the past events. As a workaround, you can use this code to hide the popup for the past events:

.eapp-events-calendar-layout-pastEvents .eapp-events-calendar-list-item-component {
  pointer-events: none;
}

Hi Max
Thank you again for your rapid reaction.
I will test it as soon as possible.
Should I copy both codes following the existing one which is changing the color of the past events?
I am very satisfied with the past Pop up hidden, this is even better to do it as you are proposing.
I will let you know after testing.
Kind regards
Mike

The first code for hiding the button is already added to your widget. So, you just need to add only the code for hiding popup :slightly_smiling_face:

This is absolutely perfect :+1:
Working fine. Thank you to all developers and mainly to you.
Have a nice day
Mike

1 Like

Thanks a million for your kind feedback, it means the world to us!

If anything comes up, we are always here for you.

Have a great day :wink:

Hi Max
Just to inform you that the CSS codes seem inactive since this afternoon.
Could you please have a look?
Thank you
Mick

1 Like