Change font-style of “summary” field

  • Resolved beho83

    (@beho83)


    3 years ago

    Hi there,

    After receiving great support a few days ago, I now have another question.

    I would like to change the style of the field label of the Field Type: Summary. I think that the field label of the summary field is defined as H2 or H3. So the field label of the summary field is much bigger than all other field labels on my website.

    How can I define that the field label of the summary field is identical to all other field labels?

    Thank you very much in advance!

    Best
    Ben

    • This topic was modified 3 years ago by beho83.
Viewing 7 replies - 1 through 7 (of 7 total)
  • Plugin Author codepeople

    (@codepeople)

    Hello @beho83

    Every field in the form has assigned a class name, the summary fields: cff-summary-field. To customize the appearance of the summary field label, the selector would be #fbuilder .cff-summary-field>label

    More information about the fields’ components and how to customize their appearance by reading the following blog post:

    https://cff.dwbooster.com/blog/2020/01/12/form-design

    Best regards.

    Thread Starter beho83

    (@beho83)

    Hi @codepeople,

    Thank you again for your quick reply. Unfortunately, this does not help me. At least the following code does not change anything for me:

    #fbuilder .cff-summary-field>label{font-size:15px !important; font-weight:bold !important;}

    In the blog post you linked, unfortunately I can’t see how to replace the H2 tag of the summary-form-title with the default body font settings of my theme (Astra) either.

    All other form titles seem to be displayed in the font size I specified as body font size in the customizer. Only the summary field title is an H2 and thus much larger than all other field titles.

    It would be great if you could help me with this again.

    Thank you!

    Best
    Ben

    Plugin Author codepeople

    (@codepeople)

    Hello @beho83

    Could you send me the link to the form to check its styles, please?

    Best regards.

    Thread Starter beho83

    (@beho83)

    Hi @codepeople,

    https://bit.ly/3qEEd4Y

    Please see “Schritt 6 von 6”.

    Thank you very much in advance!

    Best
    Ben

    Thread Starter beho83

    (@beho83)

    Hi @codepeople,

    do you have any idea?

    For the sake of simplicity, I have also included a table of contens in which only the H2 headings are shown. There you can see that the heading of the summary field is an H2. Just like the title of the calculator, which I don’t even display, but which is still contained in the TOC as an empty line.

    I don’t want to use the TOC at all, this is just for illustration purposes for you. My question still only relates to how I can remove the H2 tag from the heading of the summary field and replace it with the standard font settings of the theme (just like with all other headings from the various field labels).

    Thank you!
    Ben

    Plugin Author codepeople

    (@codepeople)

    Hello @beho83

    You only need to enter the style definition below into the “Customize Form Design” attribute in the “Form Settings” tab (https://resources.developers4web.com/cff/images/documentation/form-settings-tab.png):

    #fbuilder .cff-summary-field h2{font-size:16px !important; margin:0; padding-bottom:5px;}

    Best regards.

    Thread Starter beho83

    (@beho83)

    Thank you very much!

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘Change font-style of “summary” field’ is closed to new replies.