[Resolved] customize author archive page.

[An Nguyen]

Hi Tom,

1/ In mobile mode, I want search icon disable outside, and display it inside “off cavas panel”, don’t I?

2/ I want avatar in author archive page is round image, and there have some space between name and avatar. Now it is too ugly.

Thanks.

[Leo]

Hi there,

1. It’s actually quite common to have the navigation search within the mobile header.

We can’t actually add the navigation search function inside the off canvas panel but we can add a WordPress default search box if you wish?

2. Try this CSS:

.inside-page-hero img.avatar {
    border-radius: 50%;
}
.inside-page-hero span.vcard {
    padding-left: 10px;
}

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

Let me know 🙂

[An Nguyen]

Thanks Leo,

1/ After adjusting some layouts and headers in Appearance–> elements. Now, it looks good.

2/ After adding css, Avatar image is better but, the name text is not good, Can I adjust it center with avatar image following horizontal alignment and have some spaces?

[David]

Hi there,

try adding this CSS to vertically align the elements:

.author .page-title-headline {
    display: flex;
    justify-content: center;
}

[An Nguyen]

Hi David,

2/ I added css and it displayed name & image pretty well however, the background is not fullscreen anymore.

3/Another issue is metadata that displays inconsistently.

In other pages metadata is: “Posted by NTA | August 3, 2019 | Leave a comment”
But in author archive page is: “Last Updated August 3, 2019 by Posted by NTA”

In other pages, I have used WP show post and in author archive page, it displayed by default.

Could you help me by displaying the same format please? “Posted by NTA | August 3, 2019 | Leave a comment“.

[Tom]

Hi there,

1. Instead of this CSS:

.author, .page-hero-gravatar {
    display: inline-block;
}

Can you try this?:

.page-hero-gravatar {
    display: inline-block;
}

2. I think this is happening because you’ve added this CSS: https://docs.generatepress.com/article/show-the-updated-post-date/

[An Nguyen]

Hi Tom and David,

1/ I found reason why it wasn’t full screen. I saw a duplicated code below in my CSS. After removing the code, both David’s and Tom’s CSS code worked.

.page-hero-gravatar {
    display: inline-block;
}

2/ I tried to resolve this issue, but I don’t know why! Can I make a space line between title and metadata info?

[David]

So edit the Header Element for your posts, between the title html and your meta html add this:

<hr class="hero-rule">

[An Nguyen]

Sorry David for unclear question! I mean in the title and metadata in container -> wp-show-post area. I want a space line between them. I need you help me to fix it.

However, after adding your css, title and metadata in header-elements look better now.

[David]

Try this CSS:

.wp-show-posts-entry-meta {
    border-top: 2px solid #ccc;
    margin-top: 6px;
    padding-top: 3px;
}

[An Nguyen]

Thanks David. It’s ok now.

[David]

You’re welcome

[Author]

Posts