XF 2 Tip Custom Frames for avatars

[prvtzone]

Paste this in extra.less

.avatar-frame-container {
    width: 200px;
    height: 150px;
    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;
}

Replace this code in messages_macro, template under <div class="message-avatar-wrapper">

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

                    <xf:if is="{$user.user_group_id} == 3">
                        <div class="avatar-frame admin">   
                            
                    <xf:elseif is="{$user.user_group_id} == 4"/>
                        <div class="avatar-frame mod">
                            
                     <xf:elseif is="{$user.user_group_id} == 10"/>
                        <div class="avatar-frame admin">
                            

                    </xf:if>
                        

<xf:if is="{$user.user_group_id} == 3 || {$user.user_group_id} == 4 || {$user.user_group_id} == 10">




        </div>       
    </xf:if>   
        </div>

 

[huseynalieff]

Can you explain how you made and centered the awards and likes section?

 

[prvtzone]

https://enxf.net/threads/customize-post-bit-with-adding-likes-awards.3173

 

[Verss]

This is not responsive

 

[prvtzone]

Can you post some other tutorial then that is responsive

 

[one_finger_man]

for this to work better and not go off the page you want to remove

 </div>       
    </xf:if>   
        </div>

so it would be this and not the top

    </xf:if>   
        </div>