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

[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

[David]

Hi there,

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

[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

[David]

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;
}

[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

[David]

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.

[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

[Colin]

ok Ill try again.

I posted the last reply before reading your reply.

[Colin]

Thanks David

[David]

You’re welcome

[Author]

Posts