• This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn more.

User's Member Card > Avatar Editor

toodlez

Active member
#1
Okay, so is it possible that when viewing your OWN member card, and click on your avatar it links to your 'Avatar' overlay to upload / edit your avatar?
 

Jake Bunce

XenForo moderator
Staff member
#2
Edit this template:

Admin CP -> Appearance -> Templates -> member_card

Replace the red code:

Code:
<xen:edithint template="xenforo_overlay.css" />
<xen:require css="member_card.css" />

<div id="memberCard{$user.user_id}" data-overlayClass="memberCard">
	<div class="avatarCropper">
		<a class="avatar NoOverlay Av{$user.user_id}l" href="{xen:link members, $user}">
			<img src="{xen:helper avatar, {$user}, l}" alt="" style="{xen:helper avatarCropCss, $user}" />
		</a>
		<xen:if hascontent="true">
			<div class="modControls" style="position:absolute; bottom:0px; right:0px">
				<xen:contentcheck>
					<xen:if is="{$canEditUsers}"><a href="{xen:adminlink users/edit, $user}" target="_blank">{xen:phrase edit}</a></xen:if>
					<xen:if is="{$canCleanSpam}"><a href="{xen:link spam-cleaner, $user}" class="OverlayTrigger">{xen:phrase spam}</a></xen:if>
					<xen:if is="{$canWarn}"><a href="{xen:link members/warn, $user}">{xen:phrase warn}</a></xen:if>
					<xen:if is="{$canBanUsers}"><a href="{xen:adminlink banning/users/add, $user}" target="_blank">{xen:phrase ban}</a></xen:if>
				</xen:contentcheck>
			</div>
		</xen:if>
	</div>
With the blue code:

Code:
<xen:edithint template="xenforo_overlay.css" />
<xen:require css="member_card.css" />

<div id="memberCard{$user.user_id}" data-overlayClass="memberCard">
	<div class="avatarCropper">
		<xen:if is="{$user.user_id} == {$visitor.user_id}">
			<a class="avatar OverlayTrigger Av{$user.user_id}l" href="{xen:link account/avatar}">
		<xen:else />
			<a class="avatar NoOverlay Av{$user.user_id}l" href="{xen:link members, $user}">
		</xen:if>
			<img src="{xen:helper avatar, {$user}, l}" alt="" style="{xen:helper avatarCropCss, $user}" />
		</a>
		<xen:if hascontent="true">
			<div class="modControls" style="position:absolute; bottom:0px; right:0px">
				<xen:contentcheck>
					<xen:if is="{$canEditUsers}"><a href="{xen:adminlink users/edit, $user}" target="_blank">{xen:phrase edit}</a></xen:if>
					<xen:if is="{$canCleanSpam}"><a href="{xen:link spam-cleaner, $user}" class="OverlayTrigger">{xen:phrase spam}</a></xen:if>
					<xen:if is="{$canWarn}"><a href="{xen:link members/warn, $user}">{xen:phrase warn}</a></xen:if>
					<xen:if is="{$canBanUsers}"><a href="{xen:adminlink banning/users/add, $user}" target="_blank">{xen:phrase ban}</a></xen:if>
				</xen:contentcheck>
			</div>
		</xen:if>
	</div>
 

toodlez

Active member
#3
That's awesome bro, where is the styling located for the avatar editor overlay colors?

I want to change the background of the block where you select (browse) / upload your new avatar
 

toodlez

Active member
#5
Where is the color styling for this text located:

Code:
Use a custom avatar
Drag this image to crop it, then click Okay to confirm, or upload a new avatar below. 
    
Upload new custom avatar:

It is recommended that you use an image that is at least 200x200 pixels.
 

trilogy33

Well-known member
#6
Where is the color styling for this text located:

Code:
Use a custom avatar
Drag this image to crop it, then click Okay to confirm, or upload a new avatar below.

Upload new custom avatar:

It is recommended that you use an image that is at least 200x200 pixels.
Add to EXTRA.css (this will change the text colour to red, #FF0000 - adjust as required)
Code:
/* Avatar explain text colour */
body .faint, body a.faint, body .faint a {
    color: #FF0000 !important;
}
 

dieketzer

Well-known member
#9
Sweet! It works, are you sure that it isn't located in the style properties for overlay?
you should get out of the habit of editing the various css templates. you are only setting yourself up for constant re-editing in the future.
instead, override them in extra.css using !important