Customising font in CSS Stylesheet for form labels

Gravity Support Forums » Plugin Support » Gravity Forms

Magali Pettier
Member

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 11 years ago on Monday July 8, 2013 | Permalink
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 11 years ago on Monday July 8, 2013 | Permalink
Magali Pettier
Member

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 11 years ago on Monday July 8, 2013 | Permalink
David Peralty

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

Posted 11 years ago on Monday July 8, 2013 | Permalink
Magali Pettier
Member

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 11 years ago on Monday July 8, 2013 | Permalink
David Peralty

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

Posted 11 years ago on Monday July 8, 2013 | Permalink
Magali Pettier
Member

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 11 years ago on Monday July 8, 2013 | Permalink
Richard Vav
Administrator

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

Posted 11 years ago on Monday July 8, 2013 | Permalink
Magali Pettier
Member

Here it is, it's the form at the bottom.
http://www.addictedtosheep.com/
Thank you

Posted 11 years ago on Monday July 8, 2013 | Permalink
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 11 years ago on Monday July 8, 2013 | Permalink
Magali Pettier
Member

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 11 years ago on Monday July 8, 2013 | Permalink
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 11 years ago on Monday July 8, 2013 | Permalink
Magali Pettier
Member

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 11 years ago on Monday July 8, 2013 | Permalink
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 11 years ago on Monday July 8, 2013 | Permalink
Rrossi
Member

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 11 years ago on Tuesday July 9, 2013 | Permalink
Rob Harrell
Member

Use gform_wrapper label instead of gform_wrapper .gfield_label

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

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