Skip Navigation

[Resolved] Conditional CSS

This support ticket is created 5 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
- - 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 1 reply, has 2 voices.

Last updated by Beda 5 years, 8 months ago.

Assisted by: Beda.

Author
Posts
#1230298

Hi,
I have now been able to solve a lot of things using toolset, and I hope you are able to help me with one of the more complex issues I have before me.

I would like to style single posts in archive and in single post view based on choices made in form groups. If a post is marked A by a radio button it should have a green background, if the radio button is B it should have a red background. Is this possible?

Second best: If the choice of the Radio button is A. The text presenting the value should be highligthed green. If the radio button is checked for B, the text should be red.

#1230360

The simplest is to add the condition right in the HTML class using HTML conditional as described here https://toolset.com/documentation/user-guides/conditional-html-output-in-views/.
The condition should call either or CSS class, and both classes are then defined in the CSS editor.

Something like this:

<div class="[wpv-conditional if='( $(wpcf-text-veranstaltung) eq "1" )']this-class[/wpv-conditional] [wpv-conditional if='( $(wpcf-text-veranstaltung) eq "2" )']that-class[/wpv-conditional]"</div>

Then, in the CSS editor, define your classes:

div .this-class {
//rules
}
div .that-class {
//rules
}

It will depend on the value you save for your field, in above example the field saves either 1 or 2, hence, I can check on those values and depending on what I have set in the post, it'll render this-class or that-class