Gravity Support Forums Topic: Basic styling help

Gravity Support Forums Topic: Basic styling help https://legacy.forums.gravityhelp.com/topic/basic-styling-help Gravity Support Forums Topic: Basic styling help en-US Sun, 19 Apr 2026 23:11:36 +0000 http://bbpress.org/?v=1.0.1 <![CDATA[Search]]> q https://legacy.forums.gravityhelp.com/search.php Chris Hajer on "Basic styling help" https://legacy.forums.gravityhelp.com/topic/basic-styling-help#post-174621 Sun, 17 Mar 2013 21:28:28 +0000 Chris Hajer 174621@https://legacy.forums.gravityhelp.com/ Yes. In general. Let's focus your styling questions on your other open topic for now: <a href="http://www.gravityhelp.com/forums/topic/what-are-the-basics-for-changing-colors-fonts" rel="nofollow">http://www.gravityhelp.com/forums/topic/what-are-the-basics-for-changing-colors-fonts</a> esmith813 on "Basic styling help" https://legacy.forums.gravityhelp.com/topic/basic-styling-help#post-174618 Sun, 17 Mar 2013 21:25:14 +0000 esmith813 174618@https://legacy.forums.gravityhelp.com/ Hi. I would like to make my Gravity Form look like my Contact Form 7 too! Please clarify your suggestion. Are you saying to 1) Look at the source code of the contact form 7 page 2) Review CSS 3) Apply the CSS to the Gravity form Where would you apply the CSS? in the theme style.css or in the Form Settings>Advance> "CSS Class Name" field? Chris Hajer on "Basic styling help" https://legacy.forums.gravityhelp.com/topic/basic-styling-help#post-162142 Wed, 06 Mar 2013 12:52:32 +0000 Chris Hajer 162142@https://legacy.forums.gravityhelp.com/ In general, any place you see ".wpcf7-form" you can replace that with ".gform_wrapper". That will fix a lot of it. Some of the names of the divs will be different, so you will have to change the selector in this code completely. For example, div.wpcf7-validation-errors would be div.validation_error for Gravity Forms. You best bet is to create a form and then view the source of the page it's on to see how you can adapt this theme CSS to work on your Gravity Forms elements. dsk3211 on "Basic styling help" https://legacy.forums.gravityhelp.com/topic/basic-styling-help#post-161112 Tue, 05 Mar 2013 12:44:57 +0000 dsk3211 161112@https://legacy.forums.gravityhelp.com/ Hello, I'm using a premium theme called Inovado, and it has no support for Gravity Forms, but it does support Contact Form 7. My question is how to copy over the Contact Form 7 styling to Gravity Forms. Here is the Form code in style.css. Would someone be able to tell me what I'd need to do to make Gravity Forms look like this the styling for CF7? It would be very much appreciated. Thank you! <pre><code>/* ------------------------------------------------------------------------ */ /* 05. Forms /* ------------------------------------------------------------------------ */ form, fieldset { margin-bottom: 20px } input[type="text"], input[type="password"], input[type="email"], textarea, select { background: #fff; border: 1px solid #ccc; padding: 8px 8px; outline: none; -moz-border-radius: 2px; -webkit-border-radius: 2px; border-radius: 2px; font-family: Arial, Helvetica, sans-serif; font-size: 13px; color: #666; margin: 0; width: 200px; max-width: 100%; display: block; margin-bottom: 20px; width: 180px; color: #999; -moz-box-shadow: 0 1px 2px 0 rgba(180, 180, 180, 0.2); -webkit-box-shadow: 0 1px 2px 0 rgba(180, 180, 180, 0.2); box-shadow: 0 1px 2px 0 rgba(180, 180, 180, 0.2); border: 1px solid #d4d4d4 } input[type="text"]:focus, input[type="password"]:focus, input[type="email"]:focus, textarea:focus { border: 1px solid #bbb; color: #333; -moz-box-shadow: 0 0 3px rgba(0, 0, 0, 0.2); -webkit-box-shadow: 0 0 3px rgba(0, 0, 0, 0.2); box-shadow: 0 0 3px rgba(0, 0, 0, 0.2); } textarea { min-height: 60px } select { width: 220px; padding: 5px; } label, legend { cursor: pointer; display: block; } label span, legend span { font-weight: bold } button, input[type="submit"], input[type="reset"], input[type="button"] { display: inline-block; font-weight: bold; font-family: Arial, Helvetica, sans-serif; cursor: pointer; width: auto !important; } button:active, input[type="submit"]:active, input[type="reset"]:active, input[type="button"]:active{ -webkit-box-shadow:inset 0 1px 2px 0 rgba(0, 0, 0, 0.16); -moz-box-shadow:inset 0 1px 2px 0 rgba(0, 0, 0, 0.16); box-shadow:inset 0 1px 2px 0 rgba(0, 0, 0, 0.16); } /* Contactform 7 Specific Styling ---------------------------------------------------- */ .wpcf7-form input[type="text"] { -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */ -moz-box-sizing: border-box; /* Firefox, other Gecko */ box-sizing: border-box; /* Opera/IE 8+ */ width: 400px; max-width: 100%; margin: 5px 0 0 0; } .wpcf7-form textarea { -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */ -moz-box-sizing: border-box; /* Firefox, other Gecko */ box-sizing: border-box; /* Opera/IE 8+ */ width: 100%; max-width: 100%; margin: 5px 0 0 0; } .wpcf7-form select { -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */ -moz-box-sizing: border-box; /* Firefox, other Gecko */ box-sizing: border-box; /* Opera/IE 8+ */ width: 400px; max-width: 100%; margin: 5px 0 0 0; padding:8px; } .wpcf7-form input[type="checkbox"] { width: auto } .wpcf7 form.wpcf7-form p { font-weight: bold; margin: 0 0 20px 0 !important; } .wpcf7-list-item-label { font-weight: normal } .wpcf7-response-output { display: none } .wpcf7-form .invalid { color: #bf1515 !important } .wpcf7-not-valid { border: 1px solid #bf1515 !important } .wpcf7 span.wpcf7-not-valid-tip { display: none } div.wpcf7-response-output { margin: 0px !important; padding: 5px 10px !important; } div.wpcf7-mail-sent-ok, div.wpcf7-mail-sent-ng, div.wpcf7-spam-blocked, div.wpcf7-validation-errors{ position:relative; border:1px solid #ddd !important; display:block; background-image:linear-gradient(bottom, #F7F7F7 0%, #FFFFFF 100%); background-image:-o-linear-gradient(bottom, #F7F7F7 0%, #FFFFFF 100%); background-image:-moz-linear-gradient(bottom, #F7F7F7 0%, #FFFFFF 100%); background-image:-webkit-linear-gradient(bottom, #F7F7F7 0%, #FFFFFF 100%); background-image:-ms-linear-gradient(bottom, #F7F7F7 0%, #FFFFFF 100%); background-color:#F7F7F7; -webkit-border-radius:3px; -moz-border-radius:3px; border-radius:3px; -webkit-box-shadow:0px 1px 1px 0px rgba(180, 180, 180, 0.1); -moz-box-shadow:0px 1px 1px 0px rgba(180, 180, 180, 0.1); box-shadow:0px 1px 1px 0px rgba(180, 180, 180, 0.1); font-weight:bold; padding:10px 40px !important; text-align:center; margin-bottom:20px; } div.wpcf7-mail-sent-ok { background-image: linear-gradient(bottom, #e9f2d2 0%, #FFFFFF 100%); background-image: -o-linear-gradient(bottom, #e9f2d2 0%, #FFFFFF 100%); background-image: -moz-linear-gradient(bottom, #e9f2d2 0%, #FFFFFF 100%); background-image: -webkit-linear-gradient(bottom, #e9f2d2 0%, #FFFFFF 100%); background-image: -ms-linear-gradient(bottom, #e9f2d2 0%, #FFFFFF 100%); background-color: #e9f2d2; border-color: #c0da66 !important; color: #88b12b; } div.wpcf7-mail-sent-ng { background-image: linear-gradient(bottom, #ffe9e9 0%, #FFFFFF 100%); background-image: -o-linear-gradient(bottom, #ffe9e9 0%, #FFFFFF 100%); background-image: -moz-linear-gradient(bottom, #ffe9e9 0%, #FFFFFF 100%); background-image: -webkit-linear-gradient(bottom, #ffe9e9 0%, #FFFFFF 100%); background-image: -ms-linear-gradient(bottom, #ffe9e9 0%, #FFFFFF 100%); background-color: #ffe9e9; border-color: #e99f9f !important; color: #d25c5a; } div.wpcf7-spam-blocked { background-image: linear-gradient(bottom, #fbf6e3 0%, #FFFFFF 100%); background-image: -o-linear-gradient(bottom, #fbf6e3 0%, #FFFFFF 100%); background-image: -moz-linear-gradient(bottom, #fbf6e3 0%, #FFFFFF 100%); background-image: -webkit-linear-gradient(bottom, #fbf6e3 0%, #FFFFFF 100%); background-image: -ms-linear-gradient(bottom, #fbf6e3 0%, #FFFFFF 100%); background-color: #fbf6e3; border-color: #efd877 !important; color: #c4a80a; } div.wpcf7-validation-errors { background-image: linear-gradient(bottom, #fbf6e3 0%, #FFFFFF 100%); background-image: -o-linear-gradient(bottom, #fbf6e3 0%, #FFFFFF 100%); background-image: -moz-linear-gradient(bottom, #fbf6e3 0%, #FFFFFF 100%); background-image: -webkit-linear-gradient(bottom, #fbf6e3 0%, #FFFFFF 100%); background-image: -ms-linear-gradient(bottom, #fbf6e3 0%, #FFFFFF 100%); background-color: #fbf6e3; border-color: #efd877 !important; color: #c4a80a; }</code></pre>