PLEASE NOTE: These forums are no longer utilized and are provided as an archive for informational purposes only. All support issues will be handled via email using our support ticket system. For more detailed information on this change, please see this blog post.

Issues Post-Installation

  1. 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

    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?


    Posted 9 years ago on Tuesday March 2, 2010 | Permalink
  2. 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 9 years ago on Tuesday March 2, 2010 | Permalink
  3. 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 9 years ago on Tuesday March 2, 2010 | Permalink
  4. ejayo

    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 9 years ago on Monday March 8, 2010 | Permalink
  5. 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 9 years ago on Monday March 8, 2010 | Permalink
  6. 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 9 years ago on Monday March 8, 2010 | Permalink