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

Reusing member avatar

Discussion in 'Styling and Customization Questions' started by Lee, Jan 18, 2012.

  1. Lee

    Lee Well-Known Member

    I want to reuse my member avatar in my logo block.

    I added this line to my logo block:

    <xen:avatar user="$visitor" size="s" class="NoOverlay plainImage" title="{xen:phrase view_your_profile}" />

    But as you can see it puts it above. I think it is because it converts the image to a span. Is there a way around this without damaging other aspects of the style?

    asyoucansee.PNG

    Here is the full code I have in the logo_block template.

    HTML:
    <div id="logoBlock">
        <div class="pageWidth">
            <div class="pageContent">
                <xen:include template="ad_header" />
                <xen:hook name="header_logo">
                <div id="logo"><a href="{$logoLink}">
                    <span><xen:comment>This span fixes IE vertical positioning</xen:comment></span>
                    <img src="@headerLogoPath" alt="{$xenOptions.boardTitle}" />
                </a></div>
                </xen:hook>
                            <div style="float: right;" class="right"><xen:avatar user="$visitor" size="s" class="NoOverlay plainImage" title="{xen:phrase view_your_profile}" /><img src="http://dev.leerobson.com/social_media/icons/fb.png" alt="Find us on Facebook" /><img src="http://dev.leerobson.com/social_media/icons/twitter.png" alt="Follow us on Twitter" /><img src="http://dev.leerobson.com/social_media/icons/utube.png" alt="Watch us on Youtube" /><img src="http://dev.leerobson.com/social_media/icons/photobucket.png" alt="Photobucket" /><a href="http://dev.leerobson.com/community/index.php?forums/-/index.rss"><img src="http://dev.leerobson.com/social_media/icons/rss.png" alt="Subscribe via RSS" /></a> </div>
                <span class="helper"></span>
            </div>
        </div>
    </div>
     
  2. Lee

    Lee Well-Known Member

    My bad, thanks for moving this whoever it was! :)
     
  3. Fuhrmann

    Fuhrmann Well-Known Member

    Use the attribute img:

    Code:
    <xen:avatar user="$visitor" img="true" size="s" class="NoOverlay plainImage" title="{xen:phrase view_your_profile}" />
     
    Lee likes this.
  4. Lee

    Lee Well-Known Member

    Thanks, that works. Is there a way I can apply a border to it to make it round and fit in more with the other images? Without damaging the style of the avatar in other places.
     
  5. Brogan

    Brogan XenForo Moderator Staff Member

    Use inline styling or a separate class to add a large border radius - 25px or so.

    icons.PNG
     
  6. Lee

    Lee Well-Known Member


    What code did you use to get that effect Brogan? Adding inline style to the above code doesn't seem to do anything for me in Chrome.

     
  7. Brogan

    Brogan XenForo Moderator Staff Member

    I manipulated it in Firebug, editing the existing border-radius.
    Try adding !important.
     
    Lee likes this.
  8. Lee

    Lee Well-Known Member

    I used this line
    HTML:
    <xen:avatar user="$visitor" size="s" img="true" style="-moz-border-radius: 15px !important; border-radius: 15px !important;" />
    
    but it seems to convert into html as

    HTML:
    <a href="index.php?members/lee.1/" class="avatar Av1s" style="-moz-border-radius: 15px !important; border-radius: 15px !important;" data-avatarHtml="true"><img src="data/avatars/s/0/1.jpg?1326107898" width="48" height="48" alt="Lee" /></a>
    So its applying the style to the <a> tag rather than the image tag, which I assume to be the problem. Any ideas?
     
  9. Lee

    Lee Well-Known Member

    Any ideas? Seems I don't quite understand the xenForo replacements yet!
     
  10. Jake Bunce

    Jake Bunce XenForo Moderator Staff Member

    This works for me:

    Admin CP -> Appearance -> Templates -> EXTRA.css

    Add this code:

    Code:
    .headerAvatar span
    {
    	border-radius: 25px !important;
    }
    
    Then use this to reference the avatar in your templates:

    Code:
    <xen:avatar user="$visitor" size="s" class="headerAvatar" />
    
    Notice how the class is named.
     
  11. Lee

    Lee Well-Known Member

    The span forced it onto a new line, but I modified what you gave me and turned it into this, which now works!

    Code:
    .headerAvatar img
    {
    border-radius: 25px !important;
    }
    
    and

    Code:
    <xen:avatar user="$visitor" size="s" class="headerAvatar" img="true" />
    
    Thanks Jake, appreciate it. So is there a specific way classes must be named for things like this to work?
     
  12. Jake Bunce

    Jake Bunce XenForo Moderator Staff Member

    Nope. The CSS class can be named anything.
     
  13. Lee

    Lee Well-Known Member

    Okay, thanks Jake! Big help.
     

Share This Page