Frames for avatars

Yondu · 26-09-2022, 11:30 PM

This tutorial is for frames for avatars. Let's begin.

Updated for 2.1

New conditional in 2.1

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

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 you're done.

Enjoy

Frames for avatars

Submitted by Yondu, 26-09-2022, 11:30 PM, Thread ID: 252123