Hi,
I'm creating a second form - ID_2 which needs to be styled differently from form ID_1 which has a lot of customization on it. The form ID-2 is inheriting the styles from form ID_1. I need to: align the checkbox, captcha math box and submit button correctly , and give the paragraph text input box a background color.
Form ID-1 is here
Form ID_2 is here
Any help is much appreciated
Steve G
Every form has a wrapper with a unique ID. You simply use that and CSS inheritance to cascade down and define different styles for each form.
example: first form ID#1
#gform_wrapper_1 input[type=text] {color:red}
exmple: second form ID#2
#gform_wrapper_2 input[type=text] {color:rblue}
I'm not sure how familiar you are with CSS inheritance, but this is a good article to learn more about it.
http://www.smashingmagazine.com/2010/04/07/css-specificity-and-inheritance/
Hi Kevin,
Great article and bookmarked.
I think my issue is getting to the specificity using the right selectors. On Form_1 I have a generic selector for background color. '.gform_wrapper input{background-color:#c3ece9;}'
I'm using for form 2 .gform_wrapper_2 input_2_4{background-color:#c3ece9!important;} , i.e. being very specific to the field.
However it ain't working. What am I doing wrong?
Steve G
Steve, in your example above, you're specifying a class rather than an ID for "gform_wrapper_2". You're also missing an identifier on the input ID. That's most likely your issue. Try this.
#gform_wrapper_2 #input_2_4{background-color:#c3ece9!important}
