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

Read More

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

Read More

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

 

 

Read More

Disable sync clients from showing in ownCloud

Add this custom CSS to hide the sync clients from showing in ownCloud.

#app-navigation li > a {
min-height: 0px;
}

a[href="#clientsbox"] {
visibility:hidden;
height: 0px;
}

div#clientsbox {
visibility: hidden;
width: 0px;
height: 0px;
}

Read More

Hide search bar on wpDataTables

By default the wpDataTables plugin may display a search bar on all of your tables. I added this simple CSS code to hide it:

.dataTables_filter {display: none; }

Read More

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>

Read More

How to remove the widget title bar on Extra

If you are using the Extra theme from Elegant Themes, you will notice the pointless and ugly bar that appears even if you have no text in the title of the widget. This custom CSS will take care of removing this bar:

.widgettitle {display: none; }

Read More

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

Read More

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

Read More

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

Read More