How to fix my title colors

 I am having trouble with my form. in the build mode it looks great, but when I do preview and start selecting options and then I hit preview answers all the colors from my titles and things turn black or change to a different color. How can I fix this. I have my css code written but maybe it's messed up.

Hi, thank you for reaching out to us.

Can you please provide us a screenshot of the issue?
And also provide us what color you would like the titles to have?


Follow this guide on how to include images in your reply.
https://www.jotform.com/help/438-How-to-Post-Screenshots-to-Our-Support-Forum


We look forward to your response.

this is how it looks when I hit preview answers. I don't want it to look like this.

https://www.jotform.com/build/201576047527053/settings/general#preview

This is how I want it to look.

https://www.jotform.com/build/201576047527053

thank you

Hi, please insert this custom CSS code:

label#label_input_44_0, label#label_input_44_1, label#label_input_44_2 {

    font-size: 22px !important;

    font-weight: bolder!important; }

div#previewContainer ul li:nth-child(3) > div {

    color: #14a3f4; }

#previewContainer > ul > li:nth-child(5) > div.label_i, #previewContainer > ul > li:nth-child(6) > div.label_i {

    color: #002fff !important; }

div#previewContainer ul li:nth-child(4) > div.value , div#previewContainer ul li:nth-child(7) > div.value{

    color: #14a3f4; }

#previewContainer > ul > li:nth-child(8) > div.label_i, #previewContainer > ul > li:nth-child(9) > div.label_i {

    color: #ff008f !important; }

#previewContainer > ul > li:nth-child(10) > div.label_i, #previewContainer > ul > li:nth-child(11) > div.label_i {

    color: #002fff !important; }

#previewContainer > ul > li:nth-child(12) > div.label_i, #previewContainer > ul > li:nth-child(13) > div.label_i {

    color: #24c169 !important; }








Here is a guide on how to inject custom CSS codes: How-to-Inject-Custom-CSS-Codes

Let me know if you need further assistance.

this didn't actually work. here is my current code not sure what I did wrong. 

.form-label.form-label-top {

}

#label_3 {

    color : #2b38f4;

}

#label_4 {

    color : #3f00ff;

}

#label_14 {

    color : #ff008f;

}

#label_17 {

    color : #ff008f;

}

#label_15 {

    color : #002fff;

}

.form-section.page-section {

}

#label_18 {

    color : #002fff;

}

.form-line.form-line-column.form-col-3 {

}

#label_16 {

    color : #24c169;

}

#label_19 {

    color : #24c169;

}

div#previewContainer ul li:first-child {

    color : blue !important;

}

div#previewContainer ul li:nth-child(2) div:first-child {

    color : blue !important;

}

div#previewContainer ul li:nth-child(3) div:first-child {

    color : blue !important;

}

div#previewContainer ul li:nth-child(4) {

    color : blue !important;

}

#previewContainer > ul > li:nth-child(5) > div.label_i,

#previewContainer > ul > li:nth-child(6) > div.label_i {

    color : #ff008f !important;

}

#previewContainer > ul > li:nth-child(7) > div.label_i,

#previewContainer > ul > li:nth-child(8) > div.label_i {

    color : #002fff !important;

}

#previewContainer > ul > li:nth-child(9) > div.label_i,

#previewContainer > ul > li:nth-child(10) > div.label_i {

    color : #24c169 !important;

}

#label_44 {

    color : #4702df;

}

#label_46 {

    color : #ff008f !important;

}

#label_47 {

    color : #002fff;

}

#label_48 {

    color : #24c169;

}

label#label_input_44_0, label#label_input_44_1, label#label_input_44_2 {

    font-size : 22px !important;

    font-weight : bolder!important;

}

div#previewContainer ul li:nth-child(3) > div {

    color : #14a3f4;

}

#previewContainer > ul > li:nth-child(5) > div.label_i, #previewContainer > ul > li:nth-child(6) > div.label_i {

    color : #002fff !important;

}

div#previewContainer ul li:nth-child(4) > div.value , div#previewContainer ul li:nth-child(7) > div.value {

    color : #14a3f4;

}

#previewContainer > ul > li:nth-child(8) > div.label_i, #previewContainer > ul > li:nth-child(9) > div.label_i {

    color : #ff008f !important;

}

#previewContainer > ul > li:nth-child(10) > div.label_i, #previewContainer > ul > li:nth-child(11) > div.label_i {

    color : #002fff !important;

}

