Register      
Register      

POSTBIT BACKGROUND CUSTOM FIELDS TUTORIAL
#1

  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 named profilebackground in 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 be profilebackground.
Disable your collapsible postbit.
And that's it,

by sphere
Liked By Ash  
Reply
#2
Thanks for sharing this. I'm going to have a proper look later on and maybe add it to my forum :)
General Discussion Community With A List Blast To The Past - Deleted
Reply


Forum Jump: