Conditional Background Color Based on Dynamic Field Data

[Josh Delofsky]

Josh Delofsky

February 24, 2022 at 7:18 pm

Hi,

I’ve got a specific use-case, but hopefully it’s easy to understand what I need to do.

Let’s say I have student test grades (out of 100) that are pulled in from ACF. When displayed on the front-end, I want the background color for these elements to change based on the dynamic number. For example, if the student in the current post got a 53, I want the background color for a given element to be red. Similarly, if the number pulled in dynamically from ACF is a score of 91, I want the background color to instead be green. There would also be shades or different colors in between, and other uses. It’s kind of like conditional display, but instead of show or hide, it’s adjusting color/css.

If dynamic data from selected ACF field < 65, color for current element = red; if dynamic data is 66-75, color = orange; if dynamic data is 76-85, color – yellow; if dynamic data > 86, color = green.

Any help on how I would achieve this would be excellent. Given the power of Kadence, I assumed it would likely be possible, but I personally have no idea how I would go about this.

Thanks in advance!