[Resuelto] Different background color of a post in a grid depending on the category

[Autor]

Mensajes

[carmenL]

I am creating a website for events. In addition to Types and Views, I am using the Modern Events Calendar Pro plugin.
I have created with Views a grid of upcoming events. In general, each grid element displays the featured image as the element's background.
But there are event posts that don't have a featured image, so I want to show a colored background, different depending on the event category to which it belongs.
I understand that I should create some conditional and assign the different background colors to each category, but I don't know where or how exactly to do this.
Thanks!

[Waqar]

Hi,

Thank you for contacting us and I'd be happy to assist.

To suggest the best way to achieve this, I'll need to see exactly how this view is set up in the admin area.

Can you please share temporary admin login details, along with the link to the page with this grid?

Note: Your next reply will be private and making a complete backup copy is recommended before sharing the access details.

regards,
Waqar

[Waqar]

Thank you for waiting and Happy New Year 🙂

In the view "Grid Coloured", this is the container div, that is currently controlling the background color:

<div class="ev-box-coloured">

In this container, you can include the slug of the taxonomy 'Disciplinas', as the class, so that is unique for each of those categories:

<div class="ev-box-coloured [wpv-post-taxonomy type="mec_category" format="slug"]">

Next, in your custom CSS code, you can include the CSS style rules for each of those category slugs, like this:

// for 'arte' category
.ev-box-coloured.arte {background: red !important;}

// for 'cine' category
.ev-box-coloured.cine {background: green !important;}

// for 'fiestas' category
.ev-box-coloured.fiestas {background: yellow !important;}

....

I hope this helps and please let me know if you need further assistance.

[carmenL]

My issue is resolved now. Thank you!