PLEASE NOTE: These forums are no longer utilized and are provided as an archive for informational purposes only. All support issues will be handled via email using our support ticket system. For more detailed information on this change, please see this blog post.

Customising font in CSS Stylesheet for form labels

  1. Hi
    Can you please help me because i tried to make a new post in the forum but my account doesn't let me read anything.
    It seems i might have found the place where i should put the css entering the following but nothing is happening.
    In the CSS style sheet, i put

    .label .gfield_label {
    color: #black;
    font-weight: bold;
    font-family: Questrial, Verdana, Geneva, sans-serif;
    font-size: 16px;
    !important
    }

    And in the css class name field in the form i put:

    .label .gfield_label

    This is the only CSS stylesheet where it seems that it should be so what should I do? It says in the Gravity Forms documentation that I can customize the colors and fonts but I can't, does anyone know if is there any other way?

    Many thanks

    Magali

    Posted 8 years ago on Monday July 8, 2013 | Permalink
  2. Richard Vav
    Administrator

    Magali,

    Try adding the following to your theme stylesheet

    .gform_wrapper .gfield_label {
    color: #black;
    font-weight: bold;
    font-family: Questrial, Verdana, Geneva, sans-serif;
    font-size: 16px;
    }

    You do not need to enter anything in the fields CSS Class Name.

    If you require further assistance please provide a link to a page where we can see how your themes CSS and the forms CSS are interacting.

    Regards,
    Richard

    Posted 8 years ago on Monday July 8, 2013 | Permalink
  3. Hi
    Thank you for your reply. Which CSS stylesheet should i enter it in as there are several: editor-style.css, font-awesome.ie.7.css, font awesome min.css, ie.8.css, pretty photo.css, responsive.css
    What sort of link should i send to show how the themes css and the forms css are interacting?
    Thank you
    Magali

    Posted 8 years ago on Monday July 8, 2013 | Permalink
  4. David Peralty

    You should be adding it to your theme's style.css or custom.css stylesheet.

    Posted 8 years ago on Monday July 8, 2013 | Permalink
  5. Hi thank you. Adding the code to the style.css has worked however it doesn't control the bold option, I have removed the bold related code but it is still bold. I have changed the code in both the theme's style and the gravity forms admin.css but nothing makes a difference. Have you got any thoughts as to what could create that?
    Thank you
    Magali

    Posted 8 years ago on Monday July 8, 2013 | Permalink
  6. David Peralty

    Are you running any caching plugins? You might be seeing an old version of that page, despite your updates.

    Posted 8 years ago on Monday July 8, 2013 | Permalink
  7. No I am not using Catching plug-ins. Also since i changed that code, it seems that the rest of the headings and body text has also gone smaller but when i change it back the headings still seems smaller.

    Posted 8 years ago on Monday July 8, 2013 | Permalink
  8. Richard Vav
    Administrator

    Can you post a link to the page where you have this form so we can take a look.

    Posted 8 years ago on Monday July 8, 2013 | Permalink
  9. Here it is, it's the form at the bottom.
    http://www.addictedtosheep.com/
    Thank you

    Posted 8 years ago on Monday July 8, 2013 | Permalink
  10. Richard Vav
    Administrator

    OK, so what exactly would you like to change?

    If it is just the font weight try adding the !important flag to that style like so
    font-weight: normal !important;

    Posted 8 years ago on Monday July 8, 2013 | Permalink
  11. Yes i want the headings of the labels not to be bold to match my contact form. HI I changed it to what you said but it is still bold. I am not sure what is going wrong.Thank you.

    Posted 8 years ago on Monday July 8, 2013 | Permalink
  12. Richard Vav
    Administrator

    When I check your style.css file I don't see the !important flag after the font-weight: normal

    Can you add it again, and also can you move that gravity forms block of CSS towards the bottom of the file so none of your other styles in that file should override it. Rules positioned towards the bottom of the file will take precedence over those above them.

    Posted 8 years ago on Monday July 8, 2013 | Permalink
  13. Hi Thank you for your help.
    I did what you said and this is the code i have used.
    gform_wrapper .gfield_label {

    color: #040300;
    font-weight: normal !important;
    font-family: Questrial, Verdana, Geneva, sans-serif;
    font-size: 14px;

    }

    I have put it at the bottom of the theme's styles.css and the admin.css for gravity forms but still the label headings are bold so it is overriding it somewhere else. I am not sure what else to do?
    THank you
    Magali

    Posted 8 years ago on Monday July 8, 2013 | Permalink
  14. Richard Vav
    Administrator

    Only put CSS in your own theme style.css file. I can't see those CSS changes, did you definately hit save. If you want you could send a temporary admin username and password to richard@rocketgenius.com and I will take a closer look, if you do make sure you include a link to this topic so I know what it is about.

    Posted 8 years ago on Monday July 8, 2013 | Permalink
  15. I am dealing with the same issue, I used the above codes and placed them in my css style sheet at the bottom and it worked great. BUT, the bottom labels of the input forms did not change. How do I do that?

    http://www.wendyrossilaw.net

    Posted 8 years ago on Tuesday July 9, 2013 | Permalink
  16. Use gform_wrapper label instead of gform_wrapper .gfield_label

    Posted 8 years ago on Tuesday July 9, 2013 | Permalink

This topic has been resolved and has been closed to new replies.