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

MadalinN · 22-12-2019, 03:53 PM

I will test it, thanks!

I will test it, thanks!

I will test it, thanks!

I will test it, thanks!

I will test it, thanks!

Alphaneus · 28-05-2020, 06:44 PM

Adding this line in message breaks layout on some themes

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

Instead of this, add this to extra.less

Code:
.message-userExtras, .message-userDetails {
 position:relative;
 }

vihscodex · 18-01-2024, 12:48 PM

i do all the steps but its still not working on me background image is not showing but when i check it on inspect element the code is showing

Postbit Background Custom Fields Tutorial

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

RE: Postbit Background Custom Fields Tutorial

RE: Postbit Background Custom Fields Tutorial

RE: Postbit Background Custom Fields Tutorial