Skip Navigation

[Resolved] Conditional Style based on Custom Field

This thread is resolved. Here is a description of the problem and solution.

Problem:
How to conditionally style something in a loop output based upon a conditional field value.

Solution:
Add a container div and set a class—used to add the required styles—conditionally, using wpv-conditional, something like:

<div class="existing-class [wpv-conditional ...condition...]red-border[/wpv-conditional]">

You can read more about the specifics of the conditions in the linked documentation.

Relevant Documentation:
https://toolset.com/documentation/user-guides/conditional-html-output-in-views/checking-types-fields-and-custom-fields/

This support ticket is created 6 years, 6 months ago. There's a good chance that you are reading advice that it now obsolete.

This is the technical support forum for Toolset - a suite of plugins for developing WordPress sites without writing PHP.

Everyone can read this forum, but only Toolset clients can post in it. Toolset support works 6 days per week, 19 hours per day.

Sun Mon Tue Wed Thu Fri Sat
- 7:00 – 14:00 7:00 – 14:00 7:00 – 14:00 7:00 – 14:00 7:00 – 14:00 -
- 15:00 – 16:00 15:00 – 16:00 15:00 – 16:00 15:00 – 16:00 15:00 – 16:00 -

Supporter timezone: Europe/London (GMT+00:00)

This topic contains 2 replies, has 2 voices.

Last updated by gayatrip 6 years, 6 months ago.

Assisted by: Nigel.

Author
Posts
#919115

I need to add a red border to a loop item, conditionally, based on a custom field.
How might this be possible?

#919354

Nigel
Supporter

Languages: English (English ) Spanish (Español )

Timezone: Europe/London (GMT+00:00)

If you have a container div in your Loop Output for the items, you can add a class for which you have a style rule to add the red border.

Then only add the relevant class to the div subject to the custom field having the required value, which is explained here: https://toolset.com/documentation/user-guides/conditional-html-output-in-views/checking-types-fields-and-custom-fields/

So your code will look something like this:

<div class="existing-class [wpv-conditional ...condition...]red-border[/wpv-conditional]">
#919576

this worked