Integrating Gravity forms with DIVI

If you are using the best forms plugin (Gravity Forms) with one of the best WordPress themes (DIVI), you will notice that they do not integrate very well together. A recent web design project required various forms to all look similar so I set to work on integrating the two. Adding the below code to your custom CSS box in DIVI theme options should be enough for a get DIVI looking forms powered by Gravity Forms.

div.entry-content .gform_wrapper form div.gform_body ul.gform_fields input,
div.entry-content .gform_wrapper form div.gform_body ul.gform_fields select {
margin-bottom: 0
}

body .gform_wrapper input {
 margin:-31px 0 -42px 0!important;
}
.entry-content .gform_wrapper input {
margin-bottom:-90px!important;
}

body .gform_wrapper h3.gform_title {
font-size:26px;
font-weight:500;
font-color:#00a94f;
}

body .gform_wrapper .gform_footer,body .gform_wrapper .gform_page_footer {
overflow:hidden;
text-align:right;
}

body .gform_wrapper input:not([type=radio]):not([type=checkbox]):not([type=submit]):not([type=button]):not([type=image]):not([type=file]),body .gform_wrapper textarea.textarea,body div.form_saved_message div.form_saved_message_emailform form input[type=text] {
background-color:#fff;
border: 1px solid #00a94f;;
-moz-border-radius:0;
-webkit-border-radius:0;
border-radius:0;
font-size:14px;
color:#00a94f;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
line-height:initial;
height:initial;
padding:6px 20px;
}

body .gform_wrapper select {
display:inline-block;
height:31px;
font-size:14px;
color:#999;
background:#eee;
border:none;
}

body .gform_wrapper .gform_footer input.button,body .gform_wrapper .gform_footer input[type=submit],body .gform_wrapper .gform_page_footer input.button,body .gform_wrapper .gform_page_footer input[type=submit],body .gform_wrapper input[type=button],body div.form_saved_message div.form_saved_message_emailform form input[type=submit] {
background:0 0;
font-size:20px;
font-weight:500;
line-height:1.4em;
font-family:inherit;
color:inherit;
border:2px solid;
-moz-border-radius:3px;
-webkit-border-radius:3px;
border-radius:3px;
-webkit-font-smoothing:antialiased;
-moz-osx-font-smoothing:grayscale;
-moz-transition:all .2s;
-webkit-transition:all .2s;
transition:all .2s;
padding:5px 5px;
}

body div.form_saved_message div.form_saved_message_emailform form input[type=submit] {
margin-left:auto;
margin-right:auto;
}

body .gform_wrapper .gform_footer input[type=submit],body .gform_wrapper .gform_page_footer .button.gform_button,body .gform_wrapper .gform_page_footer .button.gform_next_button {
margin-right:0;
}

body .gform_wrapper .gform_footer input.button:hover,body .gform_wrapper .gform_footer input[type=submit]:hover,body .gform_wrapper .gform_page_footer input.button:hover,body .gform_wrapper .gform_page_footer input[type=submit]:hover,body .gform_wrapper input[type=button]:hover,body div.form_saved_message div.form_saved_message_emailform form input[type=submit]:hover {
cursor:pointer;
}

body .gform_wrapper .gform_fileupload_multifile input[type=button] {
font-size:14px;
}

body .gform_wrapper li.gfield.gfield_error.gfield_contains_required {
margin-top:0;
margin-bottom:0!important;
}

body .gform_wrapper li.gfield.gfield_error,body .gform_wrapper li.gfield.gfield_error.gfield_contains_required.gfield_creditcard_warning {
background-color:transparent;
margin-bottom:0!important;
border:none;
padding:0!important;
}

body .gform_wrapper .top_label .gfield_error {
width:inherit;
}

body .gform_wrapper .gfield_error .gfield_label {
color:inherit;
}

body .gform_wrapper .top_label li.gfield.gfield_error.gf_left_third,body .gform_wrapper .top_label li.gfield.gfield_error.gf_middle_third,body .gform_wrapper .top_label li.gfield.gfield_error.gf_right_third {
width:32%;
}

body .gform_wrapper .datepicker {
width:17em!important;
margin-top:0;
margin-bottom:0!important;
line-height:initial;
height:initial;
padding:6px 20px;

}

body .gform_wrapper .gfield_date_day input,body .gform_wrapper .gfield_date_month input,body .gform_wrapper .gfield_date_year input,body .gform_wrapper .gfield_time_hour input,body .gform_wrapper .gfield_time_minute input {
padding-right:6px!important;
}

body .gform_wrapper .gfield_time_hour i {
width:25%;
}

body .gform_wrapper .gfield_date_day,body .gform_wrapper .gfield_date_month {
width:4.5em;
}

body .gform_wrapper .gfield_date_year {
width:5.5em!important;
}

body .gform_wrapper .gf_progressbar_percentage {
font-family:inherit;
}

@media max-width641px{
body .gform_wrapper .gform_page_footer .button.gform_button,body .gform_wrapper .gform_page_footer .button.gform_next_button,body .gform_wrapper .gform_page_footer .button.gform_previous_button {
margin:0 0 .5em;
}
}

@media min-width641px{
body .gform_wrapper .gform_footer a.gform_save_link,body .gform_wrapper .gform_page_footer a.gform_save_link {
float:left;
}
}

body .gform_wrapper .gform_body .gform_fields .gfield .gfield_label .gfield_required {color: transparent}

body .gform_wrapper input {
 margin:10px 0 0 0!important;
}

.entry-content .gform_wrapper input {
    margin-bottom: 0;
}

.gform_footer {margin: 0px !important;}

body .gform_wrapper ul li.gfield {
margin-top: 0 !important;
margin-bottom: 5px;
}
.gform_wrapper .top_label .gfield_label {
display: none;
}

#field_1_10 textarea#input_1_10 {
margin-top: 10px;
}
li#field_1_6 {
margin-bottom: 15px !important;
}

body .gform_wrapper textarea {
    height: 150px!important;
}

Read More

Make Divi slider content not disappear through transition

To only have the background image change when the slide changes when you have added the same content to each slide, but it disappears briefly through slide transitions. This will make it stay. Add this css code into Divi > Theme Options > General > Custom CSS field.

 .et-pb-active-slide .et_pb_slide_description {
animation: 0s ease 0s normal none 1 running none !important;
-webkit-animation: none !important;
}

Read More

Disable related YouTube videos with DIVI

Login to wp-admin and in Divi / Integration / Add code to the < head > of your blog

Add the following code:

<script type="text/javascript">
(function($) {

$(window).load(function() {
// Disable YouTube Related Videos
$('.fluid-width-video-wrapper').each(function() {
var src = $(this).find('iframe').attr('src');
$(this).find('iframe').attr('src', src + '&amp;rel=0');
});
});

$(document).ready(function() {
// Open project promo in new tab.
$('.single-project .et_pb_promo').find('a').attr('target', '_blank');
});

})(jQuery);
</script>

Read More