Useful Code Snippets

Equal height for blog grid items

<!-- EQUAL HEIGHT BOXES -->
<script type="text/javascript">
(function($){
$(window).on("resize", function() {
equal_height($('.et_pb_blog_grid .et_pb_post'));
}).resize();;
function equal_height(group) {
var tallest = 0;
$(group).attr('style', '');
group.each(function() {
var this_height = $(this).height();
if(this_height > tallest) {
tallest = this_height;
}
});
group.height(tallest + 8);
}
})(jQuery);
</script>

Target _blank for social icons

<!-- TARGET BLANK FOR SOCIAL ICONS -->
<script type="text/javascript">
jQuery(document).ready(function($){
    $('.et-social-icon .icon').each(function(){
        $(this).attr('target', 'blank');
    });
});
</script>

Selectively remove vcards from post meta

<!-- REMOVE META COMPONENTS FROM POST SLIDER -->
<script type="text/javascript">
jQuery( document ).ready(function() {
jQuery('.trimmed-meta .post-meta').each(function(i, v) {
jQuery(v).contents().eq(0).wrap('<div class="remove-bar"></div>');
jQuery(v).contents().eq(1).wrap('<div class="remove-bar"></div>');
jQuery(v).contents().eq(2).wrap('<div class="remove-bar"></div>');
jQuery(v).contents().eq(4).wrap('<div class="remove-bar"></div>');
jQuery(v).contents().eq(5).wrap('<div class="remove-bar"></div>');
jQuery(v).contents().eq(6).wrap('<div class="remove-bar"></div>');
});
});
</script>

.remove-bar { display: none; }

Smart collapse mobile menu

<!-- COLLAPSIBLE MOBILE MENU -->
<script>
jQuery(document).ready(function($){
function ds_setup_collapsible_submenus() {
    var $menu = $('.et_mobile_menu');
  top_level_link = '.et_mobile_menu .menu-item-has-children > a.toggle-menu';
  $( '<a href="#" class="toggle-menu">C</a>' ).insertBefore( ".et_mobile_menu .menu-item-has-children > a" );

  $menu.find('a.toggle-menu').each(function() {
   
    $(this).off('click');
  

    if ( ! $(this).siblings('.sub-menu').length ) {
      $(this).on('click', function(event) {
        $(this).parents('.mobile_nav').trigger('click');
      });
    } else {
      $(this).on('click', function(event) { 
  
        event.preventDefault();
        $(this).parent().toggleClass('visible');
      });
    }
  });
}
$(window).load(function() {
  setTimeout(function() {
    ds_setup_collapsible_submenus();
  }, 700);
});
});
</script>

/*** COLAPSIBLE MOBILE MENU ***/
.et_pb_menu .et_mobile_menu .menu-item-has-children > a, #main-header .et_mobile_menu .menu-item-has-children > a {
    background-color: transparent;
    position: relative;
}
.et_pb_menu .et_mobile_menu .menu-item-has-children > a.toggle-menu, #main-header .et_mobile_menu .menu-item-has-children > a.toggle-menu {
    font-family: 'ETmodules';
    font-size: 18px;
    padding: 10px;
    z-index: 10;
    display: inline-block;
    position: absolute;
    right: 5px;
 }
.et_pb_menu .et_mobile_menu .menu-item-has-children.visible > a.toggle-menu, #main-header .et_mobile_menu .menu-item-has-children.visible > a.toggle-menu {
     transform: rotate(180deg);
}

.et_pb_menu .et_mobile_menu ul.sub-menu, #main-header .et_mobile_menu ul.sub-menu {
    display: none !important;
    visibility: hidden !important;
    transition: all 1.5s ease-in-out;
}
.et_pb_menu .et_mobile_menu .visible > ul.sub-menu, #main-header .et_mobile_menu .visible > ul.sub-menu {
    display: block !important;
    visibility: visible !important;
}

Short underline style for headings

.highlighted h1, .highlighted h2 { margin-bottom: 20px; }
.highlighted h1:after, .highlighted h2:after { 
    content: ""; 
    display: block; 
    margin: 0; 
    width: 80px; 
    padding-top: 10px; 
    border-bottom: 6px solid #f68a2c; 
}

