[Resolved] How To Centre Post Title, Name & Date Plus Show Gravatar Image?

Home Forums Support [Resolved] How To Centre Post Title, Name & Date Plus Show Gravatar Image?

Home Forums Support How To Centre Post Title, Name & Date Plus Show Gravatar Image?

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #1571288
    Colin

    Hi

    Can you advise how I can centre the title, date and author name for every single post?

    I added a bit of CSS to centre the title which worked but the meta details are not centred.

    I would also like to be able to show my gravatar image like on the below example:

    https://smartblogger.com/more-comments/

    In fact, that’s exactly how I would like my post titles to display.

    Is this possible?

    Kind regards

    Colin

    #1571334
    David
    Staff
    Customer Support

    Hi there,

    can you share a link to your site so i can see the current layout?

    #1571349
    Colin

    Hi David

    https://colinlinnett.com/how-to-get-more-traffic-from-a-single-article-even-if-you-cant-write/

    I would like the date and by author name to be centred under the title and ideally (If Possible) displaying my gravatar image

    Thanks

    #1571384
    David
    Staff
    Customer Support

    So first off you will need to add this PHP Snippet to your site:

    add_filter( 'generate_post_author_output', function() {
        return sprintf( ' <span class="byline"> by %1$s</span>',
            sprintf( '<span class="author vcard" itemtype="http://schema.org/Person" itemscope="itemscope" itemprop="author"><a href="%1$s" title="%2$s" rel="author"><span class="author-name" itemprop="name">%3$s</span></a>%4$s</span>',
                esc_url( get_author_posts_url( get_the_author_meta( 'ID' ) ) ),
                esc_attr( sprintf( __( 'View all posts by %s', 'generatepress' ), get_the_author() ) ),
                esc_html( get_the_author() ),
                get_avatar( get_the_author_meta( 'ID' ) )
            )
        );
    } );

    This article explains how to add PHP:

    https://docs.generatepress.com/article/adding-php/

    Then add this CSS to make the Avatar image round, and for the meta to be centered.

    .entry-header .entry-meta {
        text-align: center;
    }
    .entry-meta img.avatar {
        width: 30px;
        border-radius: 50%;
        vertical-align: bottom;
        margin-left: 10px;
    }
    #1571392
    Colin

    Hi David

    It hasn’t quite worked.

    I would like the image to be after the name or even above it, but all of it centered like the title.

    KInd regards

    Colin

    #1571402
    David
    Staff
    Customer Support

    I updated both the PHP Snippet and CSS here:

    https://generatepress.com/forums/topic/how-to-centre-post-title-name-date-plus-show-gravatar-image/#post-1571384

    This will place the avatar after the byline and center the meta.

    #1571404
    Colin

    Hi David

    I have managed to center the meta details but I had to disable the avatars. I want the avatar to be my gravatar but it’s not super important to me so I can leave as it is.

    I changed the css to:

    h1.entry-title, h2.entry-title {
    text-align: center;
    }
    .entry-meta {
    text-align: center;

    Does that look ok?

    Everything seems to be ok

    Kind regards

    Colin

    #1571408
    Colin

    ok Ill try again.

    I posted the last reply before reading your reply.

    #1571416
    Colin

    Thanks David

    #1571418
    David
    Staff
    Customer Support
Viewing 10 posts - 1 through 10 (of 10 total)
  • You must be logged in to reply to this topic.