Hi @kkitran
I hope you are doing well.
For the checked colour you can customise in Form > Appearance > Colour > click to custom and find the radio and select:
https://monosnap.com/file/Riz7tguq5I80bclbDh53kudMCGr8ZY
Regarding the image sizes, currently, we don’t have this option in the interface, it is under development and should be included soon, for now you can use a custom CSS like:
#forminator-module-338 .forminator-field .forminator-radio {width:160px; height:180px; margin-bottom: 22px;}
#forminator-module-338 .forminator-field .forminator-radio .forminator-radio-image {width:160px; height:160px;}
#forminator-module-338 .forminator-field .forminator-radio .forminator-radio-image span {width:150px; height:150px;}
#forminator-module-338 .forminator-field .forminator-radio .forminator-radio-label {margin-top:80px;}
#forminator-module-338 .forminator-field .forminator-radio .forminator-radio-bullet {margin-top:80px;}
#forminator-module-338 .forminator-field .forminator-checkbox {width:160px; height:180px; margin-bottom: 22px;}
#forminator-module-338 .forminator-field .forminator-checkbox .forminator-checkbox-image {width:160px; height:160px;}
#forminator-module-338 .forminator-field .forminator-checkbox .forminator-checkbox-image span {width:150px; height:150px;}
#forminator-module-338 .forminator-field .forminator-checkbox .forminator-checkbox-label {margin-top:80px;}
#forminator-module-338 .forminator-field .forminator-checkbox .forminator-checkbox-box{margin-top:80px;}
Add it to Forminator > Form > Appearance > Custom CSS.
You can play around with values and see which fits better for your form.
Best Regards
Patrick Freitas
For some reason, the color still does not change. I have cleared cache and it remains to be blue. The image border is blue and the background is also default.
Hello @kkitran !
I’ve checked the page and I’m seeing currently that the images when checked have a green border now – so it seems to be working, but please confirm. If the issue is still there, can you provide some additional details as to how you would like this to look in both states? Maybe a screenshot (you can use https://imgur.com to share images here) so we have a better idea how to assist you.
Best regards,
Pawel
I added custom CSS to make it green. I can’t get the steps (progress bar) to be horizontal. For some reason, the progress bar collapses when I padding or put it within a container.
Hi @kkitran
I’ve just visited your site and the pagination at the top of the form was horizontal for me and I didn’t notice and “strange” behavior of it when switching through pages:
I suppose I am missing something though. What exactly should I do there/be looking at to see the issue “live”?
Kind regards,
Adam
Haha, right before you guys reply I end up coming up with some code to make it “work”.
Look at this ugly code:
.forminator-ui.forminator-custom-form[data-design=default] .forminator-checkbox.forminator-checkbox-inline {
margin-right: 0px!important;
}
.forminator-ui.forminator-custom-form[data-design=default] .forminator-checkbox .forminator-checkbox-box~span {
margin-left: 0px!important;
}
.forminator-ui#forminator-module-338.forminator-design--default .forminator-checkbox .forminator-checkbox-image {
background-color: #00000000!important;
border-color: #ebebeb!important;
}
.forminator-ui#forminator-module-338.forminator-design--default .forminator-checkbox input:checked ~ .forminator-checkbox-image, .forminator-ui#forminator-module-338.forminator-design--default .forminator-checkbox:hover .forminator-checkbox-image {
border-color: #16B530!important;
}
.forminator-ui.forminator-custom-form[data-design=default] .forminator-pagination-steps {
display: flex!important;
justify-content: space-around!important;
align-items: center!important;
}
.forminator-ui.forminator-custom-form[data-design=default] .forminator-pagination-steps .forminator-break {
width: 100%!important;
height: 1px!important;
}
.forminator-input, .forminator-input-with-prefix {
border-color: white;
background-color: white;
color: white;
}
.forminator-ui#forminator-module-338.forminator-design--default .forminator-button-next {
font-size: 18px!important;
font-weight: 400!important;
}
It’s working at least.
Hi @kkitran,
We are happy to hear that issue is resolved.
Please keep us posted if you need further help.
Kind regards,
Zafer
