Reposition the online indicator

Reposition the online indicator

Paul B

XenForo moderator
Staff member
Brogan submitted a new resource:

Resposition the online indicator - Move the online indicator to wherever you like using CSS or template edits

In the default style, the online indicator is positioned over the avatar.

View attachment 79482

With a few lines of CSS or a simple template edit, you can move it to wherever you like.


If you want it in the top right hand corner of the message user info block like so:

View attachment 79483

Edit the message_user_info.css template or add this to EXTRA.css:
Code:
.messageUserBlock div.avatarHolder .onlineMarker
{
    top: 2px;
    right: 2px;
}


For the bottom...

Read more about this resource...
 
Just curious.. there is the isOnline... but is there the isOffline also?
I know that one not showing "should" indicate to a user that others are not online, but I kind of like how I've got it on one of my sites. It's beside the user name and a green dot high for online and red low for offline.
Screen Shot 2014-08-01 at 9.20.02 PM.webp
 
Yes you should be able to add an icon, if you mean something like Font Awesome. Should be very easy.
 
Code:
!{$message.isOnline}

Would work to show offline.
Only problem I really see with that is that it won't allow you to reposition it via CSS since it's it's own class like in the example image I attached (it has online/offline/invisible).
 
You can still do it. You can use the conditional to add different class names to the element. You can then apply whatever styling you need to those class names.
 
You can still do it. You can use the conditional to add different class names to the element. You can then apply whatever styling you need to those class names.

Excellent tip Chris. TBH - I think offline users not having an indicator is a case of brilliant design not to include it. Minimizing bloat so to speak you really have to admire attention to detail. It was part of the online status system I really appreciated.
 
Last edited:
You can still do it. You can use the conditional to add different class names to the element. You can then apply whatever styling you need to those class names.
Maybe my infectious brain infarction I caught from a certain @Azhria Lilu over the interwebz will be gone by then so I can figure it out. :p
I'm having some serious design fartz lately and have gone back to doing OS playing.
 
This no longer applies since changes were made to the indicator.

What are you trying to do?
 
Top Bottom