Help me change the Staff Online look

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.webp

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

Thanks,
Jamie
 
Sort by date Sort by votes
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. :)
 
Upvote 0 Downvote
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>
 
Upvote 0 Downvote
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
 
Upvote 0 Downvote
Jamie :)
Jamie said:
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
Click to expand...
I got this working for you, I hope this is right or at least set you on the right foot:

jamie.webp


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>
 
Upvote 0 Downvote
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.webp

Thanks for the help!! Much Appreciated!

Jamie
 
Upvote 0 Downvote
Jamie said:
That worked like a charm! I did put a <br /> break between the Staff Online and the Avatars.

Thanks for the help!! Much Appreciated!

Jamie
Click to expand...

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]
 
Upvote 0 Downvote
You must log in or register to reply here.

Similar threads

_Al
Add-on Specific usergroup online in Sidebar widget
Replies
2
Views
434
_Al
_Al
securedme
  • Question Question
XF 2.2 How to change this padding width under certain condition?
Replies
0
Views
241
securedme
securedme
clasione
  • Question Question
XF 2.2 Second Avatar or Profile Photo That Appears on Posts
Replies
6
Views
467
clasione
clasione
T
  • Question Question
XF 2.2 Give edit permission to thread starter, but not repliers?
Replies
6
Views
252
TomCann
T
jayhawku
Does anyone have a "look what you can do on XF" type post written?
Replies
6
Views
336
Suzanne O
Suzanne O
Top Bottom