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

    (@wpmudevsupport12)

    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

    Thread Starter kkitran

    (@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

    (@wpmudev-support9)

    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

    Thread Starter kkitran

    (@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

    (@wpmudev-support8)

    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:

    2022-07-18_18-38-40

    I suppose I am missing something though. What exactly should I do there/be looking at to see the issue “live”?

    Kind regards,
    Adam

    Thread Starter kkitran

    (@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

    (@wpmudevsupport15)

    Hi @kkitran,

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

    Kind regards,
    Zafer

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