[Resolved] WP Show Posts – Align date at the bottom, Add additional meta data

Home Forums Support [Resolved] WP Show Posts – Align date at the bottom, Add additional meta data

Home Forums Support WP Show Posts – Align date at the bottom, Add additional meta data

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #1330811
    Reed

    Couple things..

    1. I am looking to do something similar to https://wordpress.org/support/topic/align-date-at-the-bottom/, however, that solution doesn’t seem to work for my site: https://frugalflyer.ca.

    2. I would like to add an estimated reading time to the blog cards on the home page, aligned right, vertically in line with the date. If I had a plugin to estimate the times (eg. Reading Time WP), could I use the shortcode to add to WP Show Posts meta?

    Thanks,
    Reed

    #1331261
    David
    Staff
    Customer Support

    Hi there,

    1. Try this CSS:

    .wpsp-content-wrap {
        display: flex;
        flex-direction: column;
        height: 100%;
    }

    2. You could hook the shortcode into wpsp_after_content
    If you want to filter the post date – you would use this hook wpsp_date_output

    #1331910
    Reed

    Perfect. I’ve got everything now except how would I align and float:right the reading time with the date?

    #1332008
    Leo
    Staff
    Customer Support

    Does this work?

    .rt-reading-time {
        text-align: right;
    }
    #1332029
    Reed

    No, the RT is still below the date. (the site is public so you can see it).

    Let me know if there is a way to align with CSS, or I should just remove the native WP Show Posts date and make my own shortcode to add to the hook that shows the RT.

    Edit: I’ve now done the latter – hopefully this is an appropriate solution.

    #1332264
    David
    Staff
    Customer Support

    Try this as your combined CSS – this will put space between date and reading time and force them to align to the bottom:

    .wpsp-content-wrap {
        display: flex;
        flex-direction: column;
        height: 100%;
    }
    .custom-post-meta {
        display: flex;
        justify-content: space-between;
        margin-top: auto;
    }
    #1333250
    Reed

    Thank you!

    #1333630
    David
    Staff
    Customer Support

    Glad we could be of help

Viewing 8 posts - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.