Gravity Forms Styling Issues

[mborger]

Hello. I just purchased Gravity Forms and put my first form in the Property Search section of bigrockinvestments.com (right side of the video - this uses AgentPress 2).

However, I'm not able to add a border or change the color of the buttons. The folks at Gravity Forms support had me put two sections of code (below) into the style.css but neither are having any affect (I've cleared caches and tried on different browsers).

body #gform_wrapper_1 {
border: 1px solid #000;
}

body #gform_wrapper_1 input[type=button] {
background-color: #BABABA;
color: black!important;
}

Any thoughts on how to get these to work? Thank you in advance.

http://bigrockinvestments.com

[Robin]

I don't think you need to include body in your styling. Try this:

#gform_wrapper_1 {
    border: 1px solid #000;
}

#gform_wrapper_1 input[type=button] {
    background-color: #bababa;
    color: black !important;
}

HTH

---

I do the best I can with what I’ve got. (say hey on twitter)

[mborger]

Thanks, Robin - I gave it a shot and cleared caches, but no change....

[Robin]

Where in your stylesheet did you put it? I do not see it.

---

I do the best I can with what I’ve got. (say hey on twitter)

[mborger]

http://bigrockinvestments.com/wp-content/themes/agentpress-two/style.css

It's in the Gravity Forms section

[Bill Murray]

You need to add !important on all of those declarations, as in:

border: 1px solid #000 !important;

---

Web: https://wpperform.com or Twitter: @wpperform

We do managed WordPress hosting.

[mborger]

Thanks, Bill. Unfortunately that didn't seem to do the trick, either. Still looking at the same default form....

[Robin]

I'm confused about where your stylesheet is coming from. I see your code in the one you linked, but it looks like the site is pulling a different one from http://netdna.bigrockinvestments.com/wp-content/themes/agentpress-two/style.css?ver=2.0.1, which does not have it in there. ?

---

I do the best I can with what I’ve got. (say hey on twitter)

[Bill Murray]

@mborger - First, some clarifications...

1) When you use ID targeting, as in #gform_wrapper_1, you are targeting a specific form (form ID 1), so you don't need to use !important. My previous comment was from a quick read of the issue. The downside to this targeting is that it only applies to this form.

2) In general, 90% of Gravity Forms styling issues can be solved by using !important when you are trying to style all the forms across a site the same way (which is what most people want). Thus, my suggestion for !important. To do this, you'd target classes rather than ID's.

3) I just took a look at your site and added a style declaration that used #gform_wrapper_1 to set a border, just as you did in your original post (with "body" removed, as suggested by @Robin). It worked fine. I didn't see any of these changes in your stylesheet,, so the fact that you are not seeing suggests it is a caching issue. To debug something like this, you are better off turning off caching until you have the solution in hand.

@Robin - That means his stylesheet is coming from a CNAME'd CDN, or content delivery network, due to his caching setup.

---

Web: https://wpperform.com or Twitter: @wpperform

We do managed WordPress hosting.

[Robin]

@Bill, thanks for the explanation--I looked for a caching plugin, because it felt like it might be a caching thing, but didn't see it, so didn't mention the possibility. Haven't used a CDN before. I will know better next time--thanks!

---

I do the best I can with what I’ve got. (say hey on twitter)

[mborger]

Thank you so much. I had to clear the zone on my CDN. I had cleared my browser cache and the W3TC plugin cache, but somehow the CDN wasn't picking it up. I should have thought to check that earlier!

The only thing now is figuring out how to change the color of the "Next" and "Previous" text in my buttons. I have this:

#gform_wrapper_1 input[type=button] {
background-color: #ababab;
color: #fff;
}

But that color line doesn't seem to have any effect no matter what hex value I put in there.

[Bill Murray]

For your color line, see my comment regarding adding !important

Here, you have to do:

color: #fff !important;

Note that while these methods work, for others reading this they aren't necessarily what I would call the "best practices" method, because you are targeting a single form on your site. Since Gravity Forms users tend to use multiple forms on a site, you would be better off investing the time to apply site-wide styling to your forms that is consistent with the overall look of your site. That is, don't use form-specific ID's when targeting your CSS.

Hope that helps.

---

Web: https://wpperform.com or Twitter: @wpperform

We do managed WordPress hosting.

[mborger]

Thanks for your helpful explanation, Bill. However I wonder why, if that section of code is for one specific form (ID=1), then why would I need to use the !important distinction which is used alternatively for all instances? Why couldn't I assign the text color for just that button individually like I do the button color and border characteristics?

Moving on, though, I do plan on using multiple forms and implementing "best practices" as you mention. If that's the case, would my code be the exact same just without the "_1" at the end?

Lastly, I just tested my updated form and got to the final submission screen and saw that the "Continue" button was gray, so I guess it somehow is called differently within the CSS than the other type=button. Ideally, I'd like the "Next" buttons one colors, the "Previous" buttons a different color, and the "Continue" button a separate color (or the "Next" and "Continue" buttons the same color). Not sure if this is feasible...

Thanks,
Mike

[Bill Murray]

If you want to push ahead on your own, you'd be well advised to either use Firebug with Firefox or Chrome inspector. There might be similar functionality for IE or Safari, but I don't use those browsers much.

With these tools, you can inspect which CSS is operating on which element. Doing that inspection should answer your questions.

In general, it's not as easy as removing the _1. First you're using ID's, not classes. You need to use classes to generalize the styling you are making across your site. Second, you always have to keep in mind that more specificity trumps less in determining which CSS applies. Sometimes, GF is very specific in their CSS, so to get your CSS to work, you have to find something that is more specific. Third, the GF CSS is specific to what you put on your forms, so you may think you've styles all your forms perfectly, and that might only remain true until you add a new field type to your form.

There is a big difference between styling form X to match a site compared to styling any form GF can create to match.

---

Web: https://wpperform.com or Twitter: @wpperform

We do managed WordPress hosting.

[Author]

Posts