Viewing 7 replies - 1 through 7 (of 7 total)
  • Plugin Support Patrick – WPMU DEV Support


    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:

    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

    Thread Starter kkitran


    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.

    Plugin Support Pawel – WPMU DEV Support


    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 to share images here) so we have a better idea how to assist you.

    Best regards,

    Thread Starter kkitran


    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.

    Plugin Support Adam – WPMU DEV Support


    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,

    Thread Starter kkitran


    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.

    Plugin Support Zafer – WPMU DEV Support


    Hi @kkitran,

    We are happy to hear that issue is resolved.
    Please keep us posted if you need further help.

    Kind regards,

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘Image radio border color’ is closed to new replies.