Fix logo overlapping with menu

@media screen and (min-width: 981px) and (max-width: 1235px) { #main-header .et_menu_container { width: 100% !important; padding: 0 30px 0 10px; } }

Add 50% vertical line between columns

#simulated-footer .et_pb_column:after { 
  content:""; 
  background: rgba(0,0,0,0.5); 
  position: absolute; 
  top: 25%; 
  left: 0; 
  height: 50%; 
  width: 1px;
}

Thin responsive post slider

/*** THIN POST SLIDER ***/
#thin-slider { padding: 20px 0; background-color: transparent !important; }
#thin-slider .et_pb_slide_content { display: none !important; }
@media screen and (max-width: 767px) { #thin-slider .et_pb_slide_title { text-align: center; } }
@media screen and (min-width: 768px) { 
#thin-slider .et_pb_slide_description { display: flex; }
#thin-slider .et_pb_slide_description h3 { padding-bottom: 0; }
#thin-slider .et_pb_slide_title { 
	display: flex; 
        justify-content: center;
        flex-direction: column;
        max-width: 80%;
        padding-right: 30px;
}
#thin-slider .et_pb_more_button { margin-top: 0;   white-space: nowrap; }
#thin-slider .et_pb_button_wrapper { 
	display: flex; 
        justify-content: center;
        flex-direction: column;
}
}

Google Calendar responsive iframe

