CSS application enquiry: Alter color of Section Collapse box and changing question spacing for specific questions

  • Profile Image
    QCECDataCollections
    Asked on November 06, 2017 at 01:56 AM

    Hello JotForm support,

    Hope everything is well.

    Just want to shed some light from you on tricks to color the section collapse box which I hope it can be done via CSS. Talking about that, can you also share some tricks on locating the right element (e.g. id / class) in order to effectively apply CSS on? Last but not least, I would also like to seek ways to change the question spacing between some of the questions apart from having a generic question spacing for the others.

    Thank you very much in advance.

    Regards,

    QCEC

  • Profile Image
    candy
    Answered on November 06, 2017 at 05:29 AM

    Thank you for contacting us. 

    I have cloned your form named "Middle Leaders in Catholic Secondary Schools Review" in order to test some CSS injections as an example.

    Regarding section collapse, you can inject following CSS codes to the form in order to change the colors of section collapse as you can see in the following screenshot below:

    .form-collapse-table{

    border-left-color: rgb(153, 0, 204) !important;

    border-top-color: rgb(153, 0, 204) !important;

    border-right-color: rgb(153, 0, 204) !important;

    border-bottom-color: rgb(153, 0, 204) !important;

    color: rgb(102, 0, 102) !important;

    background:  rgb(204, 153, 255) !important;

    }

    1509963721Screen Shot 2017-11-06 at 1.21

    You can use an online HTML color picker in order to select some colors. I have used this one: https://www.w3schools.com/colors/colors_picker.asp 

    Regarding locating elements, you should use margin or padding tags in CSS codes as you can see the screenshot below:

    1509963948Screen_Shot_2017-11-06_at_1_24

    Regarding vertical alignment between form fields, you should use padding or margin options again as seen below:

    1509964118Screen_Shot_2017-11-06_at_1_27

    For detailed information regarding injecting additional CSS codes to the form, please check the guides below:

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

    https://www.jotform.com/help/428-How-to-Inject-CSS-Codes-to-Widgets

    https://www.jotform.com/help/75-Customize-Your-Form-Using-Custom-CSS-Codes

    I hope this helps.

  • Profile Image
    QCECDataCollections
    Answered on November 06, 2017 at 08:48 PM

    Hello Candy,

    You guys are terrific as always, never fail getting the perfect solution seeking help from you.

    Thanks a million. :)

    Regards,

    QCEC