[Resolved] Custom Author Header

Home Forums Support [Resolved] Custom Author Header

Home Forums Support Custom Author Header

Viewing 14 posts - 1 through 14 (of 14 total)
  • Author
    Posts
  • #1878967
    Amit

    Hi,
    I want to create Header that looks similar to my other Post Headers. But, the fields were not working like description and author Title. So, I checked the old thread where Header was disabled and there was custom css for the same..
    Still, this doesn’t go full width like my other pages. I need something similar to my Posts Header. with Author Description below the Author Image and Name.

    #1879507
    David
    Staff
    Customer Support

    Hi there,

    can you share a post where i can see the Element displaying the Author Description ?

    #1879517
    Amit

    Here is the post –

    #1879596
    Leo
    Staff
    Customer Support

    There isn’t an element displaying on the page you’ve linked currently.

    This usually means the display rule you’ve set is incorrect.

    What display rules are you using?

    Let me know πŸ™‚

    #1879652
    Amit

    See now… Activated the author element.

    #1879901
    Elvin
    Staff
    Customer Support

    Hi Amit,

    I believe you can use the same header element you’ve used on the /nespresso/best/ on your author archive page.

    On the same Header Element, add a display rule location for “Author Archives” so it’s also used on author archive pages.

    #1879965
    Amit

    Elvin,
    The author element is activated and it is set for ‘Author Archives’. The problem is not the display rule, but the fields. The fields are not converting to what they are meant for – {{custom_field.description}}

    #1879973
    Elvin
    Staff
    Customer Support

    Ah, in that case, consider this:

    Create a new header element with similar styling but set the display rule for Author Archives.

    And then add this PHP snippet.

    add_shortcode('show_author_desc',function(){
    if ( get_the_author_meta( 'description' ) && is_author() ) {
    echo '<div class="author-info">' . get_the_author_meta( 'description' ) . '</div>';
    }
    });

    This allows you to use the shortcode [show_author_desc].

    On the newly created Header element, instead of using {{custom_field.description}}, use [show_author_desc] instead. πŸ˜€

    #1880016
    Amit

    That worked!
    Now the image that is showing on that page is square and the Author name is just stocked to it.
    I need the author image to be a little small, round shaped with border around and some space within the author name and image.

    #1880021
    Elvin
    Staff
    Customer Support

    You can wrap the image on that Header element with <div class="page-hero-gravatar"> the same way you did for the other Header element so they share the same styling. πŸ™‚

    Or just add this CSS for a quick and easy fix:

    body.archive.author .page-hero img.avatar {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        position: relative;
        margin: 0 10px 0 0;
    }
    #1880116
    Amit

    Worked! A little tweak was required as the image was a little below the level of author’s name. I added a margin of 15px at the bottom.
    Please dual check from your side!

    #1880231
    Elvin
    Staff
    Customer Support

    It looks fine on my end – https://share.getcloudapp.com/geuAx851

    Do you need anything else? I believe this is sorted?

    Let us know if you need further help with this. πŸ˜€

    #1881469
    Amit

    Sorted!

    #1881532
    Elvin
    Staff
    Customer Support

    Nice one. Thanks for letting us know. Glad you got it sorted. πŸ˜€

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