Is it possible to show a user online status as they do on xenforo with the green in the top right corner of a users photo?

 

I use that myself, I would prefer the display being on the avatar, obviously wouldn't work with the circle photos though, mine are square incase there was a way

On 25/11/2016 at 9:08 PM, marklcfc said:

I use that myself, I would prefer the display being on the avatar, obviously wouldn't work with the circle photos though, mine are square incase there was a way

Ask one of the developers if they can assist you in customizing it to your preference.

I'd imagine a simple CSS adjustment and you'd have it how you would prefer. I'm sure it can be tweaked to work how you would like, just ask one of them. @-FP is very helpful.

Something like this?

 

I don't know if I'm updating this today or later... I'm running into a problem now. The quickest way to place this is doing it in the user_Photo template, but then it shows everywhere in every user avatar displayed on the suite. Doing it in the post_container one... yes you solve the problem of having it everywhere, but you never know what width it's going to have so you can't really align it correctly for every situation. Maybe someone comes up with an idea for this...

I'd personally prefer the green in the corner as XF do, if it isn't inside the photo itself it would be less disruptive and neater.

1 minute ago, marklcfc said:

I'd personally prefer the green in the corner as XF do, so it isn't inside the photo itself as it's less disruptive and neater.

Do you have a screenshot of that? I'm checking Xenforo's official forums now but I don't see any online indicator in the avatar area,

I added it to the post above

https://xf2demo.xenforo.com/threads/profile-posts-and-more.930/

See it in action on xf 2. So to correct my first message it would be top left corner! 

File updated. Works on square avatars only for now but I think I can easily do something for round ones. Test it, let me know what you think... will probably add some settings to it, size, color, position... right now I just ripped off Xenforo's thingie and hardcoded it 

14 minutes ago, -FP said:

File updated. Works on square avatars only for now but I think I can easily do something for round ones. Test it, let me know what you think... will probably add some settings to it, size, color, position... right now I just ripped off Xenforo's thingie and hardcoded it 

Looks good but a few things

- is this new option possible to show in the private message area too?

- is it possible to not show the grey icon in photos for offline users - so only the green would show. If not online then it shows the photo as normal, if it can be corrected easily by adding css into custom.css that would be fine for my personal preference.

6 minutes ago, marklcfc said:

- is this new option possible to show in the private message area too?

Maybe...

7 minutes ago, marklcfc said:

- is it possible to not show the grey icon in photos for offline users - so only the green would show. If not online then it shows the photo as normal, if it can be corrected easily by adding css into custom.css that would be fine for my personal preference.

I'll add an option for that, but for now download the file again, install and add this to custom.css

.avatar_indicator_offline { display: none; }

 

That works.

Thanks for your efforts! I'm going to be really picky though, on XF the green icon is slightly outside of the photo and that makes it more visible. As it is now inside the photo it looks like it's part of the photo.. just thought I'd mention if that can be altered.

10 hours ago, marklcfc said:

That works.

Thanks for your efforts! I'm going to be really picky though, on XF the green icon is slightly outside of the photo and that makes it more visible. As it is now inside the photo it looks like it's part of the photo.. just thought I'd mention if that can be altered.

I've achieved this by changing top and left to margin-top and margin-left in the xml file, although it isn't working as well as it should (part of the photo shows in the corner behind it on mobile ).

So I tried to use overflow: hidden; border-radius: 2px; on ipsUserPhoto but the overflow hid the part outside of the photo. I noticed your span was before the img, whereas the span on xf is after, whether that makes any difference to this. I may be over complicating it all now though!

Right now it should be going out a bit, but it's only 1 pixel. In the xml set top and left to -2px instead of -1 if you want more. I get this with -2.

And this with -1.

I will be adding settings for this anyway.

I'd rather not go out too much, as it then looks detached from the photo. If you see below that's what happen (I've zoomed in, it's most noticeable when on mobile), the photo's edge appears just slightly which is why I thought add the border-radius to fix that, but couldn't get it working

Although on your photo above it doesn't appear to show.

Oh I see... try adding this to custom.css

.ipsUserPhoto_large img { border-radius: 4px 0 0 0 !important; }

 

Or maybe better, you can reduce the border-radius of the indicator itself to 3px 3px 0 3px; instead of 5px 3px 0 3px;

This way the corner won't be as smooth and the avatar corner won't show up behind it. (And like this you don't have to hack the avatar itself)

The latter is better as I don't have the icon active for offline users so photos wouldn't look right, it seems to be ok now. I have it live on my site

Good  Next release will have all this tweaks and some more settings I hope.

If it could be added it into messager that would be perfect, as I believe the other option shows in messenger.

File updated with some settings and support for round avatars. Private conversations stuff still pending.

4 hours ago, -FP said:

File updated with some settings and support for round avatars. Private conversations stuff still pending.

It doesn't work, and now I have replaced my old version that was working so it isn't working at all now