Conditionally change grid background

By: Victoria Dinneen | Asked: 12/12/2022
ForumsCategory: How-toConditionally change grid background
Victoria Dinneen asked 2 years ago
Hi! I am trying to figure out a way to conditionally change the background of an entry in a grid. So entries that meet a criteria are styled differently from the rest.  I tried looking at some css examples and the documentation but couldn't figure it out. Thanks for any help!
Bobby Clapp replied 2 years ago

Can you provide a more detailed explanation with example criteria and maybe some images?

Victoria Dinneen replied 2 years ago

Yes, and thank you. The criteria would be determined by a field from a dropdown. I'll attach an image of the entries in a grid. I'm wanting to make an entry appear different (background and border color) than the other entries when it meets a certain criteria.

2 Answers
Victoria Dinneen answered 2 years ago
Here's an example of 2 entries in the grid.
Attachments
Victor Font answered 2 years ago
One approach is to use jQuery to attach a CSS class to the content when the criteria is met.
Victoria Dinneen replied 2 years ago

Thank you. Unfortunately, I'm not a developer and am unsure how to do that.

Victor Font replied 2 years ago

If you need a developer's help, please visit https://formidable-masterminds.com/developers-directory/. I'm sure you can find someone that can work within your budget.

Bobby Clapp replied 2 years ago

The simplest built-in way would be to build a conditional div with inline styling within the grid element. Maybe something like:

https://paste2.org/7MMM2kM8

Victoria Dinneen replied 2 years ago

Thank you. I tried the first suggestion but it only colors the background of the specific text, not the entire entry/layout. I also found a way to do change a "box" in the layout, but still not the whole entry. The layout has several "boxes" in it.

Bobby Clapp replied 2 years ago

That is correct. The solutions mentioned is limited. Unfortunately, for the result I expect you desire is where you will need custom code and jQuery.

Victoria Dinneen replied 2 years ago

Alright. Thanks for your help!

Making the Best WordPress Plugin even better - Together

Take on bigger projects with confidence knowing you have access to an entire community of Formidable Experts and Professionals who have your back when the going gets tough. You got this!
Join the community
crossarrow-right