Code by Day | Explore By Weekend

How To Style Event Category Colors With The Divi Events Calendar Tutorial by Pee Aye Creative

How To Highlight Event Categories By Color In Divi Events Calendar

This tutorial for the Divi Events Calendar plugin will show you how to highlight and style colors of specific events in event categories.
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. You can also check out the live demo of this tutorial!

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. You can view a live demo of this on the Category Colors page on our plugin demo website.

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. You can view a live demo of this on the Category Colors page on our plugin demo website.

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 .virtual-events_dec_category {
	background: #ff0000!important;
}
Time
/*event start time in specific categories*/

.decm_divi_event_calendar .virtual-events_dec_category .fc-calendar-time {
	color: #ffffff;
}
Title
/*event title in specific categories*/

.decm_divi_event_calendar .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 .virtual-events_dec_category {
	background: #ff0000!important;
}


/*event start time in specific categories*/

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


/*event title in specific categories*/

.decm_divi_event_calendar .virtual-events_dec_category .fc-calendar-title a {
	color: #ffffff!important;
}
15
Last updated Nov 24, 2020 @ 1:22 am

Please share this post!

Nelson Lee Miller (aka The Divi Teacher)

Nelson is the owner of Pee-Aye Creative Co in the beautiful state of Pennsylvania. He loves helping small businesses, exploring, building websites with Divi, and teaching others.
Divi Adventure Club Product And Course Membership by Pee Aye Creative

Become A Member!

Gain access to everything we offer!

Learn More

Recent Posts

Leave A Response!

Subscribe
Notify of
guest
2 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
Carmen Kronspiess
Carmen Kronspiess
1 month ago

Hi Nelson,
I just purchesed the Divi Calendar ad-on and I love it a lot, as I am used to divi. I need a feature which I cannot replicate myself.

In the Calendar Module I need the Organizer to set a specific color but not the category. How do I have to modify the CSS code for only the organizer regardless which category.
Thanks a lot
Carmen

Shop Our Divi Products

Plugins • Courses • Templates

Visit The Shop

Divi Adventure Club Product And Course Membership by Pee Aye Creative

Become A Member!

Gain access to everything we offer!

Learn More

Divi Tutorials On YouTube

Join over 4,700 others and subscribe to our helpful Divi videos!

Visit Our Channel

Pin It on Pinterest

0

Your Cart