XenForo Tutorial

This tutorial explains how to change poster profile block width in XenForo styles.

This tutorial does not apply to styles based on Artodia styles framework. Those styles have property for avatar size that you can find in style properties -> message layout.

XenForo uses 96x96 pixels avatar in posts. Other forum systems allow you to change that, but not XenForo. This tutorial explains how to make it bigger or smaller.

For demonstration purposes code below increases avatar block from 96x96 to 128x128.

Increasing avatar width

First you need to tell XenForo to load large avatars for poster's profiles. To do that open template "message_user_info", find this code near line 8:

Code:
<xen:avatar user="$user" size="m" img="true" />
change change size="m" to size="l":

Code:
<xen:avatar user="$user" size="l" img="true" />
If you want to reduce avatar width below 48px, instead of size="l" use size="s". If you want to reduce avatar size to anything between 48px and 96px, do not change that code.

That change will load 192x192 avatar instead of 96x96. You probably do not want 192x192 avatar block, so you need to force browser to use your custom dimensions. To do that add the following code in template EXTRA.css:

Code:
.messageUserBlock .avatar img
{
    width: 128px !important;
    height: 128px !important;
}
@media (max-width:@maxResponsiveWideWidth)
{
    .messageUserBlock .avatar img
    {
        width: 48px !important;
        height: 48px !important;
    }
}
Instead of 128px use your avatar dimensions. Set width and height to same value.

Why use !important after value? Because HTML code for avatars includes width and height. Without !important custom width and height in CSS will be ignored because width and height parameters of image have higher priority.

Changing poster profile block dimensions

Go to admin control panel -> styles -> style properties -> message layout -> user info container and increase width by same amount as you have changed avatar width. For example, if avatar width is changed from 96 to 128, user info block width should be changed from 102 to 134.



Then select "content container" property in same section and increase left margin by same amount. For example, if avatar width is changed from 96 to 128, left margin of container should be changed from 135 to 167.



Do not forget "px" after width and margin values.

Problems

If when trying to download style you are getting time out errors, it is ether because of slow internet connection or browser error. Try a different browser.

If you have any questions or ran into problems, please post your questions on support forum.