customize author archive page.

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 :)

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?

Hi there,

try adding this CSS to vertically align the elements:

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

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".

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/

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?

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

<hr class="hero-rule">

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.

Try this CSS:

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

Thanks David. It's ok now.

You're welcome