Highlight Featured Events in lists on website

I allow my site members to post event for free, but some times I'll charge for "premium advertising."
These Premium events have "Featured" set to YES.

I would like for the Featured events to stand out from the others when a list of events are being viewed. Either a different background color, or a badge showing that this event is "Featured"

PS:
Also, it would be great if we could turn "Featured" on or off when viewing the list of events from the Admin side (Admin Panel > Events Booking > Event Manager: Events)
Perhaps a "Featured" column with a one click Yes/No option.

I still think this would be a great addition for future updates.
I'm not sure if its something that can be done through CSS (not my area of expertise).

Hello Marlon

Each featured event is surrounded by eb-featured-event css class. So Yes, you can hightlight these events using css. For example:

.eb-featured-event
{
background-color: red;
}

Add that css code to Events Booking -> Configuration, Custom CSS section and you can see the difference. Of course, that background color code and other thing like text color needs to be adjusted to work with the css of your site template

Regards,

Tuan

THNAK YOU!
This gave me a good staring point. So I modified it & got it to add a badge after the title of Featured events on the component page.
Unfortunately it doesn't affect the EB modules

How would I apply it wherever Featured Events are displayed?

Kind regards,
Marlon

Hi Marlon

Maybe I forgot to add the class to the module. What module you are talking about? Please let me know so that I can check and adjust the code of the module to support it

Tuan

I'm using "Events Booking - Upcoming Events" module (mod_eb_events) with the Horizontal layout.

You may be right.
It has the option to only show featured events, but I didn't see the class when I checked the elements in my browser's.

Update: I also use the mod_eb_slider module

Hello

Please try to update your site two the two attached modules. Then each featured event should have a css class eb-event-featured css class to allow you to apply custom styling

I have to use a different css class with the css class use in the component to avoid suddenly change in module if someone uses that css class to style the featured events in component before

Regards,

Tuan

Thank you Tuan.

I don't mind using a different CSS class for the component & for the modules

I updated both modules. copied the Custom CSS code, & changed "eb-featured-event" to "eb-event-featured" and it works for mod_eb_events module. No change in mod_eb_slider module.

Hi Marlon

Unless you have override, it should work for Slider module as well. You can submit a support ticket sending us super admin account and link to the page so that I can check it directly on your site

Tuan