Staff Online Avatars Columns (With Overlay) - Forsaken

Discussion in 'XenForo Discussions' started by Brandon, Jan 31, 2013.

  1. Brandon

    Brandon Regular Member

    Joined:
    Jun 1, 2009
    Messages:
    6,602
    Likes Received:
    1,707
    Location:
    Topeka, Kansas
    First Name:
    Brandon
    Another resource submitted by Forsaken to Admin Talk.

    staff-online.png

    Open extra.css:

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

    Replace:

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

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

Share This Page