Hide the navigation menu in DIVI

Posted on 14:29:00by 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 with 1 comment

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

Custom DIVI Tabs style

Posted on 19:49:00by with No comments
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

Posted on 19:25:00by with No comments
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;
}

How to remove the Weebly Mobile Menu

Posted on 18:23:00by with No comments
In the Weebly Editor click on Pages, and then select the page name from the left side column. Click on SEO Settings and then scroll down to find the HEADER CODE window and copy the following rules into that window, then Publish your site. The Menu will still be visible in the Editor but not in the published public site.

<style>
@media screen and (max-width: 992px) {
    .hamburger {
        display: none !important;
    }
}
</style>
Subscribe to: Posts (Atom)