1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

XF 1.5 Staff Online Help

Discussion in 'Styling and Customization Questions' started by Xyphien, Jan 29, 2016.

  1. Xyphien

    Xyphien Active Member

    upload_2016-1-29_20-55-33.png

    How do I go about getting the staff online to go side by side in rows of three?


    Here is the code I have thus far.

    Code:
    <xen:edithint template="sidebar.css" />
    
    <!-- block: sidebar_online_staff -->
    <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} OR {xen:helper ismemberof, $user, 6, 10, 11, 13}">
    <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>
    <!-- end block: sidebar_online_staff -->
    
    
    
    
    <!-- block: sidebar_online_staff -->
    <xen:if hascontent="true">
    <!-- block: sidebar_online_staff -->
    <div class="section staffOnline avatarListInline">
    <div class="secondaryContent">
    <h3>VIP Online</h3>
    <ul>
    <xen:contentcheck>
    <xen:foreach loop="$onlineUsers.records" value="$user">
    <xen:if is="{xen:helper ismemberof, $user, 7, 5, 10, 11}">
    <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>
    <!-- end block: sidebar_online_staff -->
    
    
    
    
    <!-- block: sidebar_online_users -->
    <div class="section membersOnline userList">       
        <div class="secondaryContent">
            <h3><a href="{xen:link online}" title="{xen:phrase see_all_online_users}">{xen:phrase members_online_now}</a></h3>
           
            <xen:if is="{$onlineUsers.records}">
           
                <xen:if is="{$visitor.user_id}">
                    <xen:if hascontent="true">
                    <h4 class="minorHeading"><a href="{xen:link account/following}">{xen:phrase people_you_follow}:</a></h4>
                    <ul class="followedOnline">
                        <xen:contentcheck>
                            <xen:foreach loop="$onlineUsers.records" value="$user">
                                <xen:if is="{$user.followed}">
                                    <li title="{$user.username}" class="Tooltip"><xen:avatar user="$user" size="s" img="true" class="_plainImage" /></li>
                                </xen:if>
                            </xen:foreach>
                        </xen:contentcheck>
                    </ul>
                    <h4 class="minorHeading"><a href="{xen:link members}">{xen:phrase members}:</a></h4>
                    </xen:if>
                </xen:if>
               
                <ol class="listInline">
                    <xen:foreach loop="$onlineUsers.records" value="$user" i="$i">
                        <xen:if is="{$i} <= {$onlineUsers.limit}">
                            <li>
                            <xen:if is="{$user.user_id}">
                                <a href="{xen:link members, $user}"
                                    class="username{xen:if '!{$user.visible}', ' invisible'}{xen:if {$user.followed}, ' followed'}">{xen:helper richUserName, $user},
    
                            <xen:else />
                                {xen:phrase guest}<xen:if is="{$i} < {$onlineUsers.limit}">,</xen:if>
                            </xen:if>
                            </li>
                        </xen:if>
                    </xen:foreach>
                    <xen:if is="{$onlineUsers.recordsUnseen}">
                        <li class="moreLink">... <a href="{xen:link online}" title="{xen:phrase see_all_visitors}">{xen:phrase and_x_more, 'count={xen:number $onlineUsers.recordsUnseen}'}</a></li>
                    </xen:if>
                </ol>
            </xen:if>
           
            <div class="footnote">
                {xen:phrase online_now_x_members_y_guests_z_robots_a, 'total={xen:number $onlineUsers.total}', 'members={xen:number $onlineUsers.members}', 'guests={xen:number $onlineUsers.guests}', 'robots={xen:number $onlineUsers.robots}'}
            </div>
        </div>
    </div>
    <!-- end block: sidebar_online_users -->
    
     
  2. Arty

    Arty Well-Known Member

    Each user is wrapped in <li>, entire list is wrapped in <ul>. Add float:left to <li> and overflow:hidden to <ul>

    Something like this:
    Code:
    .sidebar .staffOnline ul { overflow: hidden; }
    .sidebar .staffOnline li { float: left; }
     
  3. Xyphien

    Xyphien Active Member

    So, what exactly am I changing? Or am I adding this somewhere? I'm a noob when it comes to this type of stuff.
     
  4. Arty

    Arty Well-Known Member

    Try adding it to extra.css
     
  5. Xyphien

    Xyphien Active Member

    That works! Thank you a lot! :D
     

Share This Page