Color backgrounds to different sections of a form

  • BABSbarbershop
    Asked on August 17, 2018 at 1:26 PM

    Is it possible please to have different color backgrounds to each block of 3 in the tickets area on this form?

    ie : 1st 3 red, 2nd 3 green, 3rd 3 blue, etc. 


  • Nik_C
    Replied on August 17, 2018 at 2:41 PM

    Yes, that is doable but could you please specify which colors you want for which sections so we can give you the custom CSS, it is not doable otherwise.

    I wasn't sure which section is first, which second and which third.

    Please advise.

    Thank you!

  • BABSbarbershop
    Replied on August 18, 2018 at 5:55 AM

    1st block of 3 products - REGISTRATION 3 or 4 DAYS - #dbe9d8 

    2nd block of  3 products - REGISTRATION 2 DAYS - #c2d4d8 

    3rd block of  3 products REGISTRATION  1 DAY - #f2efe8

    4th block of  3 products SHOW TICKETS FRIDAY EVENING - #dbe9d8

    5th block of 3 products SHOW TICKETS SATURDAY EVENING - #c2d4d8

    6th block of 3 products SHOW TICKETS SUNDAY EVENING - #f2efe8

    Thank you so much for this

    Presumably I could change the hex code in the CSS if needed ? 

  • Mike_G JotForm Support
    Replied on August 18, 2018 at 9:07 AM

    Thank you for the additional information. Please give me some time — I'll work on a solution and get back to you as soon as possible.

  • Mike_G JotForm Support
    Replied on August 18, 2018 at 1:27 PM

    I would like to apologize for any delays.

    Below are the CSS codes you need to achieve your requirements with your form.

    /*1st block of 3 products - REGISTRATION 3 or 4 DAYS*/

    .form-product-item:nth-child(-n+6) {

        background: #dbe9d8 !important;

    }

    /*2nd block of 3 products - REGISTRATION 2 DAYS*/

    .form-product-item:nth-child(n+7):nth-child(-n+12) {

        background: #c2d4d8 !important;

    }

    /*3rd block of 3 products REGISTRATION 1 DAY*/

    .form-product-item:nth-child(n+13):nth-child(-n+18) {

        background: #f2efe8 !important;

    }

    /*4th block of 3 products SHOW TICKETS FRIDAY EVENING*/

    .form-product-item:nth-child(n+19):nth-child(-n+24) {

        background: #dbe9d8 !important;

    }

    /*5th block of 3 products SHOW TICKETS SATURDAY EVENING*/

    .form-product-item:nth-child(n+25):nth-child(-n+30) {

        background: #c2d4d8 !important;

    }

    /*6th block of 3 products SHOW TICKETS SUNDAY EVENING*/

    .form-product-item:nth-child(n+31):nth-child(-n+36) {

        background: #f2efe8 !important;

    }

    How-to-Inject-Custom-CSS-Codes

    1534613165t13 22 02 Screenshot 10

    You can update the hex color codes to your preference.

    If you have other questions or concerns, please do not hesitate to let us know.

  • BABSbarbershop
    Replied on August 19, 2018 at 4:50 AM

    Thank you, this works well apart from the 1st block, and I can't see why.

    Can you have a look please?

    Many thanks

  • BABSbarbershop
    Replied on August 19, 2018 at 6:45 AM

    Its ok now, I have fixed it, needed a / at the beginning of 1st block which I must have left off when I copied the code.

    Thanks very much for this - brilliant support from you guys