/**** GOOGLE CALENDAR RESPONSIVE IFRAME ****/
@media (max-width: 650px) {
	.big-container { display: none; }
	.responsive-iframe-container { padding-bottom: 130% !important; }
}
@media (min-width: 650px) {
	.small-container { display: none; }
}
.responsive-iframe-container {
	position: relative;
    padding-bottom: 60%;
	padding-top: 30px;
	height: 0;
	overflow: hidden;
}
.responsive-iframe-container iframe,   
.vresponsive-iframe-container object,  
.vresponsive-iframe-container embed {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

Divi Article Cards -- show 3 stacked categories

/*** DIVI ARTICLE CARDS ***/
.divi-100-article-card .et_pb_blog_grid .article-card__content { background: #f4f4f4; }
.article-card__title { color: #0066cc !important; }
.article-card__excerpt { line-height: normal; }

.article-card__content a.article-card__category {display: block !important; }
.article-card__content a.article-card__category:hover { color: #ffffbb !important; }

.article-card__content a.article-card__category:nth-of-type(1) { top: -102px !important; }
.article-card__content a.article-card__category:nth-of-type(2) { top: -68px !important; }
.article-card__content a.article-card__category:nth-of-type(3) { top: -34px !important; }
.article-card__content a.article-card__category:nth-of-type(4) { top: -136px !important; }
.article-card__content a.article-card__category:nth-of-type(2) { background: #004990; }
.article-card__content a.article-card__category:nth-of-type(4) { background: #004990; }

Styled quote block (DvarTora style)

/*** QUOTES ***/
blockquote {
	display:block;
	color: #000000;
	padding: 20px 20px 20px 48px;
	margin: 20px 0 25px;
	position: relative;
	border-left: 15px solid;
	border-right: 2px solid;
	-moz-box-shadow: 2px 2px 10px #ccc;
	-webkit-box-shadow: 2px 2px 10px #ccc;
	box-shadow: 2px 2px 10px #ccc;
}

blockquote:before {
	content: "201C"; /*Unicode for Left Double Quote*/
	font-family: Georgia, serif;
	font-size: 60px;
	font-weight: bold;
	color: #999;
	position: absolute;
	left: 10px;
	top:30px;
}

blockquote:after { content: ""; }

Fancy divider line for H3 heading (both sides)

/*** FANCY ***/
h3.fancy { display: table; width: 100%; font-weight: 600; text-align: center; }
h3.fancy:before, h3.fancy:after { 
	content: '';
  	width: 34%;
  	background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+CjwhLS0gQ3JlYXRlZCB3aXRoIElua3NjYXBlIChodHRwOi8vd3d3Lmlua3NjYXBlLm9yZy8pIC0tPgoKPHN2ZwogICB4bWxuczpkYz0iaHR0cDovL3B1cmwub3JnL2RjL2VsZW1lbnRzLzEuMS8iCiAgIHhtbG5zOmNjPSJodHRwOi8vY3JlYXRpdmVjb21tb25zLm9yZy9ucyMiCiAgIHhtbG5zOnJkZj0iaHR0cDovL3d3dy53My5vcmcvMTk5OS8wMi8yMi1yZGYtc3ludGF4LW5zIyIKICAgeG1sbnM6c3ZnPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIKICAgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIgogICB2ZXJzaW9uPSIxLjEiCiAgIHdpZHRoPSIxMiIKICAgaGVpZ2h0PSIxMiIKICAgaWQ9InN2ZzIiPgogIDxkZWZzCiAgICAgaWQ9ImRlZnM0Ij4KICAgIDxsaW5lYXJHcmFkaWVudAogICAgICAgaWQ9ImxpbmVhckdyYWRpZW50Mzc3MSI+CiAgICAgIDxzdG9wCiAgICAgICAgIGlkPSJzdG9wMzc3MyIKICAgICAgICAgc3R5bGU9InN0b3AtY29sb3I6I2MwYzVjZTtzdG9wLW9wYWNpdHk6MSIKICAgICAgICAgb2Zmc2V0PSIwIiAvPgogICAgICA8c3RvcAogICAgICAgICBpZD0ic3RvcDM3ODEiCiAgICAgICAgIHN0eWxlPSJzdG9wLWNvbG9yOiNjMGM1Y2U7c3RvcC1vcGFjaXR5OjEiCiAgICAgICAgIG9mZnNldD0iMC4wNSIgLz4KICAgICAgPHN0b3AKICAgICAgICAgaWQ9InN0b3AzNzc5IgogICAgICAgICBzdHlsZT0ic3RvcC1jb2xvcjojYzBjNWNlO3N0b3Atb3BhY2l0eTowIgogICAgICAgICBvZmZzZXQ9IjAuMDUiIC8+CiAgICAgIDxzdG9wCiAgICAgICAgIGlkPSJzdG9wMzc4MyIKICAgICAgICAgc3R5bGU9InN0b3AtY29sb3I6I2MwYzVjZTtzdG9wLW9wYWNpdHk6MCIKICAgICAgICAgb2Zmc2V0PSIwLjEiIC8+CiAgICAgIDxzdG9wCiAgICAgICAgIGlkPSJzdG9wMzc4NSIKICAgICAgICAgc3R5bGU9InN0b3AtY29sb3I6I2MwYzVjZTtzdG9wLW9wYWNpdHk6MSIKICAgICAgICAgb2Zmc2V0PSIwLjEiIC8+CiAgICAgIDxzdG9wCiAgICAgICAgIGlkPSJzdG9wMzc4NyIKICAgICAgICAgc3R5bGU9InN0b3AtY29sb3I6I2MwYzVjZTtzdG9wLW9wYWNpdHk6MSIKICAgICAgICAgb2Zmc2V0PSIwLjE1MDAwMDAxIiAvPgogICAgICA8c3RvcAogICAgICAgICBpZD0ic3RvcDM3NzUiCiAgICAgICAgIHN0eWxlPSJzdG9wLWNvbG9yOiNmZjkwMjM7c3RvcC1vcGFjaXR5OjAiCiAgICAgICAgIG9mZnNldD0iMSIgLz4KICAgIDwvbGluZWFyR3JhZGllbnQ+CiAgPC9kZWZzPgogIDxtZXRhZGF0YQogICAgIGlkPSJtZXRhZGF0YTciPgogICAgPHJkZjpSREY+CiAgICAgIDxjYzpXb3JrCiAgICAgICAgIHJkZjphYm91dD0iIj4KICAgICAgICA8ZGM6Zm9ybWF0PmltYWdlL3N2Zyt4bWw8L2RjOmZvcm1hdD4KICAgICAgICA8ZGM6dHlwZQogICAgICAgICAgIHJkZjpyZXNvdXJjZT0iaHR0cDovL3B1cmwub3JnL2RjL2RjbWl0eXBlL1N0aWxsSW1hZ2UiIC8+CiAgICAgICAgPGRjOnRpdGxlPjwvZGM6dGl0bGU+CiAgICAgIDwvY2M6V29yaz4KICAgIDwvcmRmOlJERj4KICA8L21ldGFkYXRhPgogIDxnCiAgICAgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMCwtMTA0MC4zNjIyKSIKICAgICBpZD0ibGF5ZXIxIj4KICAgIDxwYXRoCiAgICAgICBkPSJtIDAsMTA0MC4zNjIyIDEsMCAtMSwxIHoiCiAgICAgICBpZD0icGF0aDM3OTEiCiAgICAgICBzdHlsZT0iZmlsbDojYzBjNWNlO2ZpbGwtb3BhY2l0eToxO3N0cm9rZTpub25lIiAvPgogICAgPHBhdGgKICAgICAgIGQ9Im0gMCwxMDQ0LjM2MjIgMCwxIDUsLTUgLTEsMCB6IgogICAgICAgaWQ9InBhdGgzNzk1IgogICAgICAgc3R5bGU9ImZpbGw6I2MwYzVjZTtmaWxsLW9wYWNpdHk6MTtzdHJva2U6bm9uZSIgLz4KICAgIDxwYXRoCiAgICAgICBkPSJtIDgsMTA0MC4zNjIyIC04LDggMCwxIDksLTkgeiIKICAgICAgIGlkPSJwYXRoMzc5OSIKICAgICAgIHN0eWxlPSJmaWxsOiNjMGM1Y2U7ZmlsbC1vcGFjaXR5OjE7c3Ryb2tlOm5vbmUiIC8+CiAgICA8cGF0aAogICAgICAgZD0iTSAxMiwwIDAsMTIgMSwxMiAxMiwxIHoiCiAgICAgICB0cmFuc2Zvcm09InRyYW5zbGF0ZSgwLDEwNDAuMzYyMikiCiAgICAgICBpZD0icGF0aDM4MzAiCiAgICAgICBzdHlsZT0iZmlsbDojYzBjNWNlO2ZpbGwtb3BhY2l0eToxO3N0cm9rZTpub25lIiAvPgogICAgPHBhdGgKICAgICAgIGQ9Im0gNCwxMiAxLDAgNywtNyAwLC0xIHoiCiAgICAgICB0cmFuc2Zvcm09InRyYW5zbGF0ZSgwLDEwNDAuMzYyMikiCiAgICAgICBpZD0icGF0aDM4MzIiCiAgICAgICBzdHlsZT0iZmlsbDojYzBjNWNlO2ZpbGwtb3BhY2l0eToxO3N0cm9rZTpub25lIiAvPgogICAgPHBhdGgKICAgICAgIGQ9Im0gOCwxMiA0LC00IDAsMSAtMywzIHoiCiAgICAgICB0cmFuc2Zvcm09InRyYW5zbGF0ZSgwLDEwNDAuMzYyMikiCiAgICAgICBpZD0icGF0aDM4MzQiCiAgICAgICBzdHlsZT0iZmlsbDojYzBjNWNlO2ZpbGwtb3BhY2l0eToxO3N0cm9rZTpub25lIiAvPgogIDwvZz4KPC9zdmc+Cg==) repeat-x center center;
 
	display: table-cell;
	-moz-background-clip: padding-box;
	-webkit-background-clip: padding-box;
	background-clip: padding-box; 
}
h3.fancy:before { border-right: 10px solid transparent; }
h3.fancy:after { border-left: 10px solid transparent; }

Make entire slide of Slider clickable to url (no button shown)

#home-banner .et_pb_more_button {
     font-size: 0px;
     background-color: rgba(0, 0, 0, 0.0) !important;
     top: -1000px;
     right: -1000px;
     height: 5000px;
     width: 5000px;
     position: absolute;
}

Insert H3 heading inside Divi's Contact Form module

<!-- ADD HEADINGS TO CONTACT FORM -->
<script type="text/javascript">
(function($) {
$(document).ready(function() {
$('.special-form .et_pb_contact_field_0').before('<h3>Service</h3>');
});
})(jQuery);
</script>

#intake-form h3 { clear: both !important; padding-left: 20px; margin: 10px 0; font-weight: 600; }

HTML entities code for social icons

.et-social-facebook a.icon:before { content: 'e093'; }
.et-social-twitter a.icon:before { content: 'e094'; }
.et-social-google-plus a.icon:before { content: 'e096'; }
.et-social-pinterest a.icon:before { content: 'e095'; }
.et-social-linkedin a.icon:before { content: 'e09d'; }
.et-social-tumblr a.icon:before { content: 'e097'; }
.et-social-instagram a.icon:before { content: 'e09a'; }
.et-social-skype a.icon:before { content: 'e0a2'; }
.et-social-flikr a.icon:before { content: 'e0a6'; }
.et-social-myspace a.icon:before { content: 'e0a1'; }
.et-social-dribbble a.icon:before { content: 'e09b'; }
.et-social-youtube a.icon:before { content: 'e0a3'; }
.et-social-vimeo a.icon:before { content: 'e09c'; }
.et-social-rss a.icon:before { content: 'e09e'; }

Fullwidth Header -- fix mobile whitespace + buttons

.et_pb_fullwidth_header .et_pb_fullwidth_header_container .header-content a.et_pb_button { margin-top: 35px; } 
@media (max-width: 767px) {	.et_pb_fullwidth_header_container .et_pb_button_one { margin-right: 0 !important; } }
@media only screen and (max-width: 980px) {
	.et_pb_fullwidth_header_container {
	min-height: auto !important;
	height: 100vh !important;
	margin-top: -82px !important;
	}
}

Translate Divi date formats for WPML

function translate_date_format( $format ) {
    // Register date format for String Translation.
    do_action( 'wpml_register_single_string', 'Date Formats', $format, $format );
    // Get translated version of date format.
    $format = apply_filters( 'wpml_translate_single_string', $format, 'Date Formats', $format );
    return $format;
}
add_filter( 'option_date_format', 'translate_date_format', 10, 1 );

function et_pb_postinfo_meta( $postinfo, $date_format, $comment_zero, $comment_one, $comment_more ){
$postinfo_meta = '';

if ( in_array( 'author', $postinfo ) )
$postinfo_meta .= ' ' . esc_html__( 'by', 'et_builder' ) . ' <span class="author vcard">' . et_pb_get_the_author_posts_link() . '</span>';

if ( in_array( 'date', $postinfo ) ) {
if ( in_array( 'author', $postinfo ) ) $postinfo_meta .= ' | ';
$postinfo_meta .= '<span class="published">' . esc_html( get_the_date() ) . '</span>';
}

if ( in_array( 'categories', $postinfo ) ) {
$categories_list = get_the_category_list(', ');

// do not output anything if no categories retrieved
if ( '' !== $categories_list ) {
if ( in_array( 'author', $postinfo ) || in_array( 'date', $postinfo ) )	$postinfo_meta .= ' | ';

$postinfo_meta .= $categories_list;
}
}

if ( in_array( 'comments', $postinfo ) ){
if ( in_array( 'author', $postinfo ) || in_array( 'date', $postinfo ) || in_array( 'categories', $postinfo ) ) $postinfo_meta .= ' | ';
$postinfo_meta .= et_pb_get_comments_popup_link( $comment_zero, $comment_one, $comment_more );
}

return $postinfo_meta;
}

Make entire blurb clickable

<script type="text/javascript">
jQuery(document).ready(function($) {
	$(".blurb_click_newtab").click(function() {
		 var blurbLink = $(this).find("a");
		 blurbLink.attr("target", "_blank");
		 window.open(blurbLink.attr("href"));
		 return false;
	});
});
</script>

.blurb_click_newtab:hover {cursor: pointer;}