XF 2.2 Avatar position on profile page

[Hareon]

I would like to adjust the avatar position on my forum. As I use Ozzmods Badges, the Badges must have raised the avatar's height a little.

I would like to leave it a little lower because there is a blank space there that I would like to fill with something.

Does anyone have any ideas on where I can fix this?

 

[Mr Lucky]

Does anyone have any ideas on where I can fix this?

A link to the site would be useful.

Normally I would add a position to the extra.less template e.g

.memberHeader-avatar
{top:50px}

Experiment with the number of px (can also be minus) and check on mobile.

 

[Hareon]

Thanks for the answer, Mr Lucky https://e4t.com.br/forum/index.php?members/hareon.2/

This code that you made is ready for mobile devices? The problem is only in PC. In mobile we don't need to change, because all is working well.

I tested here and is working, but have diff with profiles without cover photo

 

[Mr Lucky]

This code that you made is ready for mobile devices?

Seems to be fine. I mentioned because it's best practise to always test especially as I didn't know whether your theme was default or not.

Seems to be working nicely

 

[Hareon]

Seems to be fine. I mentioned because it's best practise to always test especially as I didn't know whether your theme was default or not.

Seems to be working nicely

Thank you for the help <3

 

[Mr Lucky]

Thank you for the help <3

You’re welcome

 

[Hareon]

Hmmm it seems that profiles that don't have a photo in the avatar have the avatar a little too low from the ideal position.

 

[FaeWhisperer]

Hmmm it seems that profiles that don't have a photo in the avatar have the avatar a little too low from the ideal position.

View attachment 303067

So I actually had a similar issue- try:

.avatar.avatar--default.avatar {top: -5px}

(whatever px you used, this is just from what I'm using)

This code should target just the profiles that have an avatar as just text since it is the default avatar.

You should be able to target both (.memberHeader-avatar) without any issues. I just tested on my own website and it worked for me!

 

[Hareon]

So I actually had a similar issue- try:

.avatar.avatar--default.avatar {top: -5px}

(whatever px you used, this is just from what I'm using)

This code should target just the profiles that have an avatar as just text since it is the default avatar.

You should be able to target both (.memberHeader-avatar) without any issues. I just tested on my own website and it worked for me!

Is not working. only the code with 50px is working.

 

[Mr Lucky]

An alternative is

.avatarWrapper
{position:30px}

However if it is something is wrong due to a theme or addon you may get help from the developer

 

[Hareon]

This code didn't work. Its effect was to reduce the size of the cover photo, but the position of the avatar remained above.

But I thought better and there are some things that are influencing. I'm not using any style. I use the Xenforo standard.

But I'm using a code to increase the banner size and also Ozzmods Badges. Badges are inserted in that darker part where the profile information is located.

Apparently the avatar photo is uneven because of Badges. Avatar seems to want to level out the size of this dark area that serves to improve reading. When we use the first code you provided, profiles that don't have a cover photo or badges end up suffering a greater impact from .memberHeader-avatar

With badges


Without badges

 

[Mr Lucky]

Try changing the position with padding then

.memberHeader-avatar
{padding-top:30px}

And test on mobile

To not have the padding on smaller screens use this instead:

@media (min-width: @xf-responsiveNarrow)
{
.memberHeader-avatar
    {padding-top:30px}}

 

[Hareon]

Try changing the position with padding then

.memberHeader-avatar
{padding-top:30px}

And test on mobile

This code helps, but it still affects profiles that are OK, such as profiles without covers and without badges.

Well, anyway, I left a post here https://xenforo.com/community/threads/ozzmodz-badges.196529/page-43#post-1683055

to inform the author and see if there is any way to change the position badges and still make them prominent on the profile as it currently is, but without influencing the Avatar's position.

Thank you very much.

 

[Mr Lucky]

Did you test on mobiles?

Might be better on smaller screens with

@media (min-width: @xf-responsiveMedium)
{
.memberHeader-avatar
    {padding-top:30px}}

or

@media (min-width: @xf-responsiveNarrow)
{
.memberHeader-avatar
    {padding-top:30px}}

 

[Hareon]

The code does not affect the mobile version. On mobile everything is OK.



The problem was really on the PC. I tested both codes. Ideally, the avatar would take up more space at the bottom so as not to have that blank space. The problem is that this causes all avatars to move down, with avatars from new profiles already occupying that space.

Adjusting it to 50px looks good on profiles that need it (which have badges), but it is pressed against the tabs below.

If there was some kind of margin that prevented the avatar from touching the tabs below, I think there would be no problem.

In a test with 100px, it looks perfect on the avatar with badges, but it looks bad on profiles without a cover and without an avatar.