Postbit Background Custom Fields Tutorial

Sphere · 22-12-2019, 03:45 PM

Good afternoon people, here I leave you a tutorial that will surely interest you for users of XF2.

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

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,

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

Final result:

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

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

and add this as inline,

Code:
style="position: relative;"

Final result:

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

Open a new class with namedprofilebackgroundin extra.less. Paste this.

Code:
.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;
 }

Rename your custom user field. It should beprofilebackground.
Disable your collapsible postbit.
And that's it, it should look like this.

Thanks you for view this tutorial :D!
Supporting problems here in this topic!, Not PM Please

Postbit Background Custom Fields Tutorial

Submitted by Sphere, 22-12-2019, 03:45 PM, Thread ID: 153092