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


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

Posted on 15:37:00by Guest Contributor with No comments

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

Posted on 13:05:00by Guest Contributor with No comments
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;
}
}
Subscribe to: Posts (Atom)