Hide the navigation menu in DIVI

Posted on 14:29:00by Guest Contributor with No comments

 Add this custom CSS code to your DIVI theme options page and it will hide the navigation menu links:


/* Hide the header navigation links */

#et-top-navigation { 

    visibility: hidden; 

}

/* Don't hide the centered inline logo */

#et-top-navigation .centered-inline-logo-wrap {

    visibility: visible;

}

How to prevent people copying content from your website

Posted on 20:59:00by Guest Contributor with No comments

To disable the copy content on all pages of your website with CSS, just follow the steps below to add the CSS snippet to your main CSS style page.

  1. Open your website main css file (style.css or default.css)
  2. Add the below code to the top of the .css file.

body{-webkit-touch-callout:none;-webkit-user-select: none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;} 

How to change the DIVI video module overlay image

Posted on 20:32:00by Guest Contributor with No comments
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

Posted on 13:14:00by Guest Contributor with No comments
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

Posted on 17:09:00by Guest Contributor with No comments
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; 
}
}


Subscribe to: Posts (Atom)