#previewContainer > ul > li:nth-child(12) > div.label_i, #previewContainer > ul > li:nth-child(13) > div.label_i {

    color : #24c169 !important;

}

.form-input-wide div {

}

This is what I am looking for:

1.Sub list-color code-color : #D05340 

2.Select the hour or hours to see avaible subs-color : #2b28f4;

3.9am,10am,11am options-black bold

4.9 Am Sub-color : #ff008f (names/phone# in black)

5.10 am sub- color : #f4cb1a;(name/phone# in black)

6.11 am sub-color : #24c169; (name/phone# in black)

7.Sub Request Form Header- color : #D05340;

8.Name title-color : #2b38f4; (actual name black)

9. Date title-color : #2b38f4; ( actualy date in black)

10.select the class & sub below for each hour or hours a sub is needed-color : #D05340;

11.9 am class & 9 am Sub titles-color : #ff008f; ( names in black)

12. 10 am class & 10 am sub titles-color : #f4cb1a; ( names in black)

13. 11 am class & 11 am sub title- color : #24c169; (names in black)

Greetings and thank you for your reply.

Please allow me some time to work on the solution to your problem.

As soon as I have a solution for you, I will get back to you.

Thank you for your patience. 

Greetings and thank you for your patience.

We apologize for the delay.

Please add the following CSS code to your form, instead of the previous one:

div#previewContainer ul li[data-qid="45"] {
    color : #D05340  !important;
}
div#previewContainer ul li[data-qid="44"] .label_i {
    color : #2b28f4 !important;
}
div#previewContainer ul li[data-qid="44"] .value {
    color : black !important;
    font-weight: 700 !important;
}
div#previewContainer ul li[data-qid="46"] .label_i {
    color: #ff008f !important;
}
div#previewContainer ul li[data-qid="46"] .value {
    color : black !important;
}
div#previewContainer ul li[data-qid="47"] .label_i{
    color : #f4cb1a !important;
}
div#previewContainer ul li[data-qid="47"] .value {
    color : black !important;
}
div#previewContainer ul li[data-qid="48"] .label_i {
    color : #24c169 !important;
}
div#previewContainer ul li[data-qid="48"] .value {
    color : black !important;
}
div#previewContainer ul li[data-qid="1"] {
    color : #D05340 !important;
}
div#previewContainer ul li[data-qid="3"] .label_i {
    color : #2b38f4 !important;
}
div#previewContainer ul li[data-qid="3"] .value {
    color : black !important;
}
div#previewContainer ul li[data-qid="4"] .label_i {
    color : #2b38f4 !important;
}
div#previewContainer ul li[data-qid="4"] .value {
    color : black !important;
}
div#previewContainer ul li[data-qid="23"] {
    color : #D05340 !important;
}
div#previewContainer ul li[data-qid="14"] .label_i {
    color : #ff008f !important;
}
div#previewContainer ul li[data-qid="14"] .value {
    color : black !important;
}
div#previewContainer ul li[data-qid="17"] .label_i {
    color : #ff008f !important;
}
div#previewContainer ul li[data-qid="17"] .value {
    color : black !important;
}
div#previewContainer ul li[data-qid="15"] .label_i {
    color : #f4cb1a !important;
}
div#previewContainer ul li[data-qid="15"] .value {
    color : black !important;
}
div#previewContainer ul li[data-qid="18"] .label_i {
    color : #f4cb1a !important;
}
div#previewContainer ul li[data-qid="18"] .value {
    color : black !important;
}
div#previewContainer ul li[data-qid="16"] .label_i {
    color : #24c169 !important;
}
div#previewContainer ul li[data-qid="16"] .value {
    color : black !important;
}
div#previewContainer ul li[data-qid="19"] .label_i {
    color : #24c169 !important;
}
div#previewContainer ul li[data-qid="19"] .value {
    color : black !important;
}

Please let us know if this solution works for you.

Thank you for working on this. So it worked in the sense that when I hit preview answers all my colors are there and the form looks great. The only problem is, is that I wanted all those colors to be there as people are filling out the form. How would i go about doing that?

thank you again for your help. :)

Thank you for your reply

I have checked your form, and it looks like only the form headers do not have the correct colors. After inspecting your CSS, it looks like you already have a style for this. However, the theme's CSS is overwriting your rule. To resolve this, you need to add !important, at the end of the 156th line:

Please let us know if this resolved your problem. 

thank you. I was able to fix it. I appreciate all your help. :) 

On behalf of our team, you are most welcome.

If you have any other concerns, please don't hesitate to reach out.