XenForo 2.3 – Increase Postbit Avatar Size to 142px

[OneHub]

XenForo 2.3 – Increase Postbit Avatar Size to 142px​

This customization increases XenForo 2.3 postbit avatars to 142×142px while keeping them sharp and properly aligned.

It also makes XenForo load a larger avatar source instead of stretching a small 48px image.

Features​

• Increase postbit avatar size to 142×142px
• Keep avatar images sharp
• Adjust the user column width automatically
• Apply only to actual forum posts
• Avoid affecting profile post quick reply avatars
• Keep responsive behavior on smaller screens
• Compatible with XenForo 2.3.x

🛠 Step 1 – Add the LESS Code​

Go to:

Admin CP → Appearance → Styles → Your Style → Templates → extra.less

Add this code:

@media (min-width: @xf-responsiveMedium)
{
    /* Only apply to actual post/message postbits */
    .message--post .message-cell.message-cell--user
    {
        flex: 0 0 172px;
        width: 172px;
    }

    .message--post .message-avatar-wrapper
    {
        width: 142px;
        height: 142px;
        margin-left: auto;
        margin-right: auto;
    }

    .message--post .message-avatar .avatar
    {
        width: 142px;
        height: 142px;
        font-size: 85px;
    }

    .message--post .message-avatar .avatar img
    {
        width: 142px;
        height: 142px;
        object-fit: cover;
    }
}

This increases the avatar size and gives the postbit enough space to display it correctly.

🖼 Step 2 – Load the Large Avatar Source​

If you only increase the avatar size with CSS, XenForo may still use a small avatar image and stretch it to 142px.

That can make the avatar look blurry.

Go to:

Admin CP → Appearance → Styles → Templates → message_macros

Find the avatar section in the postbit user information area.

Use this version:

<div class="message-avatar {{ ($xf.options.showMessageOnlineStatus && $user && $user.isOnline()) ? 'message-avatar--online' : '' }}">
    <div class="message-avatar-wrapper">
        <xf:avatar user="$user" size="l" defaultname="{$fallbackName}" itemprop="{{ $includeMicrodata ? 'image' : '' }}" />

        <xf:if is="$xf.options.showMessageOnlineStatus && $user && $user.isOnline()">
            <span class="message-avatar-online"
                tabindex="0"
                data-xf-init="tooltip"
                data-trigger="auto"
                title="{{ phrase('online_now')|for_attr }}">
            </span>
        </xf:if>
    </div>
</div>

The important part is:

size="l"

If your current code uses:

size="s"

or:

size="m"

change it to:

size="l"

Why size="l" Is Important​

A small XenForo avatar may only be around 48px wide.

If CSS enlarges that image to 142px, the browser has to stretch it, which can make the avatar look blurry.

Using:

size="l"

makes XenForo load a larger avatar source, giving a much sharper result.

How the LESS Code Works​

The postbit user column is increased to:

width: 172px;

The avatar area is set to:

width: 142px;
height: 142px;

The image also uses:

object-fit: cover;

This keeps the avatar properly cropped without stretching the image out of proportion.

Responsive Support​

The code uses:

@media (min-width: @xf-responsiveMedium)

This means the 142px avatar is mainly used on desktop layouts.

On smaller screens, XenForo can continue using its normal responsive postbit layout.

⚠ Important​

Do not use a global selector like this:

.message-avatar .avatar img

by itself.

That can affect other XenForo areas such as:

• Profile post quick reply
• Member profile pages
• Conversation pages
• Other components that use the same avatar classes

Using:

.message--post

keeps the customization limited to actual forum posts.

Result​

After applying both changes:

• Postbit avatars display at 142×142px
• Avatar images remain sharp
• The user column stays properly aligned
• Profile post quick reply avatars remain normal
• Responsive layouts continue working correctly

Compatibility: XenForo 2.3.x