Is there a way to place a text or banner over the image of past events automatic

[Ulf]

We have not decided if we want to delete or keep the past events and all of or past events is still available when a visitor is using the searchfield.

We have a idea if we could place a banner or a text over the event-image where it stands for example “This event has already been”.

Is it possible to to achieve this automatically then the the event has passed.

[Sky]

Hello Ulf,

This isn’t something that can be done by default using the plugin settings, but you could achieve this using just CSS.

In the month view, any events that are past can be targeted by the “tribe-events-past” class. So, for example:


.tribe-events-past .type-tribe_events:after, .tribe-events-past .tribe-events-tooltip:after {
content: '';
display: block;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: red;
}


This example overlays a red background, but you can change this to “background-image” and use the image of your choice. Also, this targets both the event in the calendar, and the tooltip. You can adjust the CSS to target one or the other.

Hope this helps! Let me know if you have any other questions.

Thanks,
Sky

[Ulf]

Hi, and thanks for the reply, this could absolutly work and it sounds perfect that all the past events have a ”tribe-events-past” class, but would like to accomplish this on a single-event page and cannot find the ”tribe-events-past” class in the code.

Is this class only in the months view? If this is the case how do I implement the necessary code to make this work on a singe-event page?

An example of a past event at our site…
http://www.varakonserthus.se/pa-scen/delat-ar-dubbelt/

[Sky]

Hi Ulf,

The single event template doesn’t seem to have a class for this. However, you can customize the template to add this information as needed.

You would need to copy and modify the-events-calendar/src/views/single-event.php into [your-theme]/tribe-events/single-event.php and make your changes.

You can use the conditional function “tribe_is_past_event()” to determine when to add the class/markup or whatever approach you take. Since you won’t be limited to CSS, you can just load an image and a snippet in place of the normal content if you want.

For more information on customizing the event templates, check out our Themer’s Guide.

Let me know if you have any other questions.

Thanks,
Sky

[Ulf]

Hi this sounds hopeful, but i feel that my knowledge in how to accomplish this is limited. I already have a custom singe-event.php in a child-theme. Would it be enough to modify only this file or do i need do modify any other file to make it work.

I attach the single-event.php (hope that i could get a hint of what i should adjust)

[Sky]

Ulf,

This is the same file, so just add your modifications. Here is an example of how you could add a class to the event wrapping element, which starts at line 106 in your modified file. So replace line 106 with the following.


<?php $my_custom_single_events_class = ( tribe_is_past_event() ) ? "tribe-events-single-page-past tribe-events-single-page" : "tribe-events-single-page"; ?>
<div class="<?php echo $my_custom_single_events_class; ?>">


That will allow you to target the single event elements with CSS by adding “.tribe-events-single-page-past ” in front of the selector.

Hope that helps!

Sky

[Ulf]

Thanks! that worked perfectly.

[Sky]

Ulf,

Awesome! I’m glad that worked for you.

Please let us know if you have any questions or issues in the future.

Thanks,
Sky

[Support Droid]

Hey there! This thread has been pretty quiet for the last three weeks, so we’re going to go ahead and close it to avoid confusion with other topics. If you’re still looking for help with this, please do open a new thread, reference this one and we’d be more than happy to continue the conversation over there.

Thanks so much!
The Events Calendar Support Team

[Author]

Posts