[Resolved] Grid item – background with specific color based on taxonomy – conditional

[Author]

Posts

[petrC-2]

Hi team,

I have grid of AI tools and I want to achieve this: if the tool is part of BEST OF taxonomy I want to change the background of the grid item to different color. Please check the attached picture - I am sorry for the low quality, but I just did it in Windows Paint to show what I mean. I can't find how to create such a condition. Please guide me.

Tell us what you are trying to do?
Directory website

Is there any documentation that you are following?
Couldn't find anything

Is there a similar example that we can see?
Not sure

What is the link to your site?
best-ai-tools.net - under development

[Nigel]

Hi there

The way I would approach this is to conditionally add CSS that sets the background color.

But before detailing the solution, we need to consider what CSS can achieve this, based upon the markup generated by the View.

Starting with that, the grid output by the View has a structure like this:

<div class="tb-grid">
    <div class="tb-grid-column">
        <div class="wp-block-toolset-views-view-template-block wpv-block-loop-item php-to-be-replaced-with-shortcode" data-toolset-views-view-template-block="1076bd5e1dd04448d4d73e1111f82f01"></div>
    </div>
    <div class="tb-grid-column">
        <div class="wp-block-toolset-views-view-template-block wpv-block-loop-item php-to-be-replaced-with-shortcode" data-toolset-views-view-template-block="1076bd5e1dd04448d4d73e1111f82f01"></div>
    </div>
    <div class="tb-grid-column">
        <div class="wp-block-toolset-views-view-template-block wpv-block-loop-item php-to-be-replaced-with-shortcode" data-toolset-views-view-template-block="1076bd5e1dd04448d4d73e1111f82f01"></div>
    </div>
</div>

I've simplified that so you can see the structure.

The key point to note is that the div that we should target to add the background-color property has a class "wpv-block-loop-item".

Imagine one of these is the grid item we will want to target to change the background-color.

The relevant grid item outputs the name of the term "BEST OF", but it isn't available anywhere (e.g. as a class or data attribute) that can be targeted with CSS.

So, what we could do is in the target grid item (or items) conditionally add an invisible element that has a class "target", and then we can use that class to target only the grid items we want.

So, in the loop output section of your View add a conditional block that tests for the BEST OF taxonomy term, and inside the conditional block add a Custom HTML block with this content:

<div class="target"></div>

(See this page for how to do that: https://toolset.com/course-lesson/using-toolset-conditional-block/)

So, on the front end, only the relevant grid items will include an empty div with the class "target".

Now for the CSS. You can add this to the custom CSS section of the View settings in the sidebar.

.target {
  display: none;
}
.wpv-block-loop-item:has(.target) {
  background-color: red;
}

The first part prevents our empty target div from taking up any blank space, and the next line adds a background-color to any grid item which contains something with a target class.

(Note, this will work on modern browsers. For older browsers, the background-color won't be added, but any other solution would be rather more complex.)

[petrC-2]

Hi,

I tried to follow your instruction but I don't have any success. I watched the video, created the conditional field to the loop, added the HTML code there, but I struggle to move the whole loop to the conditional field. It's too difficult for me.

I used the Document overview to move it to the conditional field but it's not working. Either there is no grid or the background is white for all grid items.

Please can you assist?

Kind Regards
Petr

[Nigel]

Moving the loop into the conditional block isn't part of the solution, I'm not sure what you are aiming to do there.

I edited the page with the View, updated your conditional block condition so that it was checking the slug of the usage category (best-of), and then I added the suggested CSS to the Custom CSS section of the View.

I just put orange as the background colour, and it appears to be working on the front end.

[petrC-2]

Hi Nigel,

The thing is I am not too technical. So I got lost and my condition wasn't correct. However, your fix does exactly what I wanted. Last question I have is if you could send me screenshot of the location you added this code so I can change the color:

.target {
display: none;
}
.wpv-block-loop-item:has(.target) {
background-color: red;
}

Thank you very much.
Petr

[petrC-2]

Oh, OK. I can see it now. Thank you for your help.

[petrC-2]

Great support!