Highlight widget's text

  • Farren_Maria
    Asked on January 29, 2021 at 2:46 PM

    i have caluculations and i wnat to highlight the text for example "Total Amount Needed", i cant figure out the highlight widget

  • Lorenz JotForm Support
    Replied on January 29, 2021 at 8:25 PM

    Greetings,

    Is this the form https://www.jotform.com/203493984454062 in question? May we know the field you want to highlight the text? I thought its the "Total Amount Needed", but I can't seem to find that in your form.

    We will wait for your response.

  • Farren_Maria
    Replied on January 30, 2021 at 3:29 PM

    YEs that is the document and specifically i am looking to highlight on Page 4 of my form the following:

    • A. Total expenses (add a through c)
    • B. Total family contribution (add d through h)
    • C. Total anticipated aid (add i through m)
    • D. Total family/student contribution plus aid (add B plus C):
    • E. Amount Needed (A minus D)

    thank you!

  • Ariel JotForm Support
    Replied on January 31, 2021 at 5:36 AM

    Hello there,

    Try injecting this code into your form's CSS:

    #label_129, #label_136, #label_149, #label_150, #label_151 {
        background-color: #ffaaaa;
    }
    li[data-type="control_calculation"] {
        display: flex;
        flex-direction: column;
    }
    li[data-type="control_calculation"] label {
        width: auto !important;
    }

    Once applied, it should look something like so:

    161208915120210131 183140 Screenshot 10

    Remember to view the form in "Live mode" to see the changes.

    Change the value of the background-color to your liking. Here's a color picker in case you need one.

    Let us know if you need further assistance.

    Related Guide: How to Inject Custom CSS Codes

  • Farren_Maria
    Replied on February 1, 2021 at 10:20 AM

    thanks, i am a novice, where do i find the forms CSS? also re: background color, if i wanted a yellow highlight, what would i do?


    thanks


  • Ariel JotForm Support
    Replied on February 1, 2021 at 12:42 PM

    Hi,

    You can put the codes here:

    inject custom css Screenshot 10

    Set the background-color to "yellow" to make it so:

    #label_129, #label_136, #label_149, #label_150, #label_151 {
        background-color: yellow;
    }

    If you need further assistance, let us know.

    Related Guide: How to Inject Custom CSS Codes