Custom CSS for "Heading" tool

  • Profile Image
    bkurniawan
    Asked on September 08, 2014 at 11:56 AM

    Is there a way to add custom css to the "Heading" tool? I don't see a custom css field for it. Any suggestions are welcome. Thanks.

  • Profile Image
    ashwin_d
    Answered on September 08, 2014 at 12:37 PM

    Hello bkurniawan,

    Yes it is possible to add custom css code for form heading. What changes you want to make through css code?

    The css class of heading field are "form-header" and "form-subheader". An example css code to change the color of heading and subheading is as follows:

    .form-header{

    color:red !important;

    }

    .form-subheader{

    color:red !important;

    }

    Hope this helps.

    Do get back to us if you want any specific changes to your form's headings and we will surely help you.

    We will wait for your response.

    Thank you!

  • Profile Image
    bkurniawan
    Answered on September 08, 2014 at 01:17 PM

    My apology. I was able to identify the id and the class of the css using the developer tool in Chrome. But I have no idea where I can inject the css. For example, the Configurable List has Custom CSS field where you can enter the css into. I did not see it with the Heading.

  • Profile Image
    bkurniawan
    Answered on September 08, 2014 at 01:22 PM

    Looks like you can inject the css in the "Setup & Embed". Within that there is a tab called "Form Styles". It looks like I answered my own question

  • Profile Image
    david
    Answered on September 08, 2014 at 02:09 PM

    Hi,

    You are correct, that is exactly where to add the CSS.  Just in case though, here is our guide on CSS injection:

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

    Let us know if you have any further questions and we will be happy to help.