Divi Events Calendar


Home » Docs » Bonus Customization Resources » How To Style Category Tags By Color

Still Need Help?

If you have a question not covered here in the docs, or if you face any technical issue, you can reach out to us.

Visit Our Support Page

Divi Events Calendar Modules Plugin by Pee Aye Creative 2.2

Ready To Purchase?

Visit the product page to get all the details and make your purchase.

View Product

How To Style Category Tags By Color

We added a new feature in our Events Feed module that allows you to target each of the categories displayed in the feed. This means that each tag has it’s own CSS class related to the category, allowing us to target the category and then any time that category name is displayed it will be styled. So this quick guide is just a bonus CSS snippet for you.

Replace The Category Slug

The key will be to replace the category “outdoor-events” in my snippet with your own. So for example, let’s say your event category is “music” then your slug is probably “music” as well. In that case, you would replace “outdoor-events” with “music” in the code snippet.

Repeat For Every Category

You would then repeat this for every category tag that you want to style.

Styling The Category Tags

Our snippet just has the background color and text color. You can change those to whatever color you want, and make each category different! This allows you to create a type of color coded system, which could look really nice.


Below I have shown a screenshot of simple example of this code applied.

styling category tags in Divi Events Calendar

If you are using our free Divi child theme, place this snippet 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.

/*add general styling to affect all the category tags*/

.ecs-categories span a {
	font-weight: bold;
	padding: 0 6px 2px;
	border-radius: 4px;

/*style individual categories*/

.ecs_category_outdoor-events a {
	color: #fff !important;
	background-color: red !important;

Last updated Dec 13, 2022 @ 4:40 PM

Need Product Support?

Talk to us. We are happy to help.

I hope everything is going well! If you have a question not covered here in the docs, or if you face any technical issue, you can reach out to us on our support page.