How to identify the right CSS code? « Gravity Support Forums

Gravity Support Forums » Plugin Support » Gravity Forms

yblume
Member

I have read a number of posts on CSS Targeting (including this http://www.gravityhelp.com/documentation/page/CSS_Targeting_Samples), but I'm still having trouble finding the right items.

In my form, the background and text are determined by my prophoto theme, which is fine, but I want to make these specific changes:

http://www.ybphotographic.com/blogsite/contact

1. Currently ALL fields that require filling in are white with black text when typed. I want to change the background colour to something else and the text colour too.

2. The Asterix that denotes required fields is red. I need it to be #ce7019

3. The reply text after the form has been submitted is yellow - I woudl ike it to be a different colour.

Please could someone point me to which parts of the CSS code apply to this? I know I'm being stupid, but I don't seem to be able to translate the labels you've given in your code to what they actually apply to.

Thank you,

Yvonne.

Posted 12 years ago on Friday August 5, 2011 | Permalink
yblume
Member

Actually, I've found the code for the asterix

Posted 12 years ago on Friday August 5, 2011 | Permalink

No, you're not stupid. Yeah, some of this is directly addressed in the docs but it's easy to miss sometimes. I see that you found part of it. This should get you what you need. Of course, tweak to suit your preferences.

[css]
/* set the styles for the inputs that are required */

body .gform_wrapper .gform_body .gform_fields .gfield.gfield_contains_required input[type=text],
body .gform_wrapper .gform_body .gform_fields .gfield.gfield_contains_required input[type=tel],
body .gform_wrapper .gform_body .gform_fields .gfield.gfield_contains_required input[type=url],
body .gform_wrapper .gform_body .gform_fields .gfield.gfield_contains_required input[type=number],
body .gform_wrapper .gform_body .gform_fields .gfield.gfield_contains_required input[type=email],
body .gform_wrapper .gform_body .gform_fields .gfield.gfield_contains_required input[type=password],
body .gform_wrapper .gform_body .gform_fields .gfield.gfield_contains_required select,
body .gform_wrapper .gform_body .gform_fields .gfield.gfield_contains_required textarea {
	background-color: #ce7019;
	border:1px solid #ce7019;
	color:#fff
}

/* set the color of the required asterisk */
body .gform_wrapper .gform_body .gform_fields .gfield .gfield_label .gfield_required {
	color: #ce7019
}

screenshot: http://bit.ly/pElVhR

[css]
/* change the confirmation message styling */

body #gforms_confirmation_message {
    border: 4px solid #2B2B2B;
    font-size: 20px;
    line-height: 1.5em;
    padding: 30px;
    background-color: #CB6F25;
    color: #fff;
}

screenshot: http://bit.ly/nCGyB6

Which labels are you having trouble with?

Posted 12 years ago on Friday August 5, 2011 | Permalink

yblume
Member

Oh thank you so much, that's getting there.... a few bits of code missing. If you look at the page now, you'll see the changes I've made.. it still leaves the following fields with a white background:

Time to contact
Which day
How can I help you.

Again, I'd like to change the background colour on these.

And then the FINAL set of questions is.. when I incorrectly submit a form, the error message which says "there was a problem with your submission - Errors have been highlighted" - I would like THAT text to be ce7019 too.

And the error fields are currently light red with red labes - I would love the labels to be CE7019 again and the fields a paler version of the same colour... I'll find the right colour code, if you could just point me to the right CSS code.

Then it's all done, I promise!

Many thanks!

Yvonne
Thank you so much.

Posted 12 years ago on Friday August 5, 2011 | Permalink
yblume
Member

Actually, I'm making progress - have sorted the date and field areas now.

Posted 12 years ago on Friday August 5, 2011 | Permalink
yblume
Member

Ok - I have actually found all the solutions EXCEPT this one:

When submitting an incorrect form, the TITLE FIELD on the error form is still RED - I absolutely can't figure out how to change that. to ce7019...

Posted 12 years ago on Friday August 5, 2011 | Permalink
Kevin Flahaut
Administrator
```
[css]
body .gform_wrapper .validation_error {
    color: #ce7019;
}
```
should do it for you.

screenshot: http://bit.ly/na7JFO
Posted 12 years ago on Friday August 5, 2011 | Permalink
yblume
Member

Yes, sorry, I did find that one, I amended my post just as you were posting. I didn't mean the message, I meant the title - i.e. the only thing that is still in red.

Sorry for the confusion.

Posted 12 years ago on Friday August 5, 2011 | Permalink
Kevin Flahaut
Administrator
If you're talking about the field label. It would be like this.
```
[css]
body .gform_wrapper .gform_body .gform_fields .gfield.gfield_error label {
    color: #CE7019;
}
```
screenshot: http://bit.ly/mZ0wiH
Posted 12 years ago on Friday August 5, 2011 | Permalink
yblume
Member

That's perfect!! Thank you so much for your help Kevin.
Have a good weekend.
Yvonne

Posted 12 years ago on Friday August 5, 2011 | Permalink
Kevin Flahaut
Administrator

Great. I'm pleased I could help. Enjoy your weekend as well Yvonne!

Posted 12 years ago on Friday August 5, 2011 | Permalink

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