Skip Navigation

[Resolved] Color or Background change using Conditionals in Views

This support ticket is created 3 years, 8 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)

Tagged: 

This topic contains 22 replies, has 2 voices.

Last updated by larryL 3 years, 7 months ago.

Assisted by: Nigel.

Author
Posts
#1723335

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!

#1723409

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.

#1723589

Nigel
Supporter

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

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

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]
#1723781

I'm not seeing any difference with this change.

#1723845

Nigel
Supporter

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

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

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.

#1724121
Capture.PNG

Yep

#1726573

Nigel
Supporter

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

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

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?

#1726653

The css section in the view.

#1726703

Nigel
Supporter

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

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

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?

#1727725

I would have to give you access to the site.

#1727833

Nigel
Supporter

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

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

OK, I've set up a private reply.

#1729029

Nigel
Supporter

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

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

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.

#1729973

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

#1730391

Nigel
Supporter

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

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

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'"

#1731211
Capture.PNG

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

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