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;
}

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;
}

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>

Reduce vertical spacing between Gravity Forms fields

To reduce the spacing between vertical forms fields you can remove the upper wrapper to push things up a bit, add this css code to your stylesheet.

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

Hide the "required" * with Gravity Forms

If you want the * to not appear if a field is required but I still want to be able to use the "required" functionality. Add the following to your CSS file.

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

Add a background and border to Gravity Forms


 Want to add background and border with radius. Simply add this css code to your style.css file.
 
.gform_wrapper {
    background-color: #339999;
    border: 1px solid #112233;
    border-radius: 8px;
    padding: 20px;
}

Add line under active menu item

To add a line under each active menu item in Divi, paste the below code to suit.



 #top-menu li.current-menu-item > a {
border-bottom: 8px solid #00a94f;
font-weight: bold;
padding-bottom: 23px !important;
}

 

Want to share CSS?

Do you make CSS edits and want to share your work. We have easy tools to allow you to share your work on cssDorks.

Search

Loading...

Tags

NYC Airports Limo offers NYC limo Service and New York Limousine Service from New York City to John F. Kennedy - JFK, LaGuardia Airport - LGA, Newark Liberty Airport - EWR and Westchester County Airport - HPN. NYC Airports Limo use Sedans & SUVs for Limo Service NYC to NJ, Pennsylvania, Connecticut, New Jersey, Long Island, Queens, Brooklyn, Bronx, Staten Island, New York City, Nassau County, Suffolk County & Upstate NY. NYC Airports Limo is has vast experience in assisting clients get to popular destinations.

CT Airlink offers the Airport Shuttle Service throughout Connecticut to JFK, LaGuardia - LGA, Newark - EWR, Boston Logan, Westchester County Airport - HPN and Hartford Bradley Airport. CT Airlink use Mini Coach, Mercedes Sprinters and Luxury Vans for CT Airport Shuttle . Allow us to assist you getting to and from all airports in New York, Connecticut and New Jersey with total ease & comfort or to provide private charter service with our Airport Transportation & Bus Service CT for the entire duration of your stay.