How can I change the font color, size of the heading?

  • Profile Image
    thelookbook
    Asked on April 03, 2012 at 01:57 PM

    How can I change the font color, size of the heading?

  • Profile Image
    gori-mathew
    Answered on April 03, 2012 at 03:09 PM

    Hi,

    Changing Font Color on your Form Header? If so, you can inject this custom CSS Code on your form.

     

    .form-header-group, .form-collapse-table, .form-pagebreak {

    color: #FD8F29;

    }

    Just simply change bolded hex color code to any color you like.

     To learn how to inject custom css on your form, please visit this link.

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

    I have another  link below on previously addressed question on this forum on changing font size, color.

    http://www.jotform.com/answers/72115-Changing-font-color-size

    Hope you find this information helpful.

     

  • Profile Image
    omnigon
    Answered on April 03, 2012 at 03:14 PM

    I do not want to just change the css, i need to make HTML adjustements as well

  • Profile Image
    Mike_T
    Answered on April 03, 2012 at 07:30 PM

    @omnigon, please create a separate thread and provide as much information as possible about your inquiry. We will be happy to help you.

  • Profile Image
    thelookbook
    Answered on April 04, 2012 at 04:11 AM

    The purpose of using Jot form is to create form with the editor without any knowledge of html or css. Why can't the heading be edited at Jot form editor?

  • Profile Image
    abajan
    Answered on April 04, 2012 at 04:55 AM

    Our developers are constantly looking for ways to improve the form builder and I will submit a request for toolbar buttons to change the properties mentioned but currently your only option is CSS.

    Before submitting the ticket however, I just want to be sure I understand what you want. When you state "...size of the heading" you are referring to the entire element (as illustrated in the screenshot below) and not the text, right?

  • Profile Image
    thelookbook
    Answered on April 04, 2012 at 04:58 AM

    I mean ths font size, font and font color of the heading. Of course, if the size of heading can also be edited, that would be great!

  • Profile Image
    abajan
    Answered on April 04, 2012 at 06:12 AM

    Although there are no buttons to change the font or color of the text, there's already one for the size:


    Only three sizes are available: Default, Large and Small. Other sizes would require injected CSS:

    .form-header-group {
    font-size: 20px;
    }

    (Change the declaration's value to suit)

    The above rule will change the font size in all headers in the form. Changing the font size of just certain headers would require more specificity. In this case, changing the selector from .form-header-group to field's ID would do the trick. View the injected CSS in the source of the form pictured below to see how the font size (and color) of just the first heading was changed:

    (Click image to view live form)

    You can find out the ID of most form elements via their Properties button but unfortunately, this is not the case with headings. In such instances you will need to either search the source of the form in question or (preferably) use a tool like Firebug.

    Incidentally, some changes will not be seen in the form builder. You need to view them either in the preview or at the form's URL.

    Perhaps instead of constraining users to just the three font sizes when using the form builder toolbar button, we should put a text box where they can enter a number in pixels.

  • Profile Image
    abajan
    Answered on April 04, 2012 at 06:26 AM

    Of course, the font of the header could also have been changed by adding a font-family declaration to the rule:

    #cid_1 {
    font-family: "Times New Roman", Georgia, serif;
    font-size: 20px;
    color: red;
    }

  • Profile Image
    anjaba
    Answered on January 19, 2013 at 06:48 AM

    Abajan, I am interested in changing the size of the box/removing the line where the subheading would be, as you illustrated in your first response.  Will you please walk me through that?

  • Profile Image
    abajan
    Answered on January 19, 2013 at 08:52 AM

    @anjaba

    To change the size (width) of a heading and remove the line separating its main text from its sub-heading, you first need to find out the heading's ID. You could just view the form's source for that but it's better to use a web developer tool like Firebug or if that's not installed, right-click the header, and then click Inspect element (in Chrome):


    A panel will open in the bottom half of the browser with the header highlighted, where you will see the ID. To change the width of a heading you actually need to look for the ID of its containing list item:


    Once that information is known, the width of the particular heading can be changed as follows:

    #cid_1 .form-header-group {
    width: 570px;
    }

    Removing the separator line from all of the form's headings would just be a matter of injecting the following rule:

    .form-subHeader {
    border: none;
    }

    However, if you wanted to remove the separator from a specific heading without affecting the other headings, you would have to use the ID of that heading's sub-header as the selector instead of the class selector:

    #subHeader_1 {
    border: none;
    }

    (Class selectors vs. ID selectors)

    Injecting the following CSS should work for your form (if it's the form I think you're referring to):

    #cid_1 .form-header-group {
    width: 570px;
    }

    #cid_25 .form-header-group {
    width: 150px;
    }

    #cid_13 .form-header-group {
    width: 410px;
    }

    #cid_20 .form-header-group {
    width: 565px;
    }

    .form-subHeader {
    border: none;
    }

    If you would like clarification on anything, please let us know.

    Thanks.