Support » Theme: Tracks » Vertically Centering title setting minimum height and removing post excerpt

  • Hey,

    So I noticed there is more padding at the bottom of posts in the list then the top making the title float more towards the top of the container. All I want to do is center it and remove the excerpt content blurb but keep the read more link. and maybe set a minimum height so the post height.

    I was able to get the min height doing

    .home .archive, .post {
     min-height:360px;
    }

    but not sure on the css for the excerpt content
    see http://www.momentsafterdark.ca

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

    (@bensibley)

    Okay since the posts all have the same height, that makes this much easier.

    The following CSS will remove the excerpt content without removing the read more link (which is always in the second paragraph):

    .excerpt-content article p:first-child {
      display: none;
    }

    The following will then add some additional padding above the date effectively centering the content:

    .excerpt-meta {
      padding-top: 72px;
    }

    Note that by using the padding-top, it won’t dynamically center the content if the height of the post changes. The only way to always keep the post content vertically centered regardless of the height of the post will require changing the markup to utilize tables (yuck) or using absolute positioning which will cause many new complications.

    EDIT: Also, Flexbox may also be a good choice for vertically centering if you’re okay with the browser support.

    very much appreciate all your support. The first css works perfect. I had a thought though would it be easier to add a wrapper div just above excerpt-container. Then you could basically always have the content no matter what centered. Id remove the bottom padding on the excerpt-content div to make as truly centered

    something like this
    then it would be dynamic. Im not sure where to add in the extra div. Checking the theme files now.

    figured it out for anyone else trying to do this

    .vertical-align-wrap {
      position: relative;
      width: 100%;
      height: 100%;
      display: table;
      text-align:center;
    }
    
    .vertical-align {
      display: table-cell;
    }
    
    .vertical-align--middle {
      vertical-align: middle;
    }
    .excerpt-content {
      padding-bottom: 0px!Important;
    }

    in the customizer css

    opened up content.php in the editor scroll to the bottom and where you see
    // otherwise output Featured Image select all the code from after that and replace it with

    else {
    		    echo '<a class="featured-image-link" href="' . get_permalink() . '">';
                    ct_tracks_featured_image();
                echo '</a>';
    	    }
    	    ?>
            <div class="excerpt-container vertical-align-wrap">
    	<div class="vertical-align vertical-align--middle">
    	    <?php
                if(get_theme_mod('premium_layouts_setting') == 'full-width-images' || get_theme_mod('premium_layouts_setting') == 'two-column-images'){ ?>
                    <div class="content-container">
                <?php } ?>
                <div class="excerpt-meta">
                    <?php get_template_part('content/post-meta'); ?>
                </div>
                <div class='excerpt-header'>
                    <h1 class='excerpt-title'>
                        <a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
                    </h1>
                </div>
                <div class='excerpt-content'>
                    <article>
                        <?php ct_tracks_excerpt(); ?>
                    </article>
                </div>
    	    </div>
                <?php
                    if(get_theme_mod('premium_layouts_setting') == 'full-width-images' || get_theme_mod('premium_layouts_setting') == 'two-column-images'){ ?>
                    </div>
                <?php } ?>
            </div>
        </div>
    <?php
    }

    Hope this helps anyone else out

    Theme Author Ben Sibley

    (@bensibley)

    Nice work!

    One thing I would change – I highly recommend moving everything into a child theme. For this customization, you would copy the content.php file into the root of the child theme and edit it there. Tracks uses WordPress’ get_template_part functions, so if the content.php file is in your child theme, your version will be loaded instead of the default version in Tracks.

    The reason for using a child theme is if your edits are made directly to Tracks’ files, they will all be lost when you update to a new version of Tracks. I would really hate for that to happen.

    You can click here to download an empty Tracks child theme to start with.

    Your customer service is amazing!

    Theme Author Ben Sibley

    (@bensibley)

    I do my best 🙂

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘Vertically Centering title setting minimum height and removing post excerpt’ is closed to new replies.