Change image on hover for DIVI Blurp module

To change the image of a blurp when you hover over it, add this custom CSS and edit the image URL in red with your image.

.et_pb_main_blurb_image:hover {
content: url('http://www.example.com/wp-content/themes/Divi/images/logo.png') !important;
}

Convert Bullets List in Checkmarks

If you have a bullet list but and would like to use check marks instead. Add this custom CSS code:

.my-bullet-text ul {
list-style-type:none!important;
}
.my-text ul ul li:before {
content: "✓";
color:black;
float:left;
padding-right:5px;
}

Tighten up space between blog grid image and title

To move the title and other text up on DIVI grid, add this css code to Divi - Theme Options - General - Custom Css:

.et_pb_blog_1 .et_pb_post .post-content {
margin-top: -30px;
}
.et_pb_blog_2 .et_pb_post .post-content {
margin-top: -30px;
}
.et_pb_blog_3 .et_pb_post .post-content {
margin-top: -30px;
}
 
 

Integrate Contact Form 7 to DIVI styling

The Contact Form 7 plugin is a popular form plugin for WordPress and Agent WP has written this helpful CSS to integrate Contact Form 7 with DIVI.

.wpcf7-text, .wpcf7-textarea, .wpcf7-captchar {
background-color: #eee !important;
border: none !important;
width: 100% !important;
-moz-border-radius: 0 !important;
-webkit-border-radius: 0 !important;
border-radius: 0 !important;
font-size: 14px;
color: #999 !important;
padding: 16px !important;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.wpcf7-submit {
color: #f0853b!important;
margin: 8px auto 0;
cursor: pointer;
font-size: 20px;
font-weight: 500;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
padding: 6px 20px;
line-height: 1.7em;
background: transparent;
border: 2px solid;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
-moz-transition: all 0.2s;
-webkit-transition: all 0.2s;
transition: all 0.2s;
}
.wpcf7-submit:hover {
background-color: yellow;
border-color:yellow;
padding: 6px 20px !important;
}
</code>

WooCommerce "Related Products" display issue

If you are having a display issue with WooCommerce "Related Products" section wedging itself between the product image and the product title/description as seen in this image.



Add the following CSS code to your custom CSS box:

section.related.products {
clear: both;
}

WooCommerce DIVI custom CSS styling

Add this custom CSS to the DIVI theme menu and see a new CSS style on WooCommerce product page.

woocommerce input.button:hover, .woocommerce-page input.button:hover,
a.checkout-button.button.alt.wc-forward:hover {
padding: 10.2px !important;
color: #fff;
}

.woocommerce-message a.button.wc-forward {
background: #ffffff;
font-family: 'Nunito';
font-size: 16px!important;
color: #424242;
}
input#coupon_code {
background: #424242 !important;
font-family: 'Nunito';
font-size: 16px!important;
}
.woocommerce input.button, .woocommerce-page input.button,
a.checkout-button.button.alt.wc-forward {
background: #e02b20;
font-family: 'Nunito';
font-size: 16px!important;
color: #fff;
padding: 10.2px !important;
}

Change DIVI logo on mobile only

To change the logo on mobile only, add this custom CSS to your theme admin panel:

@media only screen and (max-width: 980px) {
.et_show_nav #logo {
content: url('http://www.domain.com/logo.png') !important;
}
}