Skip to content

Instantly share code, notes, and snippets.

@elicus
elicus / gist:1f3088e42a7f7837c034cb33874b0287
Created July 27, 2018 12:18
How to adjust width of media and content container in Full width Layout of Divi Blog Extras Plugin
Option 1: This option uses one third of available width for image and two third for the content area. (default is 50%)
@media screen and (min-width: 981px){
.et_pb_column_3_4 .et_pb_post_extra.el_dbe_full_width .post-media{
width: calc((100% - 120px) / 3);
}
.et_pb_column_3_4 .et_pb_post_extra.el_dbe_full_width .post-content{
width: calc((100% - 120px) / 3 * 2);
}
}
@elicus
elicus / divi-tabs-on-left-vertically
Created December 3, 2018 08:22
Custom CSS for Placing Divi Tabs Vertically
.custom-tabs .et_pb_tab_active a {
color: #ffffff!important;
}
.custom-tabs ul.et_pb_tabs_controls {
float: left;
width: 30%;
display: block;
background: transparent;
}
@elicus
elicus / remove-divi-post-status.php
Created January 3, 2019 07:36
Remove — Divi string from the WordPress Page/Post/Custom Post Type List
function remove_divi_post_status( $post_states, $post ) {
// Make sure that $post_states is an array. Third party plugin might modify $post_states and makes it null
// which create various issue (i.e. Piklist + Having a page configured as a static page)
if ( ! is_array( $post_states ) ) {
$post_states = array();
}
if ( et_pb_is_pagebuilder_used( $post->ID ) ) {
// Remove Divi if existing
$key = array_search( 'Divi', $post_states );
@elicus
elicus / Add description to Divi theme menu items
Last active January 17, 2019 13:44
Add description to Divi theme menu items
<?php
function nav_menu_description( $item_output, $item, $depth, $args ) {
if ( !empty( $item->description ) ) {
$item_output = str_replace( $args->link_after . '</a>', '<span class="menu-item-description">' . $item->description . '</span>' . $args->link_after . '</a>', $item_output );
}
return $item_output;
}
add_filter( 'walker_nav_menu_start_el', 'nav_menu_description', 10, 4 );
?>
@elicus
elicus / Divi Dental Footer Demo Code and HTML
Created February 12, 2019 11:53
Divi Dental Footer Demo Code and HTML
@elicus
elicus / Open social icons links in new window - Divi Theme
Created March 29, 2019 11:25
Open social icons links in new window - Divi Theme
@elicus
elicus / Open social icons links in new window - Extra Theme
Created March 29, 2019 11:26
Open social icons links in new window - Extra Theme
@elicus
elicus / Divi Blink Sidebar Widget Code
Created May 29, 2019 12:49
Divi Blink Sidebar Widget Code
Default media and container width is 50%. The following CSS snippet will change the media container width to 1/4 and post content to 3/5.
@media screen and (min-width: 981px){
.et_pb_column_4_4 .et_pb_post_extra.el_dbe_full_width .post-media {
width: calc((100% - 120px)/ 4);
}
.et_pb_column_4_4 .et_pb_post_extra.el_dbe_full_width .post-content {
width: calc((100% - 120px)/ 4*3);
}
}
@elicus
elicus / Divi Blog Extras Custom Post BG Color
Last active February 20, 2020 12:47
Divi Blog Extras Custom Post BG Color
$postbg = get_post_meta( get_the_ID(), 'postbg', true);
if( ! empty( $postbg ) ) {
$postbg = get_post_meta($post->ID, 'postbg', true);
$posts .= '<div class="post-content" style="background-color: '.$postbg.' ;">';
} else{
$posts .= '<div class="post-content">';
}