Copy this block in your theme:
add_filter('vibe_builder_thumb_styles','custom_vibe_builder_thumb_styles'); add_filter('vibe_featured_thumbnail_style','custom_vibe_featured_thumbnail_style',1,3); function custom_vibe_builder_thumb_styles($styles){ $styles['modern_block'] = VIBE_CHILD_URL.'/thumb_modern.png'; return $styles; } function custom_vibe_featured_thumbnail_style($thumbnail_html,$post,$style){ if($style == 'modern_block'){ $thumbnail_html =''; $thumbnail_html .= '<div class="block modern_course">'; $thumbnail_html .= '<div class="block_media">'; $thumbnail_html .= '<a href="'.get_permalink($post->ID).'">'.get_the_post_thumbnail($post->ID,'medium').'</a>'; $thumbnail_html .= '</div>'; $thumbnail_html .= '<div class="block_content">'; $thumbnail_html .= '<h4 class="block_title"><a href="'.get_permalink($post->ID).'" title="'.$post->post_title.'">'.$post->post_title.'</a></h4>'; $thumbnail_html .= '<span>'; $thumbnail_html .= get_the_term_list($post->ID,'course-cat','',','); $thumbnail_html .= '</span>'; $thumbnail_html .= '<div class="course_meta"> <i class="icon-users"></i> '.get_post_meta($post->ID,'vibe_students',true).' '.bp_course_get_course_credits().' </div>'; $thumbnail_html .= ''; $thumbnail_html .= '</div></div>'; } return $thumbnail_html; }
CSS for this block :
.block.modern_course{ border: 1px solid #EFEFEF; border-radius: 2px; text-align:left; } .block.modern_course .block_content { position: relative;min-height:140px; padding: 5px 15px 5px; } .block.modern_course h4+span{ font-size: 12px; color: #bbb; font-style: italic; line-height:1.2; } .block.modern_course .course_meta{ color:#bbb; position: absolute; position: absolute; width: 100%; left: 0; padding: 0 20px; bottom: 10px; } .block.modern_course .course_meta i{ font-size: 16px; float: left; margin-right: 5px; } .block.modern_course .course_meta strong{ float: right; color: #70c989; }