[Resolved] Styling gravitar / date / author

[Kevin Wabiszewski]

Hey I know this is out of the scope of GP support but I was wondering if you could help me style the author gravitar / date / author name on a GP page like this https://www.betterhomeguides.com/appliances/most-energy-efficient-space-heaters-review/

Similar to what you see on another website of mine below.

https://www.marineapproved.com/best-hiking-gps-review/

I am going to transfer all of my sites to GP Premium so I want to get this set up before I swap the sites with a lot of content.

The author box doesn’t have to be circle and it doesn’t have to look exactly like the other site but as long as it looks organized.

I’m happy to pay you all an additional fee if needed.

Thanks in advance

GeneratePress 2.2.2

GP Premium 1.7.8

[Leo]

Hi there,

Would you consider something like this?
https://docs.generatepress.com/article/entry-meta-style/

Let me know 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Kevin Wabiszewski]

Hi Leo, I think the second one looks really good. My only problem with it is that if we show the authors first and lasts name it will take up two lines on a phone. I was hoping to come up with a solution that takes up a little less space.

[Tom]

Hi there,

This takes some tweaking to the HTML structure. See this post: https://generatepress.com/forums/topic/entry-meta-one-below-the-other/#post-713825

If you can add that function instead of the one you’re using, I can help style it 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Kevin Wabiszewski]

Hi Tom and Leo! Thanks so much for your help. I just added the new function 🙂

[David]

Hi there,

sorry another change so we can get rid of the ‘by’ – use this function:

add_filter( 'generate_post_author', '__return_false' );
add_filter( 'generate_post_date_output', function( $date ) {
    printf( 
        '<span class="meta-gravatar">%s</span>',
        get_avatar( get_the_author_meta( 'ID' ) )
    );

    echo '<span class="meta-data">';

    printf( ' <span class="byline">%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></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() )
        )
    );

    echo $date;

    echo '</span>';
} );

And this CSS:

.single-post .entry-meta, .single-post .entry-meta .meta-data {
    display: flex;
}
.single-post .entry-meta .meta-data {
	flex-direction: column;
    margin-left: 0.75em;
}
.single-post .entry-meta .meta-gravatar img {
    width: 40px;
    border-radius: 50%;
}
.single .byline {
    font-weight: 700;
}
.single-post .entry-meta .meta-data .posted-on {
    font-size: 0.8em;
}

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Kevin Wabiszewski]

Thank you so much everyone. You guys have the best support by far!

[David]

Glad we could all be of help 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Author]

Posts