[Resolved] author archive header

[Huseyin]

Hi Generatepress Team

I would like to have the author archive header to have the author’s bio under the author’s name and gavatar on the left. Please check the screenshot, simply want the gavatar in a circlar shape and bio under the title

https://ibb.co/XjMpqjL

[David]

Hi there,

we recommend using a plugin like Simple Author Box.
Or this post explains how i added an author box to the Volume site in the GP Site Library:

https://generatepress.com/forums/topic/how-to-add-author-box-and-notification-bar/#post-699300

[Huseyin]

Thanks, David,

However, I’m talking about the author archive pages not author bio under the blog post.
for these pages http://www.website.com/author/xxx

[Tom]

Hi there,

Have you tried adding the user description in their profile? This should happen by default.

Let me know 🙂

[Huseyin]

yes I did, so can see the current view of it https://wordpress-394091-1251842.cloudwaysapps.com/author/isabellat/

[David]

Hi there,

so its not displaying as you’re using a Header Element to display that content.
Try disabling the Header Element to make sure the description shows.

Or you can try adding this template tag to your header element:

{{custom_field.description}}

[Huseyin]

Hi David,

I have tried adding the template tag to the header element, nothing happens.

&

Tried disabling the header element, it works, how could I get the default as a header with custom colour and gravatar in circle shape

[David]

If you can disable the Header Element i will take a look at the CSS required.

[Huseyin]

Hi David,

I have disabled the header element, you could check out it now. Thanks
https://wordpress-394091-1251842.cloudwaysapps.com/author/joshuasalameh/

[Tom]

Hi there,

Does this help?:

.author .page-header {
    background: #efefef;
}

.author .page-header img {
    border-radius: 100%;
}

[Huseyin]

I like it Tom, lastly, how could i get the gravatar centred? https://ibb.co/YtXDX3d

Thanks

[David]

Try changing:

.author .page-header img {
    border-radius: 100%;
}

to:

.author .page-header img {
    border-radius: 100%;
    position: relative;
    bottom: -50px;
}

[Huseyin]

Thanks, David

Still, it doesn’t look right, have a look; https://wordpress-394091-1251842.cloudwaysapps.com/author/isabellat/
How can we make the img be on the top on small devices, so it looks responsive?

This is what I’m trying to achieve (something that looks similar) https://www.acehsc.net/author/isabellat/

[David]

Can you share me the HTML content you have added to your Header Element as this will need changing.

When add code to a support topic please highlight the code and hit the Code button before submitting.

[Huseyin]

I have no code inserted on the header element

[Author]

Posts