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.

rounded boxes

  1. maximusb
    Member

    Hi,
    need a bit of help styling the input fields on all forms on my site if poss?

    Just wanted to know how to round the corners of all the gravity forms items across all forms.
    I am very new to this so please be nice :)

    Thx in advance

    Posted 14 years ago on Saturday April 2, 2011 | Permalink
  2. You would use the CSS border-radius property. Just FYI, it's not supported in Internet Exploder though (surprise). Works well in the other browsers.

    [css]
    body .gform_wrapper input[type=text],
    body .gform_wrapper input[type=password],
    body .gform_wrapper input[type=tel],
    body .gform_wrapper input[type=email],
    body .gform_wrapper input[type=URL],
    body .gform_wrapper input[type=number],
    body .gform_wrapper input[type=file],
    body .gform_wrapper input[type=search] {
    	-webkit-border-radius: 4px;
    	-moz-border-radius: 4px;
    	border-radius: 4px;
    }

    http://border-radius.com/

    Posted 14 years ago on Saturday April 2, 2011 | Permalink
  3. maximusb
    Member

    sorry to be dumb about this Kevin, where exactly does this code go?

    Like I said, complete beginner here :\

    Does this go into my stylesheet?

    Posted 14 years ago on Saturday April 2, 2011 | Permalink
  4. Sorry. Yes, that would go at the end of your theme's stylesheet. Usually it's called style.css but some of the other more advanced themes have a place in their admin panel where you add custom CSS rules. This snippet just needs a home wherever you put your new CSS.

    Posted 14 years ago on Saturday April 2, 2011 | Permalink
  5. maximusb
    Member

    Thanks Kevin.

    LOVE this company and its support network!!!!!

    Posted 14 years ago on Saturday April 2, 2011 | Permalink
  6. maximusb
    Member

    Looks great on all input boxes, but can it be applied to all visible fields including dropdown boxes, text fields, etc...

    Posted 14 years ago on Saturday April 2, 2011 | Permalink
  7. maximusb
    Member

    http://www.brightpropertyagents.com/contact

    this may help...doh!

    Posted 14 years ago on Saturday April 2, 2011 | Permalink
  8. Sure, you just need to add those field types in there as well. Replace the previous snippet with this one.

    [css]
    body .gform_wrapper input[type=text],
    body .gform_wrapper input[type=password],
    body .gform_wrapper input[type=tel],
    body .gform_wrapper input[type=email],
    body .gform_wrapper input[type=URL],
    body .gform_wrapper input[type=number],
    body .gform_wrapper input[type=file],
    body .gform_wrapper input[type=search] ,
    body .gform_wrapper select,
    body .gform_wrapper textarea {
    	-webkit-border-radius: 4px;
    	-moz-border-radius: 4px;
    	border-radius: 4px;
    }
    Posted 14 years ago on Saturday April 2, 2011 | Permalink