XenForo [JoyFreak] Postbit Cover

[JoyFreak]

Live example: Gaming Forum

Description
This guide will run you through on how to allow your members to set a postbit cover photo that will display within their posts/messages.

Guide

1. Create a custom user field. Go to Admin CP > Users > Custom user fields
2. Field ID: This can be anything you want i.e. postbit_cover
3. Title: This can be anything you want i.e Postbit Cover
4. Description: URL of the image. Support types: PNG, JPG, GIF.
5. Display location: Personal details
6. Field type: Single-line text Box
7. General option: User editable, Moderator editable
8. Go to Admin CP > Appearance > Templates > Search: message_macros
9. Go to Admin CP > Appearance > Templates > Search: extra.less

Step 8 details:

Find:

<xf:macro name="user_info"
    arg-user="!"
    arg-fallbackName="">

Paste below:

<xf:if is="{$user.Profile.custom_fields.postbit_cover}">
<div class="postbit_background" style="background-image: url({$user.Profile.custom_fields.FIELD_ID});"></div>
</xf:if>

Replace FIELD_ID with the Field ID you used in step 2 i.e. postbit_cover

Step 9 details:

Place at the top of extra.less:

.postbit_background {
position: absolute;
height: 120px;
width: 170px;
opacity: .40;
}
.message-name {
    position: relative;
}
@media (max-width: 650px) {
.postbit_background {
    display: none;
}
}

Screenshot


Live example: Gaming Forum