• You need 5 posts to download resources. You can only download 2 resources per day. To remove these limits consider upgrading.

XF Frames for avatars

Nick

Developer
Banned User
LV
0
 
Joined
Feb 7, 2023
Messages
491
Reaction score
128
Awards
14
This tutorial is for Frames for avatars. Lets begin.

Updated for 2.1 ( This should work with 2.x versions )

New conditional in 2.1

Code:
<xf:if is="{{$user && $user.isMemberOf('3,4,6')}}">


Note: The css might be outdated.

Extra.less

Code:
.avatar-frame-container {

    height: 160px;
    display: flex;
    align-items: center;
    justify-content: center;
background-repeat: no-repeat;
margin-top: -115px;
}

.avatar-frame {
    background-repeat: no-repeat;
    position: absolute;
    display: block;
    width: 135px;
    height: 135px;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: -1px;
    margin-top: -3px;
}

.owner { background-image: url("images/avatar-frame-owner.png"); }
.admin { background-image: url("images/avatar-frame-admin.png"); }


.message-avatar-frame {
    z-index: 1;
    width: 135px;
    height: 135px;
}


message_macro

Code:
<div class="message-avatar-wrapper">
<xf:avatar user="$user" size="m" defaultname="{$fallbackName}" itemprop="image" />
<xf:if is="$xf.options.showMessageOnlineStatus && $user && $user.isOnline()">
<span class="message-avatar-online" tabindex="0" data-xf-init="tooltip" data-trigger="auto" title="{{ phrase('online_now')|for_attr }}"></span>
</xf:if>

<div class="avatar-frame-container">



<xf:if is="{{$user && $user.isMemberOf('3')}}">
                        <div class="avatar-frame admin"> 

<xf:elseif is="{{$user && $user.isMemberOf('4')}}"/>
                   
                        <div class="avatar-frame mod">

                    <xf:elseif is="{{$user && $user.isMemberOf('10')}}"/>
                        <div class="avatar-frame admin">


                    </xf:if>


<xf:if is="{{$user && $user.isMemberOf('3')}} || {{$user && $user.isMemberOf('4')}} || {{$user && $user.isMemberOf('10')}}">




</div>
    </xf:if>

</div>
</div>


Click save and your done.

Enjoy if you need help just lmk.

 
Top