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

Help me change the Staff Online look

Discussion in 'XenForo Questions and Support' started by Jamie, Nov 25, 2010.

  1. Jamie

    Jamie Well-Known Member

    I would like to simplify the members online area, and would like the Staff Online to show like the People You Follow area. I would like only their avatar to show up and then when you hover over their avatar it shows their name.

    I have created a screen shot of what I am looking to do.

    change_staff_online.png

    I attempted to do it, but messed up the sidebar, so I figured I would ask here for some help.

    Thanks,
    Jamie
     
    Trombones13 likes this.
  2. Trombones13

    Trombones13 Well-Known Member

    If there's a different way to do this for showing all members like that, could someone cover that as well? I don't know for sure if I will use it if it takes up too much space, but I'd at least like to see how it would look. :)
     
  3. Blandt

    Blandt Well-Known Member

    I belive Jake is the man for this sort of thing :)

    Jake !! can you hear us ? It's not turkey time yet :D
     
    Nasr and Trombones13 like this.
  4. Russ

    Russ Well-Known Member

    This is one way...

    In xenforo.css add->

    Code:
    .staffonlinelist li {
    float: left;
    }
    
    In sidebar_online_users

    Find:
    Code:
    <xen:if hascontent="true">
        <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" />
                                    <a href="{xen:link members, $user}" class="username">{xen:helper richUserName, $user}</a>
                                    <div class="userTitle">{xen:helper userTitle, $user}</div>
                                </li>
                            </xen:if>
                        </xen:foreach>
                    </xen:contentcheck>
                </ul>
            </div>
        </div>
    </xen:if>
    
    Replace with:

    Code:
    <xen:if hascontent="true">
        <div class="section staffOnline avatarList">
            <div class="secondaryContent">
                <h3>{xen:phrase staff_online_now}</h3>
                <ul class="staffonlinelist">
                    <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" title="{xen:helper richUserName, $user}" />
                                </li>
                            </xen:if>
                        </xen:foreach>
                    </xen:contentcheck>
                </ul>
    <div style="clear:both;"></div>
            </div>
        </div>
    </xen:if>
    
     
    Blandt likes this.
  5. Peggy

    Peggy Well-Known Member

    This is a very good idea.
     
  6. Jamie

    Jamie Well-Known Member

    Thanks Russ,

    That got the staff showing up as a small icon like the People You Follow, now I will need to tweak it to move the staff sidebar and the members sidebar together and label the top of the small staff avatars with a Staff online like the People You Follow link is.

    Thanks for the help! Now let's see what I can break to tweak it more.. :p

    Jamie
     
    Peggy likes this.
  7. Russ

    Russ Well-Known Member

    Jamie :)
    I got this working for you, I hope this is right or at least set you on the right foot:

    jamie.png


    In xenforo.css add->

    Code:
    .staffonlinelist img {
    height: 32px;
    width: 32px;
    margin-right:5px;
    padding: 2px;
    }
    
    sidebar_online_users find ->

    Code:
    <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'}">{$user.username}</a><xen:if is="{$i} < {$onlineUsers.limit}">,</xen:if>
                            <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, 'total={xen:number $onlineUsers.total}', 'members={xen:number $onlineUsers.members}', 'guests={xen:number $onlineUsers.guests}'}
            </div>
        </div>
    </div>
    
    Replace with ->

    Code:
    <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 hascontent="true">
                    <h4 class="minorHeading">{xen:phrase staff_online_now}</h4>
                <ul class="staffonlinelist">
                    <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" title="{xen:helper richUserName, $user}" />
                                </li>
                            </xen:if>
                        </xen:foreach>
                    </xen:contentcheck>
                </ul>
    <div style="clear:both;"></div>
    </xen:if>
    
            <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'}">{$user.username}</a><xen:if is="{$i} < {$onlineUsers.limit}">,</xen:if>
                            <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, 'total={xen:number $onlineUsers.total}', 'members={xen:number $onlineUsers.members}', 'guests={xen:number $onlineUsers.guests}'}
            </div>
        </div>
    </div>
    


    Then finally you'd want to remove the staff block

    REMOVE

    Code:
    <xen:if hascontent="true">
        <div class="section staffOnline avatarList">
            <div class="secondaryContent">
                <h3>{xen:phrase staff_online_now}</h3>
                <ul class="staffonlinelist">
                    <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" title="{xen:helper richUserName, $user}" />
                                </li>
                            </xen:if>
                        </xen:foreach>
                    </xen:contentcheck>
                </ul>
    <div style="clear:both;"></div>
            </div>
        </div>
    </xen:if>
    
     
    Jamie likes this.
  8. Jamie

    Jamie Well-Known Member

    That worked like a charm! I did put a <br /> break between the Staff Online and the Avatars.

    Here is how it looks using the Flexile style:
    new_members_online_flexile.png

    Thanks for the help!! Much Appreciated!

    Jamie
     
  9. Russ

    Russ Well-Known Member

    Glad you like it Jamie, I made a slight adjustment to use the actual tooltip popup on hover, looks and responds nicer as well:

    In this part:

    Code:
    <xen:if hascontent="true">
                    <h4 class="minorHeading">{xen:phrase staff_online_now}</h4>
                <ul class="staffonlinelist">
                    <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" title="{xen:helper richUserName, $user}" />
                                </li>
                            </xen:if>
                        </xen:foreach>
                    </xen:contentcheck>
                </ul>
    <div style="clear:both;"></div>
    </xen:if>
    
    Replace with:

    Code:
     <xen:if hascontent="true">
                     <h4 class="minorHeading">{xen:phrase staff_online_now}</h4>
                 <ul class="staffonlinelist">
                     <xen:contentcheck>
                         <xen:foreach loop="$onlineUsers.records" value="$user">
                             <xen:if is="{$user.is_moderator} OR {$user.is_admin}">
                                 <li title="{$user.username}" class="Tooltip">
                                     <xen:avatar user="$user" size="s" img="true" />
                                 </li>
                             </xen:if>
                         </xen:foreach>
                     </xen:contentcheck>
                 </ul>
     <div style="clear:both;"></div>
     </xen:if>
     
    Also if you don't want to use a <br />

    in xenforo.css

    Code:
    .staffonlinelist li {
    float: left;
    margin-top: 3px;
    }
    
    Add the margin-top



    I'll make a new thread so it's not all mixed up :)[/code]
     
    Blandt likes this.
  10. Jamie

    Jamie Well-Known Member

    Awesome! Thanks again for your help!

    Jamie
     
  11. Forsaken

    Forsaken Well-Known Member

  12. Russ

    Russ Well-Known Member

  13. Jamie

    Jamie Well-Known Member

    Sorry, I never saw that. Great Ideas thought out by several people?

    Sorry Russ for having you help me, when it already was asked for.

    Jamie
     
  14. Russ

    Russ Well-Known Member

Share This Page