Skip Navigation

[Resolved] radio input, different css for each selection

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

Problem:

The issue here that the customer wanted to dynamically allocate classes to a div based on the checkbox that the user selected when creating his/her post from CRED.

Solution:

To do this you will need to create a selectable type of Custom Field such as Checkboxes, Radio Buttons or Select Field.

From here you will need to set the value of each of the field to a class name that you would like.

Then when the user selects the option they want then you will need to assign that class to the div by doing this.

<div class="[wpv-post-field name='wpcf-layout-ricordo']">

The customer also provided a guide here @https://toolset.com/forums/topic/radio-input-different-css-for-each-selection/page/2/#post-612157

This support ticket is created 6 years, 10 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.

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
- 9:00 – 12:00 9:00 – 12:00 9:00 – 12:00 9:00 – 12:00 9:00 – 12:00 -
- 13:00 – 18:00 13:00 – 18:00 13:00 – 18:00 14:00 – 18:00 13:00 – 18:00 -

Supporter timezone: America/Jamaica (GMT-05:00)

This topic contains 15 replies, has 2 voices.

Last updated by massimoS527 6 years, 10 months ago.

Assisted by: Shane.

Author
Posts
#612157
Screenshot-2018-2-2 Modifica layout ‹ Riplove — WordPress4.png
Screenshot-2018-2-2 CSS e JS di Layouts ‹ Riplove — WordPress3.png
Screenshot-2018-2-2 Modifica gruppo ‹ Riplove — WordPress2.png
Screenshot-2018-2-2 Modifica gruppo ‹ Riplove — WordPress.png

I created a solution guide, follow the sequence of screenshots:

1-2 ) insert in the radio-field the names that will form the CSS class

3) In CSS and JS of Layout I insert the CSS code according to my needs

4) in the Layout side (page-layout-etc) where you want your job to be displayed as shown in image 4

in practice, in your CRED module, enter the radio field and, based on the selection, call up a different Class. obviously in the CSS layout section you have to create the classes with the names you have entered in the radio field.

example:

.titolo-creatura-wood_2 { 
  
  position:absolute;
  top: 5px;
  left: 10px;
  text-align:center;
  font-size:40px;
  color:#d67f03;
  margin-bottom:30px;
}

.titolo-creatura-wood_3 { 
  
  position:absolute;
  top: 5px;
  left: 10px;
  text-align:center;
  font-size:40px;
  color:#d67f03;
  margin-bottom:30px;
}

Hello to all