What's new

Animated online indicator (looks best on rounded avatars)

Status
Not open for further replies.

jrockers

Honorary Poster
Joined
Jul 25, 2014
Posts
488
Reaction
308
Points
244
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

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

2mgkpp4.jpg

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

Attachments

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

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.
 
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.
 
Status
Not open for further replies.

Similar threads

Back
Top