Clever Colorful Theme: Copy fields - styling doesn't copy though?

  • ssdsforms
    Asked on February 1, 2017 at 6:35 AM

    I want to duplicate fields in my Character Breakfast form, particularly the Child's Name fields - but the styling/ formatting of the fields don't carry over when I do that. And I can't even view the settings for the those fields to copy on to the ones I want to change.

  • seth
    Replied on February 1, 2017 at 7:03 AM

    Hello,

    I cloned and check the form. You are right. The styles can't be copied with the field. This issue belongs to theme. The theme should automatically update the styling code. I am escalating the issue to the owner of the theme. They will update the theme accordingly.

    In the mean time, you can add your own styling code to implement styling to the copied fields. Here is the code that you should inject in the form builder.

    #id_10 {

        width : 460px;

        margin : auto;

        -webkit-border-radius : 10px;

        -moz-border-radius : 10px;

        border-radius : 10px;

        background : rgb(0,183,229);

        background : -moz-linear-gradient(top,  rgba(0,183,229,1) 0%, rgba(0,183,229,1) 100%);

        background : -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,183,229,1)), color-stop(100%,rgba(0,183,229,1)));

        background : -webkit-linear-gradient(top,  rgba(0,183,229,1) 0%,rgba(0,183,229,1) 100%);

        background : -o-linear-gradient(top,  rgba(0,183,229,1) 0%,rgba(0,183,229,1) 100%);

        background : -ms-linear-gradient(top,  rgba(0,183,229,1) 0%,rgba(0,183,229,1) 100%);

        background : linear-gradient(to bottom,  rgba(0,183,229,1) 0%,rgba(0,183,229,1) 100%);

        filter : progid:DXImageTransform.Microsoft.gradient( startColorstr='#00b7e5', endColorstr='#00b7e5',GradientType=0 );

    }

     

    Here is a guide on how to inject CSS code into your forms:

    https://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes

     

    For adding the same styling into other fields, you need to find its id on the console. Then duplicate this code and update the id part and inject the code. Here is a demonstration on finding id on the console. I am using Chrome. Right click on the filed that you want to add styling:

    Clever Colorful Theme: Copy fields   styling doesnt copy though? Image 1 Screenshot 40

    Scroll up to the "li" element on the HTML code and there lies the id of the "li" element:

    Clever Colorful Theme: Copy fields   styling doesnt copy though? Image 2 Screenshot 51

    Here how it looks like after injecting the CSS code to id_10:

    Clever Colorful Theme: Copy fields   styling doesnt copy though? Image 3 Screenshot 62

     

    You will be updated about the issue when it is fixed.

    Thank you for your understanding.

    Regards.

     

     

  • PeraltaOutreach
    Replied on June 21, 2017 at 1:53 PM

    i was having the same issue with this form. I tried the solution above. It worked correctly in the "build" area.  However, once published, the form reverted back to it's original styling.

  • David JotForm Support
    Replied on June 21, 2017 at 3:03 PM

    The theme is specific to a single form and the code referenced in this thread is specific to the users form.  You would need to apply new styling to any new fields added in the form.  If you need help with doing so, please create a new thread letting us know the form you are using and what needs to be updated, we will be happy to have a look:

    https://www.jotform.com/contact