Animated online indicator (looks best on rounded avatars)

[jrockers]

You don't fancy the standard online indicator? Then try this quick modification, CSS only, no images needed:
Add this to EXTRA.css:

Compatible XF Versions:

• 1.4

.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)}
}

Notice: This will put some load on your CPU due to the infinite animation loop.

 

[Atheos]

Meron ganito yung PHC pa-triangle nga lang kasi square avatar yung gamit natin. hehe

 

[jrockers]

Yes.. napaisip ako kung paano to e apply sa xF 1.3?? posible kaya??

gaya nito..

ito yong sa PHC

How to Apply this online status Indicator 1 in xf 1.4 to xF 1.3??? posible den kaya.?

You do not have permission to view the full content of this post. Log in or register now.

 

[Atheos]

Pwede siguro, since CSS based naman siya. Pero i'm not really sure. LOL

 

[🤖]

Dear jrockers,

Since 2 years have passed since the last reply in this thread, I am locking it to prevent necroposting. Feel free to start a new thread or contact any forum staff if you want this to be reopened.

Thread closed.