Reusing member avatar

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>
 

Fuhrmann

Well-known member
Use the attribute img:

Rich (BB code):
<xen:avatar user="$visitor" img="true" size="s" class="NoOverlay plainImage" title="{xen:phrase view_your_profile}" />
 
Reactions: 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.
 

Brogan

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

icons.PNG
 

Brogan

XenForo moderator
Staff member
I manipulated it in Firebug, editing the existing border-radius.
Try adding !important.
 
Reactions: 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?
 

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.
 

Lee

Well-known 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.
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?
 
Top