Formatting Individual Headlings

  • dlasson
    Asked on August 6, 2015 at 10:01 AM

    Am I able to apply formatting (color, font) changes to one heading only - as opposed to the entire form?

    Thanks! 

  • Boris
    Replied on August 6, 2015 at 10:49 AM

    Yes, you can do so by applying custom CSS to your form. Don't worry, it is not as hard is it may seem at first. :)

    First, we need to find our the selector we will be using in the custom CSS. You can find it our by right-clicking on the header that you wish to edit, and select Inspect Element from the popup that opens.

    For example, let's assume that you would like to edit this form:

    https://www.jotform.com/52116045767152

    We find a heading that we wish to edit, for example "Vision - Avesis", right-click on it, and select Inspect Element.

    Formatting Individual Headlings Image 1 Screenshot 50

    There, a panel will open, where we will see an ID that we can use, starting with a hashtag character.

    Formatting Individual Headlings Image 2 Screenshot 61

    So the selector to use for this header is #header_36 and the code to change its size and color would be this:

    #header_36 {
      color: red !important;
      font-size: 1em !important;
    }

    Code can be injected either by following the above linked guide, or by using the Designer and pasting the code directly into the textbox under the CSS tab.

    Formatting Individual Headlings Image 3 Screenshot 72

    Formatting Individual Headlings Image 4 Screenshot 83

    You can repeat the same steps for any headers on your forms, only the number will be different - #header_36, #header_55, #header_1...

    Please let us know if you need help styling any of your headers, and we will be happy to help you with your custom CSS code. :)

  • dlasson
    Replied on August 6, 2015 at 2:03 PM

    Thanks so much. 

    I did something wrong and cannot correct it. I want the text color in each text box to be black. And the "Total Deductions" heading (towards the end of the form) to be the same font as the other headings, and in green.

    Thanks.

  • Ben
    Replied on August 6, 2015 at 2:57 PM

    I presume that this is related to this form as mentioned above by my colleague: https://www.jotform.com/52116045767152

    Looking at it and the header that you have mentioned, the issue is happening because of the following code:

    #header_75 {
        color: red !important;
        font-size: 1em !important;
    }

    I have removed that code from your form for you so that you can continue as usually.

    I would only like to mention that what my colleague above had said is true, but when using ID of the element (text appearing after #) you do not need to use !important or maybe only need use it some specific cases.

    Also, all code that you add by following the steps here: Inject Custom CSS Codes can be removed by going into the same field at the later time and locating them.

    I suggest adding the new codes under all the other, so that makes it even easier to find if so needed, but I would like to also suggest this guide: How to View Form Revision History - If you ever find yourself in a position that you want to revert a change.

  • dlasson
    Replied on August 6, 2015 at 3:30 PM

    I am sorry. I am having trouble with the codes (getting error messages) as I am not familiar with coding syntax. If you could just change the "Total Deductions" heading to green, that would be great. Thanks!

  • Ben
    Replied on August 6, 2015 at 4:03 PM

    Oh yes, I see now that you have mentioned it in your previous reply as well.

    I have changed it to be green for you.

    I did so by adding the following CSS to your jotform:

    #header_75 {
        color: green;
    }

    Do let us know how it looks and if you wish to have it in some other color, feel free to let us know the color and we can set it up like that for you.

  • dlasson
    Replied on August 7, 2015 at 12:13 PM

    It looks great. Thanks! You guys are wonderful.

  • Charlie
    Replied on August 7, 2015 at 1:13 PM

    Glad to hear that my colleagues were able to help you, and thank you for the kind words, we appreciate it.

    If you needed any assistance again, please do not hesitate to open a new thread here in the forum.

    Thank you.