How to change the DIVI video module overlay image

If you use the overlay option in the video module and generated a thumbnail for the video, you will notice the play icon on top of that image as seen here:


However, if you want to change it, it can be done with a simple CSS code:

.et_pb_video_play:before {
}
a.et_pb_video_play {
    margin-left: 0 !important;
    left: 0;
    right: 0;
}

Add the code in Dashboard > Divi > Theme Options > Custom CSS field and you should see the new image.

Be sure to change the image link, the width, and the height of your image.


Disable video module hover effect on DIVI

How do you disable the dark grey hover effect for video module?

Add the following code snippet inside Appearance > Customize > Additional CSS 

.et_pb_video_overlay_hover {
background-color: transparent !important;
}

Place DIVI blog post featured images on the left of text

The DIVI theme offers two blog layouts. Grid and Standard. I came across this custom CSS that places the featured on the left perfectly.

You can read the full post of DIVIbooster or add the below code to custom CSS in theme options. 

@media only screen and (min-width: 981px) {
.et_pb_posts .et_pb_post img,
.et_pb_posts .et_overlay {
width: 38%;
height: 180px !important;
margin-right: 4%;
float: left;
}
.et_pb_posts .entry-title,
.et_pb_posts .post-meta,
.et_pb_posts .post-content { 
    float: right; 
    width: 58%; 
}
body.rtl .et_pb_posts .et_pb_post img,
body.rtl .et_pb_posts .et_overlay {
float: right;
margin-left: 4%;
margin-right: 0;
}
body.rtl .et_pb_posts .entry-title,
body.rtl .et_pb_posts .post-meta,
body.rtl .et_pb_posts .post-content { 
    float: left; 
}
}


Moving a the DIVI menu module up to where the original menu should be

If you have removed the MENU on a specific page and wish to have the Menu Module take its place. Simply follow these steps. 


Go to Menu Setting > Advanced > CSS ID & Classes > and add this below class.

cstm_menu

Take a look at this screenshot:


And then please go to your WordPress Dashboard > Divi > Theme Options > Custom CSS and add the following:

@media only screen and (min-width:981px){
.cstm_menu{
    position:relative;
    left:50px;
    bottom:50px;
}    
}

Elegant CSS style for custom DIVI tabs module

Came across this custom DIVI tab style.

Divi tab style


You will just need to change the CSS Class to: icon-tabs

Paste this code in the custom CSS:

.et_pb_tabs.icon-tabs {
border: none;
}
.icon-tabs ul {
margin-bottom: 30px;
}

.icon-tabs .et_pb_tabs_controls li {
border-right: none;
}

.icon-tabs ul.et_pb_tabs_controls {
background-color: white;
}
.icon-tabs img.alignleft {
margin-right: 70px;
}
.icon-tabs .et_pb_all_tabs {
border-top: none;
}

.icon-tabs .et_pb_tabs_controls {
padding: 0 10% !important;
}
.icon-tabs .et_pb_tabs_controls li {
width: 50% !important;
}
.icon-tabs .et_pb_tabs_controls li a {
width: 100% !important;
text-align:center;
color: #a3a3a3;
text-transform: uppercase;
letter-spacing:2px;
font-weight: 600 !important;
}
.icon-tabs .et_pb_tab_active a {
color: #0b83a1 !important;
}
.icon-tabs .et_pb_tab h2 {
line-height: 1.5em;
color: #0b83a1;
font-weight: 600 !important;
font-size: 24px;
}
.icon-tabs .et_pb_tab p {
font-weight: 600 !important;
}
.icon-tabs .et_pb_tabs_controls li a:before {

display:block;
font-size:40px;
color: #a3a3a3;
margin-bottom: 15px;
font-weight: 600 !important;
}

.icon-tabs .et_pb_tabs_controls li.et_pb_tab_active a:before {
color: #0b83a1;
}

ul.et_pb_tabs_controls::after {
border-top: none !important;
}

.et_pb_tabs .et_pb_all_tabs .et_pb_tab {
padding-top: 1em;
}

/*
* === Mobile Styles ===
*/
@media (max-width: 768px) {

.icon-tabs .et_pb_tabs_controls li {
width: 100% !important;
}

.icon-tabs .et_pb_tabs_controls {
padding: 0 !important;
}

.icon-tabs .et_pb_tabs_controls li {
margin-bottom: 35px;
}
}

Custom DIVI Tabs style

Here is a custom DIVI tabs style.

Simply paste the into custom CSS and change the CSS class of the tab module to: divi-style-tabs

@media (min-width: 981px) {
/*set a minimum height (at least as tall as your tallest tabs content) for the tab section so the page doesnt jump with different tab content heights*/
.divi-style-tabs .et_pb_tabs {min-height:500px;}
 
/*edit the tab BG + text/hover colour for tab text*/
/*width % is dependant on how many tabs you want. 100/number of tabs=xx%*/
.divi-style-tabs .et_pb_tabs_controls li {width: 14.3%; background-color: #fff!important;}
.divi-style-tabs .et_pb_tabs_controls li a { min-width: 60px; text-align: center; display: block; margin-top:-30px;padding-top: 60px!important; color:#ccc} /*alignment and size of tab icon/text*/
.divi-style-tabs .et_pb_tabs_controls li a:hover { color:#333; }
}


How to change the DIVI toggle menu item

This custom CSS code will make your toggle icon look better than the default.

Please open Module Settings > Advanced, give CSS Class custom-module in it and add the following code to Dashboard / Appearance / Customize / Additional CSS:


.custom-module .et_pb_toggle_title:before {
content: '+' !important;
font-family: unset !important;
}

.custom-module .et_pb_toggle_open .et_pb_toggle_title:before {
transform: rotate(45deg) !important;
}
Subscribe to: Posts (Atom)

cssDorks is brought to you by Thexyz Inc..