Events List Advanced Widget background colors

[Glenn]

Is there a way to get the widget to show the colors of each category listed? I can get all the entries in the list to change color but not been able to get the individual colors of each category to show. I used the https://theeventscalendar.com/coloring-your-category-events/ guide to set the colors of my categories and that’s working fine. I would like to have the same thing happen in the Advanced Widget but can’t seem to get the code right.
Thanks,
Glenn

[Jonah]

Hi Glenn,

To do this just target the category classes attached to the li elements of the widget by adding something like the following to your theme’s style.css file:

.eventsAdvancedListWidget .cat_community-event {
background: #e7e7e7;
}

Replace ‘community-event’ with whatever the name of your event category assigned to the event is.

Here’s a screenshot of the HTML showing the classes added to an event: http://cl.ly/image/1W450u1d372g – depending on which web browser you use you can utilize various methods for viewing the HTML by clicking or selecting an element on the page and viewing it’s markup and CSS.

Does that help?

– Jonah

[Glenn]

Thanks Jonah, I was so close but yet so far….I was using .eventsAdvancedListWidget li .cat_training-events {
background: #fae503
Glenn

[Jonah]

Ahhh, I know how that goes. Glad that did it for you though. Let me know if there’s anything else you need help with.

– Jonah

[Support Droid]

This topic has not been active for quite some time and will now be closed.

If you still need assistance please simply open a new topic (linking to this one if necessary)
and one of the team will be only too happy to help.

[Author]

Posts