Issues Post-Installation « Gravity Support Forums

Gravity Support Forums » Plugin Support » Gravity Forms

erionshehaj@gmail.com
Member

Hi

I just purchased and installed the plugin today and so far I am loving it

But I am having some issues that I was hoping you could help me with:

The sidebar form as in this page http://signaturehouston.com/houston-foreclosures/mission-bend-foreclosure-with-pool-17000-below-appraisal/

1. As you can see, the paragraph field is too wide and I can't figure out how to make it narrower
2. Also, for some reason, below the form it's showing a duplicate of the related posts which are supposed to show only beneath the post content

Any ideas?

Thanks

Posted 14 years ago on Tuesday March 2, 2010 | Permalink
Kevin Flahaut
Administrator

I don't see the size issue. (my screenshot) What browser are you seeing the styling issue in?

There are a couple of things to note.. first, the forms widget doesn't automatically load the Gravity Forms default styles. If you want to use those, you'll need to manually include a style sheet reference to your page template. Secondly, the Thesis theme has some pretty sloppy form styles that have caused a variety of issues so you may be seeing something as a result of that. You can check the FAQ or search the forums for more on that if you would like.

That being said, you should be able to target the paragraph text field (textarea) by using the unique input ID something like this. I always specify the inheritance from the primary form wrapper so it doesn't conflict with other forms.

#gform_wrapper_2 #input_2_5 {width:100px;}

On the related posts issue, it appears to be and instance of the related posts widget from the front end. I would check to see if you might have included that inadvertently when adding the form widget. I'm confident that it's not Gravity Forms related but can't really offer much more insight into that.

Posted 14 years ago on Tuesday March 2, 2010 | Permalink
Carl Hancock
Administrator

As Kevin pointed out, the best thing to do is to include the form styles directly in your themes stylesheet. In the case of Thesis, this would be in your custom stylesheet.

To do so you would simply copy-n-paste the contents of gravityforms/css/forms.css and place the code in your themes stylesheet or your custom Thesis stylesheet.

Then in the Gravity Forms settings page (Forms > Settings) you can turn OFF the CSS output. This will then put you in control of all the front end CSS.

Joost de Valk's Widget currently does not output the necessary CSS on the page so it has to exist for the form to appear correct as far as styles go. When we introduce an official widget for Gravity Forms we will take this issue into account, but it is currently a 3rd party created widget.

Posted 14 years ago on Tuesday March 2, 2010 | Permalink
ejayo
Member

I tried doing this, cutting and pasting the gravity forms CSS into the thesis custom.css and it didn't fix my issue, which the appearance of the form fields, which appear as gray boxes without lines around the. I'd prefer the default white boxes with a border around it; it would be nice to be able to customize this but I'd be happy with somethign that looked like the preview pane in gravity forms.

Posted 14 years ago on Monday March 8, 2010 | Permalink
Carl Hancock
Administrator
It's just a matter of including the right CSS code into your custom.css file to override the Thesis styles.

In your case this would do the trick:
```
.gform_body input {border: 1px solid #000000;}
```
Placing that line of code in your Thesis custom CSS should add a 1px border to all input fields within the .gform_body class. You customize it to style the border to the color you want.
Posted 14 years ago on Monday March 8, 2010 | Permalink

The styles you're seeing are defined in the thesis style.css file starting around line 45. You'll see a block like this.

/*---:[ form inputs ]:---*/
input, textarea { font-size: 1em; color: #444; background: #eee; border: 1px solid #aaa; border-right-color: #ddd; border-bottom-color: #ddd; }
input:focus, textarea:focus { background: #fff; border-color: #777; border-right-color: #ccc; border-bottom-color: #ccc; }
.sidebar .text_input { width: 95%; }
input.form_submit { font-weight: bold; color: #111; background: url('lib/images/submit-bg.gif'); border: 3px double #999; border-top-color: #ccc; border-left-color: #ccc; cursor: pointer; width: auto !important; overflow: visible; }
#commentform input.form_submit { border-width: 3px; }
input.form_submit:hover { color: #090; }

What you need to do is to copy this block, and paste it into your custom.css file. Then, you can redefine the values to your preference - input background color, borders, etc.

This isn't a Gravity Forms issue at all, purely generic styles in your theme that are getting applied to the form.

Posted 14 years ago on Monday March 8, 2010 | Permalink