How This Works

This tutorial gives you the CSS snippets you need to target the events within any event category in the Divi Events Calendar modules. We have instructions and snippets for each module, so be sure to follow along with the video to make sure you do it right.

NOTE: Please be sure to watch the video to learn how to use the snippets and see the results in action. 

Where To Add The CSS Snippets

If you are using our free Divi child theme, place the snippets into the style.css file. Otherwise, place this in your Divi>Theme Options>Custom CSS code box. If you need help, check out our complete guide on Where To Add Custom Code In Divi.

Custom Classes

Keep in mind that you would need to use a custom class if you want to only target categories in one particular module rather than all the Events Feed or Events Carousel modules on your site. To do that, replace “.decm_event_display” (Events Feed and Events Carousel) or “.decm_divi_event_calendar”  (Events Calendar) with your own class. Be sure to add a matching custom class in the module settings>Advanced tab>CSS IDs & Classes toggle>CSS Class input field.

How To Find the Event Category Slug

You can find your own event category slug by going to Events>Event Categories in the backend of your website.

Of course you could also use the browser developer tools to inspect the CSS and find the classes, but advanced users already know that, and it is easier for everyone else just to use this simple method of finding the slug in the backed.

Duplicate Snippets For Each Event Category

You will need to copy the snippets below multiple times if you want to style more than one category. Each category would need it’s own set of CSS snippets. So for example, if you have five event categories and want each of them to have a different color, you would need to have five sets of the code snippet, one for each event category.

Highlight Categories In The Events Feed And Events Carousel Modules

The follow snippets target each item in the Events Feed module. You can copy the items you need, or copy them all down below.

NOTE: The snippets in this section are for the Events Feed, but they are the same for the Events Carousel with one important difference. For the Events Carousel, you will need to also change the “.decm_event_display” to “.diec_event_carousel” instead. 

In the screenshot below, the events in the Virtual Events category have blue background with lighter text, and events in the Races category have a dark background and light text.

Replacing The Selector With Your Own

In the snippets below, we have a selector called “outdoor-events” which is an event category on our demo site where we are working the live example in the video. Obviously you will need to change this to your own category slug. To do this, just replace “outdoor-events” anywhere you see it like “.ecs-event-posts.outdoor-events_ecs_category.” 

The individual snippets above are great if you only need one or two items. If you want to style everything, you can copy the entire snippet below.

Highlight Categories In The Events Calendar Module

You can also do this on the Events Calendar module. In the screenshot below, the events in the Outdoor Events category are green, and the events in the Virual Events Category are red. 

Replacing The Selector With Your Own

In the snippets below, we have a selector called “virtual-events” which is an event category on our demo site where we are working the live example in the video. You will need to change this to your own category slug. To do this, just replace “virtual-events” anywhere you see it like “.your-category_dec_category.”

The individual snippets above are great if you only need one or two items. If you want to style everything, you can copy the entire snippet below.

List View Dots

For other views such as the List view the same principles can be followed, but instead of the background of the entire event it would style the dot. So you would use this snippet below for each category and color.