Event with multiple categories, which color will display

You can have up to 2 colors display as long as one is a border only and one is a background only. Otherwise you are bound by how CSS works.

Thanks for the super prompt reply. Let me clarify — I don’t’ want to have two colors on the same event, I want to have one color only based on a hierarchy of categories.

Please correct me if I am wrong:

I tested it and it looks like the colors are applied in the reverse order they appear in settings. So if I have a list of categories:
Cat1
Cat2
Cat3
Cat4
and I have an event with Cat 3 and Cat 1, the color that will be applied is Cat 3. That in itself is not bad.

I see that this order is alphabetical by category name.

My issue is this:
I have events that have both categories Apples and Peaches. They show the Peaches color. Apples are more important than Peaches, so I want the events to show the color for Apples. So it would seem that the only way to do that would be to rename Apples to… Zapples. My actual case is similar in that I can’t really rename the categories without them making no sense.

I understand your true point about CSS but in this case there’s little I can do to tweak this in my favor. Unless I create my own rules…. but then it defeats partially the plugin purpose (unless you use variables to set the colors that I can use in my child css? maybe that’s a solution for me).

If all this is correct, could you consider a way to change the order the categories are output to CSS? Any further assistance will be hugely appreciated.

Hope I’m being clear. Thanks again!!

This is a difficult problem and you may need to change your category structure to something like parent and child categories. Where the parent has a border and the child has a background. There are only 2 coloring options and with more than 2 categories something’s not going to work as expected.

There are limits to what the plugin is capable of and using more than 2 categories per event is one of those limits. The only solution is to have some of those categories hidden so no colorizing happens. In this case they are still searchable by category.

If anyone is still interested in getting this to work, we achieved a work-around with CSS and box-shadows.

Example here: https://cfpl.wpengine.com/programs-and-events/

CSS we used:

#homepage-events .cat_adult.cat_teens-tweens h3,
#events-page-events .cat_adult.cat_teens-tweens h3{
box-shadow: -4px 0 0 0 #45b97c, -8px 0 0 0 #7f3f98;
border-left:none;
}

#homepage-events .cat_teens-tweens.cat_adult.cat_youth-department h3,
#events-page-events .cat_teens-tweens.cat_adult.cat_youth-department h3{
box-shadow: -4px 0 0 0 #007dc5, -8px 0 0 0 #45b97c, -12px 0 0 0 #7f3f98;
border-left:none;
}

#homepage-events .cat_youth-department.cat_teens-tweens h3,
#events-page-events .cat_youth-department.cat_teens-tweens h3{
box-shadow: -4px 0 0 0 #007dc5, -8px 0 0 0 #7f3f98;
border-left:none;
}

#homepage-events .cat_youth-department.cat_adult h3
#events-page-events .cat_youth-department.cat_adult h3{
box-shadow: -4px 0 0 0 #007dc5, -8px 0 0 0 #45b97c;
border-left:none;
}