Fixing Avatar Sizes

Splicho

Emudevs.gg Owner
Staff member
Moderator
Collaborate
Registered
Joined
Jan 21, 2022
Messages
655
Points
103

Reputation:

Hello,

I have been struggling with modifying my avatar sizes since literally 2 days now and I can't seem to find a way to fix this.

setup.less

HTML:
// AVATARS
@_avatarBaseSize: 96px;
@avatar-xxs: (@_avatarBaseSize) / 4;
@avatar-xs:  (@_avatarBaseSize) / 3;
@avatar-s:   (@_avatarBaseSize) / 2;
@avatar-m:   (@_avatarBaseSize);
@avatar-l:   (@_avatarBaseSize) * 2;
@avatar-o:   (@_avatarBaseSize) * 4;

Message_macros

HTML:
<xf:avatar user="$user" size="l" defaultname="{$fallbackName}" itemprop="image" />


1MW2IVo.png


This looks fine so far, while on other pages for example reports or resource reviews, they are way too big.

image.png
image.png


I checked both of them templates, and it seems they fetch the avatar from message_macros, this is weird.
Anyone here know what this causes?
 

one_finger_man

Well-known member
Registered
Joined
Jan 20, 2022
Messages
392
Points
53

Reputation:

try adding this to your extra.less change

HTML:
 .message-avatar .avatar {
    width: 75px;
    height: 75px;
    font-size: 28.8px;
}
 

Splicho

Emudevs.gg Owner
Staff member
Moderator
Collaborate
Registered
Joined
Jan 21, 2022
Messages
655
Points
103

Reputation:

try adding this to your extra.less change

HTML:
 .message-avatar .avatar {
    width: 75px;
    height: 75px;
    font-size: 28.8px;
}
one_finger_manI fixed it, I forgot that there was another avatar statement at the bottom of the template where I had to change the size tag...
 

Fenrir

Collaborate
Collaborate
Registered
Joined
Dec 11, 2021
Messages
110
Points
143

Reputation:

Do not edit templates directly....
It's bad practice for XenForo.
Use {{ include('template_name') }} inside your EXTRA.less
 
Top