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.

Changing colour and shape

  1. Hello, I've just purchased Gravity and have uploaded a form into a page. I'd like to change the look of the form. Do I do this in Style Sheet? I'm looking to remove background colour, rounded corners and shadows from boxes. http://yogaleicester.co.uk/contact/
    Thanks Zoƫ

    Posted 13 years ago on Saturday April 7, 2012 | Permalink
  2. You would make any custom CSS changes in your THEME stylesheet. This is usually a style.css file in your theme directory.. occasionally it's a custom.css file depending on how your theme developer set it up. If you're unsure, you can contact the theme developer to find out for sure where to place custom CSS rules. Wherever you put them, you'll want to put any custom rules at the end of your stylesheet.

    http://www.gravityhelp.com/documentation/page/Where_Do_I_Put_This_Code%3F

    Here's a page with samples of how to target and manipulate specific elements in your form. It may come in handy for you.

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

    Posted 13 years ago on Saturday April 7, 2012 | Permalink
  3. Thanks for this. I have contacted the theme developer and will await response.

    In the meantime any idea why the email box looks different to the others? I haven't made any adjustments. http://yogaleicester.co.uk/contact/

    Thanks Zoe

    Posted 13 years ago on Saturday April 7, 2012 | Permalink
  4. Yep, your theme CSS is targeting specific input types. Apparently, it's not including the styles for the email type input (only the text type and textareas). You can try adding this to your theme stylesheet to get all of the bases covered. As I mentioned, you'll want to put it at the end of the stylesheet so these styles will supersede the others.

    [css]
    body .gform_wrapper .gform_body .gform_fields .gfield input[type=text],
    body .gform_wrapper .gform_body .gform_fields .gfield input[type=email],
    body .gform_wrapper .gform_body .gform_fields .gfield input[type=tel],
    body .gform_wrapper .gform_body .gform_fields .gfield input[type=url],
    body .gform_wrapper .gform_body .gform_fields .gfield input[type=number],
    body .gform_wrapper .gform_body .gform_fields .gfield input[type=password],
    body .gform_wrapper .gform_body .gform_fields .gfield select,
    body .gform_wrapper .gform_body .gform_fields .gfield textarea {
    	background: url("images/field_bkg.png") repeat-x scroll 0 0 #FAFAFA;
        	border: 1px solid #DDDDDD;
        	border-radius: 5px 5px 5px 5px;
        	color: #6A6A6A;
        	font-family: "Droid Sans","Helvetica Neue",Helvetica,Arial,sans-serif;
        	padding: 10px 0
    }

    test screenshot: http://bit.ly/HhGJzr

    and yeah, it looks like you can put these in your theme's style.css file found here
    http://yogaleicester.co.uk/wp-content/themes/clarity/style.css

    Posted 13 years ago on Saturday April 7, 2012 | Permalink