POSTBIT BACKGROUND CUSTOM FIELDS TUTORIAL

[cloug]

1. Make a custom user field
2. Title Postbit Cover or Anything you want
3. Field ID can be anything i suggest no space on it (I use same CSS Class name [.profilebackground])
4. Description : JPG, PNG, GIF (Link of the Image)
5. Display Location : Personal Details
6. Field Type: Single Line text Box
7. General Option: User editable, Moderator Editable
8. Go to Admin Panel > Appearance > Templates > Search messages_macros and paste the code,

<xf:if is="$user.Profile.custom_fields.profilebackground">
? ? ? ? <div class="profilebackground" style="background-image: linear-gradient(180deg, #fff0, #141414), url({$user.Profile.custom_fields.profilebackground});"></div>
? ? </xf:if>

after this,

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

Final result:

<xf:macro name="user_info"
? ? arg-user="!"
? ? arg-threadUserId=""
? ? arg-fallbackName="">
? ? <xf:if is="$user.Profile.custom_fields.profilebackground">
? ? ? ? <div class="profilebackground" style="background-image: linear-gradient(180deg, #fff0, #141414), url({$user.Profile.custom_fields.profilebackground});"></div>
? ? </xf:if>

Find this,

<section itemscope itemtype="https://schema.org/Person" class="message-user">

and add this as inline,

style="position: relative;"

Final result:

[align=left]

<section itemscope itemtype="https://schema.org/Person" class="message-user"
????????????style="position: relative;" >

.profilebackground {
? ? opacity: .50;
? ? position: absolute;
????border-radius: 4px 0px 0px 0px;
? ? top: 0;
? ? bottom: 0;
? ? left: 0;
? ? right: 0;
? ? width: auto;
? ? height: auto;
? ? background-position: center;
? ? background-size: cover !important;
}
@media (max-width: 650px) {
.profilebackground {
? ? height: 60px !important;
}

 

[Ash]

Thanks for sharing this. I'm going to have a proper look later on and maybe add it to my forum

 

[BrolySSJ]

This is a very detailed tutorial that you have provided here and i especially like that you have provided the code as well because i think that this way you can actually edit it as needed.