User's Member Card > Avatar Editor

[thunderup]

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]

Edit this template:

Admin CP -> Appearance -> Templates -> member_card

Replace the red 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:

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

 

[thunderup]

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

 

[thunderup]

Nevermind!
It's in the account_avatar_overlay.css

 

[thunderup]

Where is the color styling for this text located:

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]

Where is the color styling for this text located:

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)

/* Avatar explain text colour */
body .faint, body a.faint, body .faint a {
    color: #FF0000 !important;
}

 

[thunderup]

Sweet! It works, are you sure that it isn't located in the style properties for overlay?

 

[trilogy33]

Sweet! It works, are you sure that it isn't located in the style properties for overlay?

At first glance I can't see it, but I generally use EXTRA.css anyway.

 

[dieketzer]

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