Home Forums Event Espresso Premium Event List Header banner – Category Colour

Event List Header banner – Category Colour

Posted: June 29, 2012 at 12:08 am

Ingrid Schroder

June 29, 2012 at 12:08 am

Hi there, I’d like to color code the event header banners on the event listing page with a different color for each category: I know this has been addressed for the calendar, so wondering if there’s a similar way to customize the headers on the event listing page? Cheers, Ingrid

Read more: Event List Header Category Colour

  • This topic was modified 11 years, 9 months ago by  Seth Shoultes. Reason: Moving to correct forum


  • Support Staff

July 3, 2012 at 11:11 am

Hi Ingrid,

It’s possible. In order to get the needed category classname CSS “hooks”, you’d set up the event list page like this:
[EVENT_ESPRESSO_CATEGORY event_category_id=”first-category”]
[EVENT_ESPRESSO_CATEGORY event_category_id=”second-category”]
[EVENT_ESPRESSO_CATEGORY event_category_id=”third-category”]

Then add something like this CSS to the theme’s stylesheet or other location where you place custom CSS:

div.first-category h3.ui-widget-header {background: red;}

div.second-category h3.ui-widget-header {background: green;}

div.third-category h3.ui-widget-header {background: yellow;}

Ingrid Schroder

August 2, 2012 at 12:32 am

Hi Josh,

I have implemented this but now the events appear out of date order:

If I use [ESPRESSO_EVENTS] for events-registration page. It will auto sort by date but not auto colour for banner.

If we use
[[EVENT_ESPRESSO_CATEGORY event_category_id=”first-category”]
[EVENT_ESPRESSO_CATEGORY event_category_id=”second-category”]
[EVENT_ESPRESSO_CATEGORY event_category_id=”third-category”]

It will create colours for the categories but list the events by category, not by date.


  • Support Staff

August 2, 2012 at 10:17 am

That’s correct. Grouping the events by category will allow you to add colors to the header of each listing, but it will order them by each category.

Ingrid Schroder

August 2, 2012 at 6:04 pm

Is there any way to colour code the banners AND sort by date?

The support post ‘Event List Header banner – Category Colour’ is closed to new replies.

Have a question about this support post? Create a new support post in our support forums and include a link to this existing support post so we can help you.

Event Espresso