Margin, metro, mason style grid

Can you please post a screengrab of what you’re hoping to achieve?

https://demo.kairaweb.com/#electa

I meant to add this:

https://demo3.touchsize.com/themes/?theme=diginex

You can do this with a tiny bit of PHP and some CSS.

Please see steps below, and notes below that.

STEPS

1) In your child theme’s functions.php file (or a simple plugin) put the following code…

add_filter( 'tube_filter_show_excerpt_in_post_list', 'mytube_show_excerpt_in_post_list' );

// function to include the excerpt in the post list grid
function mytube_show_excerpt_in_post_list( ) {

  return true; 

}

add_action( 'loop_start', 'mytube_tube_post_list_image_size' );

// function to use large image in the post list grid
function mytube_tube_post_list_image_size(){
    
  set_query_var( 'tube_post_list_image_size', 'tube-img-md-cropped' );

}

2) Go to Appearance > Customize > Additional CSS and paste in this…

ul.list-posts-grid .post-title-wrap a {
    color: #fff;
}

ul.list-posts-grid .post-title-wrap {
    padding: 2em!important;
    background-color: transparent!important;
    text-shadow: .125em .125em .125em rgba(0, 0, 0, .8);
}

ul.list-posts-grid .excerpt {
    margin-bottom: 1em;
    color: #fff;
    font-weight: 700;
}

ul.list-posts-grid .thumbnail img {
    width: 100%;
    height: auto;
}

ul.list-posts-grid > li {
    margin-bottom: 0!important;
    position: relative;
}

ul.list-posts-grid .post-title-wrap .label {
    background-color: rgba(0, 0, 0, .75);
}

ul.list-posts-grid .post-title-wrap {
    padding: 0;
    margin-top: .5em;
    background: none;
    border: none;
    font-size: 14px;
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 100;
    background-color: rgba(33, 33, 33, .75);
    width: 100%;
    padding: .5em .5em 0;
}

ul.list-posts-grid .excerpt {
    font-size: 90%;
}

.content-block .container {
    width: 100%;
    padding: 0;
}

.content-block ul.list-posts-grid > li {
    margin-right: 0;
}

@media (min-width: 413px) and (max-width: 991px) {
    ul.list-posts-grid.grid-123 > li {
        width: 50%;
        margin-right: 0;
    }
}

@media (min-width: 992px) {
    ul.list-posts-grid.grid-123 > li {
        width: 33.33333%;
        margin-right: 0%;
    }
}

NOTES

1) Please be sure that you have an image for EVERY post or the layout will be jacked.

2) Some of these CSS declarations may cause collateral damage to other parts of the page / your site.

This is intended to get you started, and hopefully you can take it from here.

• This reply was modified 6 years, 11 months ago by tubegtld.

Forgot to mention, please mark as resolved if this works for you, and please consider leaving a review if you’re enjoying the theme.

Bump. Please mark as resolved if this is working for you.