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.
Example
Below I have shown a screenshot of simple example of this code applied.
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;
}