Please be sure to read the 2.1 release post/video and review the Important Update Information before updating! (Current Version 2.1.3)

Divi Events Calendar

Documentation & Support

Docs » How To Highlight Event Categories By Color
How To Style Event Category Colors With The Divi Events Calendar Tutorial by Pee Aye Creative

How To Highlight Event Categories By Color

Divi Events Calendar Product Featured Image 2.0

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.

Finding the event category slug

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.

highlighted category colors in Divi Events Calendar feed

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.” 

Background/Border

/*events background/border in specific categories*/

.decm_event_display .ecs-event-posts.outdoor-events_ecs_category .act-post {
	background: #0048ff!important;
	border-color: #000000!important;
}

Title

/*event title in specific categories*/

.decm_event_display .ecs-event-posts.outdoor-events_ecs_category .entry-title,
.decm_event_display .ecs-event-posts.outdoor-events_ecs_category .entry-title a {
	color: #ffffff!important;
}

Date

/*event date in specific categories*/

.decm_event_display .ecs-event-posts.outdoor-events_ecs_category .ecs-eventDate.duration.time {
	color: #2ea3f2!important;
}

Time

/*event duration time in specific categories*/

.decm_event_display .ecs-event-posts.outdoor-events_ecs_category .ecs-eventTime.duration.time {
	color: #2ea3f2!important;
}

Date & Time

/*event duration (date and time) in specific categories*/

.decm_event_display .ecs-event-posts.outdoor-events_ecs_category span.duration {
	color: #2ea3f2!important;
}

Venue

/*event venue in specific categories*/

.decm_event_display .ecs-event-posts.outdoor-events_ecs_category span.ecs-venue {
	color: #2ea3f2!important;
}

Location

/*event location in specific categories*/

.decm_event_display .ecs-event-posts.outdoor-events_ecs_category span.ecs-location {
	color: #2ea3f2!important;
}

Price

/*event price in specific categories*/

.decm_event_display .ecs-event-posts.outdoor-events_ecs_category span.ecs-price {
	color: #2ea3f2!important;
}

Organizer

/*event organizer in specific categories*/

.decm_event_display .ecs-event-posts.outdoor-events_ecs_category span.ecs-organizer {
	color: #2ea3f2!important;
}

Categories

/*event details category links in specific categories*/

.decm_event_display .ecs-event-posts.outdoor-events_ecs_category .ecs-categories a {
	color: #2ea3f2!important;
}

Excerpt

/*event detail excerpt in specific categories*/

.decm_event_display .ecs-event-posts.outdoor-events_ecs_category .ecs-excerpt {
	color: #ffffff!important;
}

Button

/*event more info button in specific categories*/

.decm_event_display .ecs-event-posts.outdoor-events_ecs_category .act-view-more {
	background: #0d1b42!important;
	color: #ffffff!important;
	border-color: #0d1b42;
}

Icons

/*event detail icons in specific categories*/

.decm_event_display .outdoor-events_ecs_category .categories-ecs-icon:before, 
.decm_event_display .outdoor-events_ecs_category .eventTime-ecs-icon:before, 
.decm_event_display .outdoor-events_ecs_category .eventDate-ecs-icon:before, 
.decm_event_display .outdoor-events_ecs_category .weburl-ecs-icon:before, 
.decm_event_display .outdoor-events_ecs_category .price-ecs-icon:before, 
.decm_event_display .outdoor-events_ecs_category .event-location-ecs-icon:before, 
.decm_event_display .outdoor-events_ecs_category .venue-ecs-icon:before, 
.decm_event_display .outdoor-events_ecs_category .organizer-ecs-icon:before {
  color: #ffffff;
}

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.

Everything

/*event background/border in specific categories*/

.decm_event_display .ecs-event-posts.outdoor-events_ecs_category .act-post {
	background: #0048ff!important;
	border-color: #000000!important;
}


/*event title in specific categories*/

