- 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