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.

Style Changes since upgrade

  1. Apologies, I previously posted this in the wrong topic.

    Hi Guys,

    I previously styled my forms to reduce the gap between the list of input boxes as the gap is a bit big, as you can see on one of my forms here: http://www.primarycarecommunity.net/addanevent/

    I have just updated my plugin, and my gap has gone back to the original size, now ignoring mt styles to reduce this.
    Problem is that I have styled a few things in my CSS that I don't actually remember which but was doing this, the gravityforms related css is here:

    [css]
    .gform_wrapper ul.right_label li,
    .gform_wrapper form ul.right_label li,
    .gform_wrapper ul.left_label li,
    .gform_wrapper form ul.left_label li {margin-bottom:0px}
    
    .gform_body li {padding: 2px;}
    
    #gform_wrapper_4 .gform_footer, #gform_wrapper_5 .gform_footer, #gform_wrapper_1 .gform_footer, #gform_wrapper_2 .gform_footer, #gform_wrapper_3 .gform_footer, #gform_wrapper_6 .gform_footer, #gform_wrapper_7 .gform_footer, #gform_wrapper_8 .gform_footer, #gform_wrapper_9 .gform_footer  {margin-top: 0px;}

    And I have had some comments on here in the past about my poor CSS but i'm sorry, this is the only knowledge I have so I would really appreciate if you could please help me reduce my gap between input fields.

    Thanks, Adrian

    Posted 10 years ago on Wednesday September 28, 2011 | Permalink
  2. If you're talking about upgrading the the latest 1.5.3 version, none of that should have changed. You do need to use better inheritance to override the defaults as described ( and as in the samples given ) in the documentation here.

    http://www.gravityhelp.com/documentation/page/CSS_Targeting_Samples

    Try replacing your rules above with these more specific ones

    [css]
    body .gform_wrapper ul.gform_fields.right_label li,
    body .gform_wrapper form ul.gform_fields.right_label li,
    body .gform_wrapper ul.gform_fields.left_label li,
    body .gform_wrapper form ul.gform_fields.left_label li {
    	margin-bottom: 0
    }
    
    body .gform_wrapper .gform_body .gform_fields .gfield {
    	padding: 2px
    }
    
    body .gform_wrapper .gform_footer {
    	margin-top: 0
    }

    screenshot: http://bit.ly/pHQTL4

    Posted 10 years ago on Wednesday September 28, 2011 | Permalink