XF2 GUIDE - [JoyFreak] Postbit Cover

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

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

Step 8 details:

Code:

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

Paste below:

Code:

<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:

Code:

.postbit_background {
position: absolute;
height: 120px;
width: 170px;
opacity: .40;
}

XF2 GUIDE [JoyFreak] Postbit Cover

More resources from shimmer

Share this resource