XF 2.0 Customizing avatar style in template

[rfc0001]

I've modified the widgets_template_online template to display avatars instead of text for members:

Replacing:

<ul class="listInline listInline--comma">
    <xf:foreach loop="$online.users" value="$user">
        <xf:trim>
            <li><xf:username user="$user" rich="true" class="{{ !$user.visible ? 'username--invisible' : '' }}" /></li>
        </xf:trim>
    </xf:foreach>
</ul>

With:

<ul class="listHeap">
    <xf:foreach loop="$online.users" value="$user">
        <li>
            <xf:avatar user="$user" size="xs" img="true" />
        </li>
    </xf:foreach>
</ul>

The only snag is I don't have an elegant way to indicate a user is invisible (for admins). I'd like to add opacity = 0.5 to the CSS for the img, but adding this CSS to the xf:avatar element doesn't propigate to the img. Is there an easy way to do this?

Thanks in advance.

 

[S Thomas]

<xf:avatar user="$user" size="xs" img="true" innerclass="username--invisible" />

or any other class, for example one that adds your opacity.

 

[rfc0001]

<xf:avatar user="$user" size="xs" img="true" innerclass="username--invisible" />

or any other class, for example one that adds your opacity.

Awesome, thanks!

 

[rfc0001]

<xf:avatar user="$user" size="xs" img="true" innerclass="username--invisible" />

or any other class, for example one that adds your opacity.

That didn't seem to work. I added the following code:

<xf:avatar user="$user" size="xs" img="true" innerclass="{{ !$user.visible ? 'username--invisible' : '' }}" />

And added "username--invisible" class is not added to the avatar:

 

[S Thomas]

Change your online status to invisible mate. Or the one from the test account.

 

[rfc0001]

Change your online status to invisible mate. Or the one from the test account.

I did . It's still not showing. Even if i add it without the conditional.

 

[S Thomas]

Editing the right style?

 

[rfc0001]

Ah, nevermind, it's adding it to the child of the avatar (which is what I want anyways):