-
BABSbarbershopAsked 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_CReplied 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!
-
BABSbarbershopReplied 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 SupportReplied 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 SupportReplied 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
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.
-
BABSbarbershopReplied 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
-
BABSbarbershopReplied 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