Reusing member avatar

[Lee]

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="{xenhrase 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?



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

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

 

[Lee]

My bad, thanks for moving this whoever it was!

 

[Fuhrmann]

Use the attribute img:

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

 

[Lee]

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.

 

[Paul B]

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

 

[Lee]

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

View attachment 23772

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.

<xen:avatar user="$visitor" size="s" img="true" style="-moz-border-radius: 15px; border-radius: 15px;" />

 

[Paul B]

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

 

[Lee]

I used this line

<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

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

 

[Lee]

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

Any ideas? Seems I don't quite understand the xenForo replacements yet!

 

[Jake Bunce]

This works for me:

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

Add this code:

.headerAvatar span
{
	border-radius: 25px !important;
}

Then use this to reference the avatar in your templates:

<xen:avatar user="$visitor" size="s" class="headerAvatar" />

Notice how the class is named.

 

[Lee]

This works for me:

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

Add this code:

.headerAvatar span
{
border-radius: 25px !important;
}

Then use this to reference the avatar in your templates:

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

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

and

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

 

[Jake Bunce]

Thanks Jake, appreciate it. So is there a specific way classes must be named for things like this to work?

Nope. The CSS class can be named anything.

 

[Lee]

Nope. The CSS class can be named anything.

Okay, thanks Jake! Big help.