[Resolved] Color or Background change using Conditionals in Views

[Author]

Posts

[larryL]

I've tried to make sense of the walktroughs surrounding conditionals as well as a few of the support articles like

https://toolset.com/forums/topic/apply-different-colour-to-text-output-when-using-wpv-conditional-in-views/

But for whatever reason I'm not understanding what to do.

I would like to change the color of the text in a table (all fields for a specific post) based upon the following scenarios:

1 - RED - if the post has been created in the past 24 hours
2 - YELLOW - if the post is scheduled (based upon a start/end date custom field in the post)
3 - BLUE - issues that remain unresolved (something checked for follow-up or pinned) but not closed.

How can I do this?

Thanks!

[larryL]

I tried

[wpv-conditional if="( '[wpv-post-date format="U"]' eq 'PAST_DAY(int)' )"]
<td class="red">[wpv-post-link]</td>
<td class="red">[wpv-post-author]</td>
<td class="red">[types field="item-start-date"][/types]</td>
<td class="red">[types field="item-end-date"][/types]</td>
<td class="red">[wpv-post-excerpt]</td>
<td class="red">[types field="item-locations"][/types]</td>
<td class="red">[types field="items-statuses"][/types]</td>
<td class="red">[toolset-edit-post-link content_template_slug='edit-kanban-page' target='self']Edit[/toolset-edit-post-link] / [cred-delete-post action='trash' onsuccess='self']Delete[/cred-delete-post]</td>
[/wpv-conditional]
[wpv-conditional if="( '[wpv-post-date format="U"]' lt 'TODAY()' )" ]
<td class="yellow">[wpv-post-link]</td>
<td class="yellow">[wpv-post-author]</td>
<td class="yellow">[types field="item-start-date"][/types]</td>
<td class="yellow">[types field="item-end-date"][/types]</td>
<td class="yellow">[wpv-post-excerpt]</td>
<td class="yellow">[types field="item-locations"][/types]</td>
<td class="yellow">[types field="items-statuses"][/types]</td>
<td class="yellow">[toolset-edit-post-link content_template_slug='edit-kanban-page' target='self']Edit[/toolset-edit-post-link] / [cred-delete-post action='trash' onsuccess='self']Delete[/cred-delete-post]</td>
[/wpv-conditional]

With CSS - and it did not display any change in color.

[Nigel]

Hi Larry

Your first example is nearly right, "int" is supposed to be an integer, so you would enter PAST_DAY(1) to represent one day ago.

Something like this:

          [wpv-conditional if="( '[wpv-post-date format='U']' gte 'PAST_DAY(1)' )"]
          <p>New post within 24 hours</p>
          [/wpv-conditional]
          [wpv-conditional if="( '[wpv-post-date format='U']' gte 'PAST_DAY(1)' )" evaluate="false"]
          <p>Older post</p>
          [/wpv-conditional]

[larryL]

I'm not seeing any difference with this change.

[Nigel]

If you check the front-end with your browser dev tools do the td elements have classes added?

That is, is the problem with the conditional, or with the CSS classes?

On my local test site the example I shared works as expected.

[larryL]

Yep

[Nigel]

Sorry for the delay getting back to you, I had a public holiday yesterday.

So, the conditionals are working correctly, the classes are being added.

It doesn't look like you have any style rules defined for classes such as "red".

How are you adding such CSS rules?

[larryL]

The css section in the view.

[Nigel]

Do you have a link where I can see it on the front-end?

It should be pretty clear in the browser dev tools what style rules are being applied, and whether some other more specific rule is overriding yours.

And what is the CSS you added?

[larryL]

I would have to give you access to the site.

[Nigel]

OK, I've set up a private reply.

[Nigel]

This is your custom CSS:

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

This is your markup:

<tr>
<td>Plano&nbsp;Roadway&nbsp;Check Road (S4)&nbsp;</td>
<td class="red">September 17, 2020</td>
<td class="red">September 22, 2020</td>
... etc...

Your CSS is targeting divs, but the elements you want to target are td elements.

[larryL]

Yeah, that was pretty bone head. But I had tried both ways and it didn't work Please check my modified CSS and loop. Thanks

[Nigel]

You've now updated the markup like so:

<td class="td.red">[types field="item-start-date"][/types]</td>

"td.red" isn't a valid class name.

Revert to the colour class names, e.g.

<td class="red">..</td>
<td class="yellow">..</td>
<td class="blue">..</td>

...and then your CSS rules such as

td.yellow {
  background-color: yellow;
}

will then correctly target "a td element with class of 'yellow'"

[larryL]

Thanks Nigel. One more question - Why is it doing (see attached)?