How to Customize Text Appearance in Slider with Calculated Result Widget?

  • Noahshootingclinics
    Asked on January 31, 2019 at 4:47 PM
    You have been super helpful and I have the form exactly the way I want it,
    it is working great however one small little detail at the bottom:
    Where it says “Based on your estimates how can I enlarge the Result or
    dollars and make that Bold and in A different color?
  • Donald_H
    Replied on January 31, 2019 at 5:09 PM

    Add the following CSS to the Widget within the custom CSS tab. Refer to this guide: How to Inject CSS Code to Widgets

    #result {

    font-size: 30px !important;

    color:#a72222 !important;

    padding-top: 20px;

    }

    The font size is 30px, text color is #a72222 and top spacing is 20px. These values can be changed as required. I have cloned your form here and made the changes: https://www.jotform.com/90307093097963

    1548972477Selection 305 Screenshot 10


  • Noahshootingclinics
    Replied on January 31, 2019 at 6:43 PM
    Ok perfect but let’s say I want it all black font and maybe bold except the
    dollar amount
    ...
  • Donald_H
    Replied on January 31, 2019 at 8:08 PM

    You can update the CSS as follows:

    #result {

    font-size: 30px !important;

    color: !important;

    padding-top: 20px;

    }

    #result b {

        font-size: 30px !important;

        color: #a72222 !important;

        padding-top: 20px;

    }

    Here is the cloned form with the CSS applied: https://www.jotform.com/90307093097963. You can change the color and font-size of the text or the dollar amount by modifying the values in the CSS above.



  • Noahshootingclinics
    Replied on February 1, 2019 at 10:43 AM
    This support has been absolutely amazing!!!!! Thank you so much.
    ...