Support » Theme: .TUBE » Margin, metro, mason style grid

  • peachesncream

    (@peachesncream)



    Can I resize videos or customize the margin so the layout will look like a Metro or Masonry grid style?

Viewing 6 replies - 1 through 6 (of 6 total)
  • Theme Author tubegtld

    (@tubegtld)

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

    peachesncream

    (@peachesncream)

    peachesncream

    (@peachesncream)

    Theme Author tubegtld

    (@tubegtld)

    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 1 year ago by  tubegtld.
    Theme Author tubegtld

    (@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.

    Theme Author tubegtld

    (@tubegtld)

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

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘Margin, metro, mason style grid’ is closed to new replies.