How to change just one form field CSS to match Free Text Header

  • Profile Image
    unruhfurniture
    Asked on November 27, 2017 at 09:15 AM

    See attached screenshot for question.


    Here is the Free Text HTML:

    <p><span style="font-size: 18pt;"><strong>Maintenance Position</strong></span></p><p><strong>Timeline to Hire:&nbsp;</strong>Looking&nbsp;to fill position immediatly.</p><p><strong>Hours Per Week: </strong>25 to 40 based on candidate.</p><p><strong>Compensation: </strong>$12 to $15 based on candidate.</p><p><strong>Job Description: </strong>The Maintenance Position at Unruh&nbsp;is a crucial&nbsp;role that supports both the members in the office (4 employees) and the members in shop production (13 employees), allowing them to be as efficiant as possible in their daily tasks. The maintenance position is responsible for cleaning the&nbsp;shop, showroom, and outside of the property. This person drives the truck and trailer to the dump several times per week, performs rutine maintenance on the machinery, organizes the inventory, and does a variety of other tasks that both keep Unruh looking great and perfoming effeciantly.</p><p><strong>Specific Requirements:&nbsp;</strong></p><ul><li>Must be able (or able to learn quickly) to drive a F-250 and Trailer.</li><li>Must be able to lift trash cans of scrap</li><li>Must be a detailed cleaner</li><li>Must have good time management skills</li><li>Must have a great attitude, and willing to make new friends at Unruh :)</li></ul>


    And here is the form CSS:



    .form-label.form-label-auto {

        display : block;

        float : none;

        text-align : left;

        width : 100%;

    }


    .form-required {

        color : #ffffff;

    }


    .form-line-error .form-error-message {

        background-color : #1D3648;

    }


    .form-line-error .form-error-message .form-error-arrow {

        border-bottom-color : #1D3648;

    }


    .form-line-error {

        background-color : #ffffff;

    }


    body, .form-all {

        background : none !important;

    }


    .form-all {

        margin-left : 100 !important;

    }


    .jotform-form {

        padding : 0!important;

    }


    .form-line-error .form-error-message {

        background-color : none;

    }


    .form-line-error .form-error-message .form-error-arrow {

        border-bottom-color : #ffffff;

    }


    .form-line-error {

        background-color : #ffffff;

    }


    .supernova .form-all {

        border : 0 !important;

        box-shadow : none !important;

        -moz-box-shadow : none !important;

        -webkit-box-shadow : none !important;

    }


    .form-line.form-line-active {

        background-color : #ffffff;

    }


    .form-buttons-wrapper {


    }


    .form-pagebreak {

        border-top : none;

    }


    .form-pagebreak {

        border-top : none;

        background : none;

    }


    #form-pagebreak-back_16 {

        display : none;

    }


    input#input_18_1000,  input#input_18_1000 + label {

        display : none;

    }


    .form-submit-button:hover {

        background : #E5C181 !important;

    }


    .form-submit-button:active {

        -moz-box-shadow : 0 0px #000 inset;

        -webkit-box-shadow : 0 0px #000 inset;

        box-shadow : 0 0px #000 inset;

    }



  • Profile Image
    Richie_P
    Answered on November 27, 2017 at 09:43 AM

    Hi,

    You can use this custom css:

    div#text_24.form-html p span strong{
      font-size: 14pt; /* you can adjust the size depending on your ideal preference*/
    }

    Here is a guide in Injecting custom css:

    https://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes

    Best Regards.