Animated online indicator (looks best on rounded avatars) 1.1

[Lemminator]

I have The Same in my Test Forum.

 

[no0b]

After test, i have an space for offline statut:

View attachment 81430

I have The Same in my Test Forum.

My mistake, change the -10 to -22.

<span class="Tooltip offlineMarker" title="Offline" data-offsetX="-10" data-offsetY="-8"></span>

 

[Allan]

My mistake, change the -10 to -22.

<span class="Tooltip offlineMarker" title="Offline" data-offsetX="-10" data-offsetY="-8"></span>

That change just the position to Tooltip.

 

[Allan]

Online/Offline status animate:

• In message_user_info template, find:

<xen:if is="{$user.isOnline}"><span class="Tooltip onlineMarker" title="{xen:phrase online_now}" data-offsetX="-22" data-offsetY="-8"></span></xen:if>

• Replace with:

<xen:if is="{$user.isOnline}"><span class="Tooltip onlineMarker" title="{xen:phrase online_now}" data-offsetX="-7" data-offsetY="-8"></span>
<xen:else />
<span class="Tooltip offlineMarker" title="Offline" data-offsetX="-7" data-offsetY="-8"></span>
</xen:if>

• Add in EXTRA.css template:

.messageUserBlock div.avatarHolder .onlineMarker
{
    display: inline-block;
    width: 16px;
    height: 16px;
/*    margin: 9px 0 0 9px; <- if you'd like it on top left */
    margin: 79px 0 0 79px;
    background: #fff;
    border: none!important;
    border-radius: 50%!important
}

.messageUserBlock div.avatarHolder .onlineMarker:before
{
    content: '';
    position: absolute;
    width: 10px;
    height: 10px;
    margin: 3px 0 0 3px;
    background: #7fb900;
    border-color: #7fb900;
    border-radius: 50%
}

.messageUserBlock div.avatarHolder .onlineMarker:after
{
    content: '';
    position: absolute;
    width: 32px;
    height: 32px;
    margin: -9px 0 0 -9px;
    border: 1px solid #7fb900;
    border-radius: 50%;
    box-shadow: 0 0 4px #7fb900, inset 0 0 4px #7fb900;
    -webkit-transform: scale(0);
    -webkit-animation: online 2.5s ease-in-out infinite;
    animation: online 2.5s ease-in-out infinite
}

@-webkit-keyframes online
{
      0% {opacity: 1;-webkit-transform: scale(0)}
     50% {opacity: .7}
    100% {opacity: 0;-webkit-transform: scale(1)}
}

@keyframes online
{
      0% {opacity: 1;transform: scale(0)}
     50% {opacity: .7}
    100% {opacity: 0;transform: scale(1)}
}

.messageUserBlock div.avatarHolder .offlineMarker
{
    position: absolute;
    top: 9px;
    left: 9px;
    width: 16px;
    height: 16px;
    margin: 79px 0 0 79px;
    background: #fff;
    border: none!important;
    border-radius: 50%!important
}

.messageUserBlock div.avatarHolder .offlineMarker:before
{
    content: '';
    position: absolute;
    width: 10px;
    height: 10px;
    margin: 3px 0 0 3px;
    background: #E71423;
    border-color: #E71423;
    border-radius: 50%
}

.messageUserBlock div.avatarHolder .offlineMarker:after
{
    content: '';
    position: absolute;
    width: 32px;
    height: 32px;
    margin: -9px 0 0 -9px;
    border: 1px solid #E71423;
    border-radius: 50%;
    box-shadow: 0 0 4px #E71423, inset 0 0 4px #E71423;
    -webkit-transform: scale(0);
    -webkit-animation: online 2.5s ease-in-out infinite;
    animation: online 2.5s ease-in-out infinite
}
.xengallery_album_view .offlineMarker, .xengallery_media_view .offlineMarker, .quickReply .offlineMarker {
display: none;
}

• Result:

PS: The indicator appears offline when we are online on XenMediaGallery and quick reply, I decided to turn it off.

 

[Allan]

You can change your title "Animated online/offline indicator"

 

[KSA]

There is a white circle behind the green dot that is going in the wrong direction. Any idea what could be causing this?

@zagorskey

 

[rafass]

I usually avoid using FontAwesome and build a custom icon font with Fontello instead. That way one can take advantage of a .woff with a smaller size and no unnecessary icons that they'd never use.

+10000 Would be great some tutorial of this with Xenforo.
Thanks for share! nice animation!

 

[Will75]

Hey, hate to bump this, but quick question -- how would I make this show in the upper left corner? I'm using "square" user avatars, and having it in the corner would look a lot better.

 

[creativeforge]

Great resource! I'm almost there, the problem, I tried to fix but am stomped by: the offline status shows wrongly for me on my avatar box beside the Quick Reply field. It should also show ONLINE. Any idea?

 

[creativeforge]

Hey, hate to bump this, but quick question -- how would I make this show in the upper left corner? I'm using "square" user avatars, and having it in the corner would look a lot better.

In the code above, note this line:
/* margin: 9px 0 0 9px; <- if you'd like it on top left */

 

[MedicalDoctor]

Hi, is this updated for xenforo v1.5.1? Thanks.

 

[tommydamic68]

Any idea how to fix this on mobile device vertical?

 

[tommydamic68]

Any idea how to fix this on mobile device vertical?

View attachment 122220

Just in case anyone else needs this info, just add the code below to your Extra.CSS.

@media (max-width:@maxResponsiveNarrowWidth)
{ .messageUserBlock div.avatarHolder .onlineMarker { display: none; }}

 

[Flagy_]

How can I make this for X2?