Can you display text on an Events page when there are no upcoming events?

Hi all!

Our site was set up with a link directly to the Events Page, which was named Upcoming Events. As fits the name, we only want to display future events, not past ones. The Events Page only has the Events section on it. However this means when we have no upcoming events, the Upcoming Events page is just blank.

I know I can add some permanent text above the events, but we'd prefer to have a message display only when there aren't any upcoming events.

I've found a workaround using JavaScript to display text when a Summary block is empty, but is there an equivalent trick for the Events section on the main Events page? I'd like to avoid having to rename and unlink the page and create a new page with a summary block just for this purpose.

Cheers in advance,

Ben

On 10/16/2024 at 12:50 AM, tuanphan said:

You can use this to Website Tools > Custom CSS

div.events-list:has(.eventlist.eventlist--upcoming):before {
    display: none;
}
div.events-list:before {
    content: "No Events Now";
    display: block;
    font-size: 30px;
    text-align: center;
}

 

This worked great, thank you!