Jump to content
FLASH SALE (EXTENDED TO 2/21/19)! Take 20% off all store products! Read more... ×
We're hiring! We are accepting applications for Junior Moderator, Uploader, and Support Team. Read more... ×
Having trouble connecting to our Discord server or has your role been mistakenly removed? Let us know! Read more... ×
S!r.ReaDy

XF 2.0 Frames for avatars

Recommended Posts

Posted (edited)

This is to be listed for group id 3 

Add this in the message_macros template  under <div class="message-avatar-wrapper">

    <xen:if is="{$user.user_group_id} == 3">
    <div class="admin">
        <div class="message-avatar-wrapper">
    </div>
 </xen:if>

 

IN extras.less

 

.admin {
    background-image: url("ur-image-url");
    width: 135px;
    height: 125px;
    display: flex;
    align-items: center;
    justify-content: center;
}

 

Just work with the witdh and heith to fix the image perfectly

 

The code was updated below.!

 

Edited by S!r.ReaDy
edit

Share this post


Link to post
Share on other sites

Thanks for this tutorial. I'm having a couple problems though. Could you please add me on discord Aljo#3761 - I'd greatly appreciate it if you'd help me resolve these minor problems :(

Edited by Aljo
mistake

Share this post


Link to post
Share on other sites
1 hour ago, Aljo said:

Thanks for this tutorial. I'm having a couple problems though. Could you please add me on discord Aljo#3761 - I'd greatly appreciate it if you'd help me resolve these minor problems :(

It's a forum why don't you explain it here and let others see the solutions or could help too ? 😕

  • Thanks 1

Share this post


Link to post
Share on other sites
20 minutes ago, Cookie Monster said:

It's a forum why don't you explain it here and let others see the solutions or could help too ? 😕

im still trying to get it to work

Share this post


Link to post
Share on other sites
6 hours ago, Cookie Monster said:

It's a forum why don't you explain it here and let others see the solutions or could help too ? 😕

I enabled notifications for my replies, and I still don't get notifications. Hard to have a productive conversation when I don't even know people have replied to me, like now.. but if anyone can help me, I'm having some trouble with the avatar frames surrounding the avatars. How do I position a member's avatar behind the avatar frame? I've tried using the css "z-index: -1;" property, but that pushes the avatar behind every element on the page. I even tried setting it to 0 to try and increase priority, still positions it all the way at the back of the page. I want the avatar to be position behind the frame, with the frame encasing it on the top, but I can't seem to work out how to get that done..

Share this post


Link to post
Share on other sites

What is the issue?
@AljoHere is an update how to do it

@mr-pimpen

This will solve your problems

.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, in the correct part

<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>	
			
	

This is my code that works.

 

1.png

Edited by S!r.ReaDy

Share this post


Link to post
Share on other sites
What do you think? Remember the human.

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Recently Browsing   0 members

    No registered users viewing this page.

×