How to fix my title colors

  • Profile Image
    c.u.b.s.homeschool
    Asked on June 11, 2020 at 10:36 AM

     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.

  • Profile Image
    Jovanne_A
    Answered on June 11, 2020 at 10:58 AM

    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.

  • Profile Image
    c.u.b.s.homeschool
    Answered on June 11, 2020 at 11:09 AM

    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


  • Profile Image
    Jovanne_A
    Answered on June 11, 2020 at 11:46 AM

    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; }



    15918903323.png




    Here is a guide on how to inject custom CSS codesHow-to-Inject-Custom-CSS-Codes

    Let me know if you need further assistance.

  • Profile Image
    Bojan_J
    Answered on June 11, 2020 at 02:22 PM

    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. 

  • Profile Image
    Bojan_J
    Answered on June 12, 2020 at 06:47 AM

    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.


  • Profile Image
    c.u.b.s.homeschool
    Answered on June 12, 2020 at 09:16 AM

    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. :)

  • Profile Image
    Bojan_J
    Answered on June 12, 2020 at 10:16 AM

    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. 

  • Profile Image
    c.u.b.s.homeschool
    Answered on June 12, 2020 at 11:07 AM

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

  • Profile Image
    Jovanne_A
    Answered on June 12, 2020 at 11:09 AM

    On behalf of our team, you are most welcome.

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