I'm new here, and kind of to advanced CSS as well, and need to experiment with different classes for forms. However, I don't think that's the issue here:
The form is down in the bottom right (and looks the way I want it to) here: http://test.northstaropinion.com/
Here's an example of how it looks (not how I want it to) on an interior page (bottom right):
http://test.northstaropinion.com/contact
Thanks in advance for any pointers you have!
What have you done differently between those two pages when configuring the widget in the sidebar for each of those pages?
Hi Carl,
Thanks, actually I just noticed it's only wrong on the Contact page, where there's another Gravity Form. Perhaps a conflict between the two?
Are you or your theme applying custom styles to the form on that Contact page? If so those styles could be getting inherited by the theme in the widget. This means the styles for the Contact page form weren't applied specific enough to that form placement. When targeting the form, if you only want it to impact that form, start the selectors off by targeting that form by it's gform_wrapper container id.
For this page:
http://test.northstaropinion.com/contact
That would be:
#gform_wrapper_1
So all your styles being applied to that contact form should be applied using that id as the first part of the selector in your custom CSS.
The way you have things now your custom styles are being inherited by your widget. Or at least that is what it appears to be the issue.
Thanks so much! I will give that a try. It sounds a little difficult for my level, but I will take a shot.
Just curious, should I change my output CSS settings and copy the Gravity Forms CSS over to my main CSS and start over and uniquely target both forms?
Thanks for your help and patience!
Megan
Hey Megan, when you target specific forms by their ID's you won't need to change the output. By targeting the ID's in your theme's styl esheet - it's specific enough to override. Keeping the output CSS on in the Gravity Form's settings also ensures that you will always have the latest and greatest CSS when new releases come out.
Thanks guys, I finally took the plunge and started targeting specific forms and fields. I'm not super advanced with CSS and am new to GF but I gave it a shot: http://test.northstaropinion.com/contact
Here are my remaining rubs:
1. Despite using the code provided in the targeting samples for standard labels, I am unable to affect the labels. I've tried just about everything but they don't budge no matter what CSS I plug in.
2. On the Contact page (same link as above) the form in the footer still appears different than it does on other pages, although less obvious this time. There's more padding after the form description somehow, and maybe more padding on the right of that whole container as well.
3. I was able to target the submit button for the contact form, but can't seem to properly target the button on the newsletter signup form in the footer. Even if I copy the same code I used for the other form, and change the form ID, it's not working. I see where it IS pulling its style from, and if I delete that, the button is just white and un-styled.
Sorry this is so confusing. I just wish there were a more clear, step by step tutorial on this site for people new to all this (CSS, Gravity Forms, WordPress...)
Thanks in advance for any help!
Megan
Hey Megan, to target the label you can use:
[css]
.gform_wrapper .top_label .gfield_label {}Depending on what you want to achieve, may require you to use !important to override GF styles from the plugin stylesheet. Alternatively you can choose to target the labels of Form ID 1 and you could use:
[css]
#gform_wrapper_1 .gform_wrapper .top_label .gfield_label {}This should take care of item #2:
[css]
.textwidget .gform_heading {
margin-bottom: 0;
}This should help you with your targeting of the bottom form button:
[css]
div #gform_wrapper_2 .newsletter input.button {
background-color: green;
}Let me know if you need anymore detail or guidance - the forms are looking great I think! Keep up the good work.