[Resolved] radio input, different css for each selection

[Author]

Posts

[massimoS527]

I have a user form with radio field: hidden link
the radio field basically loads the different background for each choice made.

you see:
hidden link
hidden link

I also need to change the position of "photo" - "creature name" - "dedication",
according to the choice of the radio field.
The only way is to load a different CSS for each selection. how can I do ? or do you have other ideas?

I hope I have explained well!

[Shane]

Hi Massimo,

Thank you for contacting our support forum.

What you can do is to store the css classes in the radio field. Then when you are loading the page for the post you will pass that types code into the css class option like this.

<div class="[types field='radio-field'][/types]"

Then you can specify the css information so it will only load that css base on the class selected.
Please let me know if this helps.
Thanks,
Shane

[massimoS527]

Hi Shane, the code you wrote to me where I enter it?
(see screenshot of my radio field)

[massimoS527]

I already have this code to pass

<em><u>hidden link</u></em>

how do I insert in code that you gave me?

<div class="[types field='radio-field'][/types]"

[Shane]

Hi Massimo,

Would you mind providing me with admin access to the website ?

The private fields will be enabled for your next response. Also the images will they be some background color ?

I think i'm not understanding what you want to achieve fully.

Thanks,
Shane

[Shane]

Hi Massimo,

Awesome thanks so I was on the right track.

So what you need to do is to create a Types field for this to hold the choices.

So you will have this

Choice1 scelta1
Choice2 scelta2
Choice3 scelta3

So using your example Choice1 would be the name of the choice and scelta1 would be the value inside that choice.

Now when you add this then you can add it to the CRED form so that the users are presented this option on the frontend.

On the display page side of this, you will normally want to display their choice by a shortcode similar to this.

My Option = [types field='radio-field'][/types]

However instead of displaying it like that you want to use the option they chose as a class for the div to style based on the option they chose.

So you will add the class dynamically like this.

<div class="[types field='radio-field'][/types]"></div>

Please let me know if this is all clear for you and if there are any confusions.

Thanks,
Shane

[massimoS527]

there are confusions.
Can you give me a practical example?

I do not understand how to enter the code in the radio field !

<div class="[types field='radio-field'][/types]"></div>

this is the code of the CRED module that calls the radio input field

<div class="form-group">
		<label>[wpml-string context='cred-form-aggiungi creatura-348' name='layout ricordo']layout[/wpml-string]</label>
		[cred_field field='layout-ricordo' post='creatura' value='' urlparam='' output='bootstrap']
	</div>

[Shane]

Hi Massimo,

I hope this provides a better explanation.

So I went in and created a field called Layout Choice which is a radio button that allows the user to select a color, this is just to show you what I'm referring to.

Secondly I added this field to your form see screenshot.

After which I updated the layout to add the field in the form <div class="[types field='radio-field'][/types]"></div>
See Screenshot

Finally The code is now rendered on the frontend with the appropriate class that was set in the options. See Screenshot

So if the user selects red in the form the class will be red.

Please let me know if this clears things up for you.

Thanks,
Shane

[massimoS527]

Shane I saw what you did.
I do not understand however how this can position the elements: "titolo-creatura" - "prima-foto" - "dedica", etc. in a different way from every choice of the radio field

Example: from the radio field a user chooses the "red" class.
this class (red) must make sure that the "creature title" is positioned
top: 10px; - "prima-foto": top: 40px;

yellow class must make sure that the "titolo-creatura" is positioned
top: 40px; - "prima-foto": top: 60px;

the positioning is done by Css in the CSS and JS layout:

#blocco-creatura { 
    position: relative;
    width:800px;
    height:600px;
    background-repeat: no-repeat;
    background-size: contain;
}

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

.prima-foto {  margin:auto;
  position: relative;
  top: 15px;
  left: 200px;
}

.dedica { 
  font: italic bold 30px Georgia, serif; 
  position: absolute;
   top:415px;    
   left: 260px;
   color:#d67f03;
}

.dedica-seconda { 
  font: italic bold 30px Georgia, serif; 
  position: absolute;
   top:450px;    
   left: 300px;
   color:#d67f03;
}


.data-decesso {
   position: absolute;
   top:550px;    
   left: 500px;
  font-size:20px;
  color:#834f05;
}

[Shane]

Hi Massimo,

To do the changes for a specific class you will need to write the css like this.

Lets say you want the changes to only apply when the user selects red. Using the .prima-foto class as an example this code below will only apply if the user selects red

.red .prima-foto {  margin:auto;
  position: relative;
  top: 15px;
  left: 200px;
}

Please let me know if this example helps.
Thanks,
Shane

[massimoS527]

I have adapted the changes only to the "titolo-creatura"
there must be a small mistake because the "titolo-creatura" does not appear:

Page-Layout:

<div class="titolo-creatura" class='[types field="layout-ricordo"][/types]'[wpv-post-title]/>

Css e Js layout:

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

Radio input (see attached image)

I do not understand what I'm wrong !

[massimoS527]

must be a problem of: "/ '

[Shane]

Hi Massimo,

I tried using this shortcode [wpv-post-field name='wpcf-layout-ricordo'] instead of the types shortcode to get the actual value of the field .

Please let me know if this helps.
Thanks,
Shane

[massimoS527]

Shane, I think .... I have I can not explain well or you did not understand !!!

I need (as I explained) to have a different CSS class based on the selection of the radio field. But in practice this does not happen.

Because ?

[Shane]

Hi Massimo,

This is what is happening currently in your test.

If the user selects option 1 on your dropdown and option 1 you use the name stone_1.

Now this class is then assign to the div because of how we are displaying it here in layout

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

If you check the html of any post that has that option selected you will see that they have the stone_1 class assigned to it. This is what I believe you want, setting a custom class based on the option.

Thanks,
Shane