.decm_event_display .ecs-event-posts.outdoor-events_ecs_category .entry-title,
.ecs-event-list .ecs-event-posts.outdoor-events_ecs_category .entry-title a {
	color: #ffffff!important;
}


/*event date in specific categories*/

.decm_event_display .ecs-event-posts.outdoor-events_ecs_category .ecs-eventDate.duration.time {
	color: #2ea3f2!important;
}


/*event time in specific categories*/

.decm_event_display .ecs-event-posts.outdoor-events_ecs_category .ecs-eventTime.duration.time {
	color: #2ea3f2!important;
}


/*event duration (date and time) in specific categories*/

.decm_event_display .ecs-event-posts.outdoor-events_ecs_category span.duration {
	color: #2ea3f2!important;
}


/*event venue in specific categories*/

.decm_event_display .ecs-event-posts.outdoor-events_ecs_category span.ecs-venue {
	color: #2ea3f2!important;
}


/*event location in specific categories*/

.decm_event_display .ecs-event-posts.outdoor-events_ecs_category span.ecs-location {
	color: #2ea3f2!important;
}


/*event price in specific categories*/

.decm_event_display .ecs-event-posts.outdoor-events_ecs_category span.ecs-price {
	color: #2ea3f2!important;
}


/*event organizer in specific categories*/

.decm_event_display .ecs-event-posts.outdoor-events_ecs_category span.ecs-organizer {
	color: #2ea3f2!important;
}


/*event details category links in specific categories*/

.decm_event_display .ecs-event-posts.outdoor-events_ecs_category .ecs-categories a {
	color: #2ea3f2!important;
}


/*event detail excerpt in specific categories*/

.decm_event_display .ecs-event-posts.outdoor-events_ecs_category .ecs-excerpt {
	color: #ffffff!important;
}


/*event more info button in specific categories*/

.decm_event_display .ecs-event-posts.outdoor-events_ecs_category .act-view-more {
	background: #0d1b42!important;
	color: #ffffff!important;
	border-color: #0d1b42;
}


/*event detail icons in specific categories*/

.decm_event_display .outdoor-events_ecs_category .categories-ecs-icon:before, 
.decm_event_display .outdoor-events_ecs_category .eventTime-ecs-icon:before, 
.decm_event_display .outdoor-events_ecs_category .eventDate-ecs-icon:before, 
.decm_event_display .outdoor-events_ecs_category .weburl-ecs-icon:before, 
.decm_event_display .outdoor-events_ecs_category .price-ecs-icon:before, 
.decm_event_display .outdoor-events_ecs_category .event-location-ecs-icon:before, 
.decm_event_display .outdoor-events_ecs_category .venue-ecs-icon:before, 
.decm_event_display .outdoor-events_ecs_category .organizer-ecs-icon:before {
  color: #ffffff;
}

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. 

highlighted category colors in Divi Events Calendar

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.”

Background/Border

/*event background in specific categories*/

.decm_divi_event_calendar .fc-event.virtual-events_dec_category {
	background: #ff0000!important;
}

Time

/*event start time in specific categories*/

.decm_divi_event_calendar .fc-event.virtual-events_dec_category .fc-calendar-time {
	color: #ffffff;
}

Title

/*event title in specific categories*/

.decm_divi_event_calendar .fc-event.virtual-events_dec_category .fc-calendar-title a {
	color: #ffffff!important;
}

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.

Everything

/*event background in specific categories*/

.decm_divi_event_calendar .fc-event.virtual-events_dec_category {
	background: #ff0000!important;
}


/*event start time in specific categories*/

.decm_divi_event_calendar .fc-event.virtual-events_dec_category .fc-calendar-time {
	color: #ffffff;
}


/*event title in specific categories*/

.decm_divi_event_calendar .fc-event.virtual-events_dec_category .fc-calendar-title a {
	color: #ffffff!important;
}

Last updated May 5, 2021 @ 2:13 pm

Get Support

Have a question? Something not going well? I am happy to help!


Pin It on Pinterest

0

Your Cart