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

Discussion in 'Styling and Customization Questions' started by toodlez, Oct 20, 2011.

  1. toodlez

    toodlez Active Member

    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?
     
  2. Jake Bunce

    Jake Bunce XenForo Moderator Staff Member

    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>
    
     
    Mutt likes this.
  3. toodlez

    toodlez Active Member

    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
     
  4. toodlez

    toodlez Active Member

    Nevermind!
    It's in the account_avatar_overlay.css
     
  5. toodlez

    toodlez Active Member

    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.
     
  6. trilogy33

    trilogy33 Well-Known Member

    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;
    }
    
     
  7. toodlez

    toodlez Active Member

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

    trilogy33 Well-Known Member

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

    dieketzer Well-Known Member

    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
     

Share This Page