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.

Basic styling help

Gravity Support Forums » Plugin Support » Gravity Forms

  1. dsk3211
    Member

    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!

    /* ------------------------------------------------------------------------ */
/* 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;
}
    Posted 11 years ago on Tuesday March 5, 2013 | Permalink

  2. Chris Hajer
    Key Master

    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.

    Posted 11 years ago on Wednesday March 6, 2013 | Permalink

  3. esmith813
    Member

    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?

    Posted 11 years ago on Monday March 18, 2013 | Permalink

  4. Chris Hajer
    Key Master

    Yes. In general. Let's focus your styling questions on your other open topic for now:
    http://www.gravityhelp.com/forums/topic/what-are-the-basics-for-changing-colors-fonts

    Posted 11 years ago on Monday March 18, 2013 | Permalink

This topic has been resolved and has been closed to new replies.