XenForo Tutorials

Postbit Background Custom Fields Tutorial

Submitted by Sphere, , Thread ID: 153092

Sphere
Newbie
Prime
Level:
0
Reputation:
0
Posts:
15
Likes:
1
Credits:
0
22-12-2019, 03:45 PM
This post was last modified: 22-12-2019, 03:46 PM by Sphere
Working Not Working Link Down
#1
Good afternoon people, here I leave you a tutorial that will surely interest you for users of XF2.


  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,
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
1
Xtigi

RE: Postbit Background Custom Fields Tutorial

MadalinN
Closed Account
Level:
0
Reputation:
0
Posts:
7
Likes:
0
Credits:
6
22-12-2019, 03:53 PM
#2
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!

RE: Postbit Background Custom Fields Tutorial

Novice
Level:
0
Reputation:
0
Posts:
31
Likes:
4
Credits:
66
28-05-2020, 06:44 PM
#3
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;
}

RE: Postbit Background Custom Fields Tutorial

vihscodex
Lurker
Level:
0
Reputation:
0
Posts:
8
Likes:
0
Credits:
0
18-01-2024, 12:48 PM
#4
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

Users browsing this thread: 1 Guest(s)