Hide Extra User Info with CSS Effect

[uydudoktoru]

Open extra.css:

.sidebar .avatarListInline li
{
overflow: hidden; zoom: 1;
float:left;
margin: 5px 0 0 0;
width:25%;
}

Open sidebar_online_users:

Replace:

<xen:if hascontent="true">
<!-- block: sidebar_online_staff -->
<div class="section staffOnline avatarList">
<div class="secondaryContent">
<h3>{xen:phrase staff_online_now}</h3>
<ul>
<xen:contentcheck>
<xen:foreach loop="$onlineUsers.records" value="$user">
<xen:if is="{$user.is_moderator} OR {$user.is_admin}">
<li>
<xen:avatar user="$user" size="s" img="true" />
<xen:username user="$user" rich="true" />
<div class="userTitle">{xen:helper userTitle, $user}</div>
</li>
</xen:if>
</xen:foreach>
</xen:contentcheck>
</ul>
</div>
</div>
<!-- end block: sidebar_online_staff -->
</xen:if>

With

<xen:if hascontent="true">
<!-- block: sidebar_online_staff -->
<div class="section staffOnline avatarListInline">
<div class="secondaryContent">
<h3>{xen:phrase staff_online_now}</h3>
<ul>
<xen:contentcheck>
<xen:foreach loop="$onlineUsers.records" value="$user">
<xen:if is="{$user.is_moderator} OR {$user.is_admin}">
<li>
<xen:avatar user="$user" size="s" text="{$user.username} ({xen:helper userTitle, $user})" class="Tooltip" title="{$user.username}, {xen:helper userTitle, $user}" />
</li>
</xen:if>
</xen:foreach>
</xen:contentcheck>
</ul>
<div style="clear:both;"></div>
</div>
</div>
<!-- end block: sidebar_online_staff -->
</xen:if>