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

Reusing member avatar

Lee

Well-known member
#1
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>
 

Fuhrmann

Well-known member
#3
Use the attribute img:

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

Lee

Well-known member
#4
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.
 

Lee

Well-known member
#8
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?
 

Jake Bunce

XenForo moderator
Staff member
#10
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.
 

Lee

Well-known member
#11
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.
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?