Skip Navigation

[Résolu] Apply Different Colour to Text Output When Using wpv-conditional in Views

Ce fil est résolu. Voici une description du problème et la solution proposée.

Problem:
How can I apply different CSS (as example coulours) on different Text in my Content, conditionally?

Solution:
The easiest is to apply HTML Conditional to your HTML classes.

If you have any Class in your HTML (maybe on the table, or a

div class=""

) you can call dynamically

classA

or

classB

with HTML conditional.

As an example, red if radio A is selected and blue if B is selected:

[wpv-conditional if="( $(wpcf-radio) eq 'A' )"]
  <div class="red">
[/wpv-conditional]
[wpv-conditional if="( $(wpcf-radio) eq 'B' )"]
  <div class="blue">
[/wpv-conditional]
 
  content here
 
</div>

And then the CSS in the CSS Editor:

div.red {
  background-color: red;
}
div.blue {
  background-color: blue;
}

Relevant Documentation:
https://toolset.com/documentation/user-guides/conditional-html-output-in-views/

This support ticket is created Il y a 7 années et 7 mois. 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.

No supporters are available to work today on Toolset forum. Feel free to create tickets and we will handle it as soon as we are online. Thank you for your understanding.

Sun Mon Tue Wed Thu Fri Sat
- - 14:00 – 20:00 14:00 – 20:00 14:00 – 20:00 14:00 – 20:00 14:00 – 20:00
- - - - - - -

Supporter timezone: Asia/Ho_Chi_Minh (GMT+07:00)

This topic contains 4 réponses, has 2 voix.

Last updated by julieP Il y a 7 années et 7 mois.

Assisted by: Beda.

Auteur
Publications
#429003

I have two post fields, let's call them A and B.

Field A is a radio button with two choices (X & Y). Field B is also a radio button with two choices (#1 and #2).

If the user selects X for field A, they will always choose #1 for field B.

If the user selects Y for field A, they will always choose #2 for field B.

I then have a View which displays only the entries for Field B in a table with each entry in it's own table cell. I'm fine with doing the table but if the entry is #1, I'd like the cell background to be red and if the entry is #2, I'd like the cell background to be yellow.

I've played around applying CSS in the Content Template for the View in various places in and around the types field and the conditional statement but I'm not achieving quite what I need.

I'm beginning to wonder if it's even achievable. Can you advise please? Thanks

#429190

The easiest is to apply HTML Conditional to your classes.
https://toolset.com/documentation/user-guides/conditional-html-output-in-views/

If you have any Class in your HTML (maybe on the table, or a div class="") you can call dynamically classA or classB with HTML conditional.

As an example, red if radio A is selected and blue if B is selected:

[wpv-conditional if="( $(wpcf-radio) eq 'A' )"]
  <div class="red">
[/wpv-conditional]
[wpv-conditional if="( $(wpcf-radio) eq 'B' )"]
  <div class="blue">
[/wpv-conditional]

  content here

</div>

And then the CSS in the CSS Editor:

div.red {
  background-color: red;
}
div.blue {
  background-color: blue;
}
#429231

Hi again

I'm almost there but not quite. The three possible values for Field B are 'A', 'B' or 'None of the above'

I've tried the conditional arguments in various ways but get a differing results:-

Whatever the value of Field B, the background is always blue with this code:-

[wpv-conditional if="( $(wpcf-field-b) eq 'None of the above' )"]
<div class="red">
[/wpv-conditional]
[wpv-conditional if="( $(wpcf-field-b) ne 'None of the above' )"]
<div class="blue">
[/wpv-conditional]
[types field='field-b'][/types]
</div>

Whatever the value of Field B, the background is always blue with this code:-

[wpv-conditional if="( $(wpcf-field-b) eq 'None of the above' )"]
<div class="red">
[/wpv-conditional]
[wpv-conditional if="( $(wpcf-field-b) eq 'None of the above' )" evaluate="false"]
<div class="blue">
[/wpv-conditional]
[types field='field-b'][/types]
</div> 

The background is neither red nor blue with this code:-

[wpv-conditional if="( $(wpcf-field-b) eq 'None of the above' )"]
<div class="red">
[/wpv-conditional]
[wpv-conditional if="( $(wpcf-field-b) eq 'A' ) OR ( $(wpcf-field-b) eq 'B' )"]
<div class="blue">
[/wpv-conditional]
[types field='field-b'][/types]
</div> 

I can't think of any other combinations of conditions to try! Is anything jumping out at you?

#429339

This does not make sense.

You say the background is always Blue, but looking at your both first code snippets, this can not be.

Becauase Blue is only true if the value is NOT "None of the above", and then if it IS equal to "None of the above"

So that can not be. Either it is or not, "None of the above".

Are you sure you are having that in the value of the field, and not a number, as it's by default?

Please output those Fields without conditional HTML.

See what they output and then evaluate against them.

Another possible issue is that you actually have the same CSS for both classes.

If you prefer you can grant me access to the system.

I would need to request temporary access (WP-Admin and FTP) to your site
- preferably to a test site where the problem has been replicated if possible -
in order to be of better help and check if some configurations might need to be changed

Your next answer will be private which means only you and I have access to it.

❌ Please backup your database and website ❌

✙ I would, if possible, need access to a site where only a minimal set of Plugins and a default theme is active.
This to avoid eventual compatibility issues with other software.

✙ I would additionally need your permission to de- and re-activate Plugins and the Theme, and to change configurations on the site.
This is also a reason the backup is really important

✙ Please add the Links to:

- The Views Edit Screen

- The corresponding Front End Page/Screen

#430035

I'm glad you agree I'm using the right conditions.

I've gone back over everything once more and realised I needed to set the conditions according to the 'custom field content' (I was using the display text - doh). Must have been ready for a day off!

So sorry - I've got my head round this now and made a note of it. Thanks for your help

This ticket is now closed. If you're a WPML client and need related help, please open a new support ticket.