How to change stlye formatting on header field?

  • Georgeff
    Asked on April 16, 2019 at 2:41 PM
  • Richie JotForm Support
    Replied on April 16, 2019 at 4:11 PM

    I have checked your form and you have used the Header to place your text.

    How to change stlye formatting on header field? Image 1 Screenshot 30

    If you want to copy how the field in your "Payment for Software and services" aligned, you must use the Text element.

    How to change stlye formatting on header field? Image 2 Screenshot 41

    Please give it a try and let us know if this fits your requirements.



  • Georgeff
    Replied on April 17, 2019 at 9:07 AM

    I like the formatting of the Header element better than the formatting of the Text element. Is it possible to use the Text element to create the same look that my Header element now has with text and line spacing?

  • Richie JotForm Support
    Replied on April 17, 2019 at 10:20 AM

    You may add this custom CSS in your Form.


    .form-html ul {
     
        line-height: 1.5em;
        font-size: 1.071em;
    }

    Guide:-How-to-Inject-Custom-CSS-Codes

    Please give it a try and let us know if this fits your requirements.

  • Georgeff
    Replied on April 17, 2019 at 10:36 AM

    Thank you, that helped the line spacing, but can you also make the font in the bottom box match the top box. I like the top box font the best. Thank you.

    1555511766font types Screenshot 10

  • Richie JotForm Support
    Replied on April 17, 2019 at 12:04 PM

    I have checked the HTML and it seems that both are using the same font family and font-style.

    font-family: Lucida Grande, sans-serif;
    font-style: normal;

    Hope this information helps.

    If you need further assistance, let us know.

  • Georgeff
    Replied on April 17, 2019 at 12:44 PM

    Thanks for checking. They sure look different to me. Here is another question...

    1555519471reducespace Screenshot 10

  • Richie JotForm Support
    Replied on April 17, 2019 at 1:52 PM

    I inspected the HTML element of your form to show the CSS rule used for the font and font-family.

    Here is a screenshot:

    How to change stlye formatting on header field? Image 1 Screenshot 20

    You may use this custom CSS to adjust the space between the header and Text element.

    .form-subHeader{
    margin-bottom: -40px;
    }


  • Georgeff
    Replied on April 17, 2019 at 2:18 PM

    Thank you for looking into this. I am not sure how to get to where you were and then wouldn't know if I paste that code on top of, or before or after some other text.Is it possible that you could paste it in there for me? That would be much more efficient use of your time that to try to explain it to me, I think. Thank you.

  • Richie JotForm Support
    Replied on April 17, 2019 at 3:45 PM

    I went ahead and added the CSS in your form.

    For future reference, you may add the CSS after the end ( } )code or bracket.

    How to change stlye formatting on header field? Image 1 Screenshot 20

    Sample:

    .form-html ul {
     
        line-height: 1.5em;
        font-size: 1.071em;
    }

    .form-subHeader{
    margin-bottom: -40px;
    }

    Hope this information helps.



  • Georgeff
    Replied on April 17, 2019 at 3:51 PM

    Thank you for explaining that and for doing it, too. I really appreciate it.