Today we are going to discuss how to add a animated online indicator!

This is easily accomplished by adding some code to our Extra.css

So go ahead and log into your Admin CP. Navigate your way over to Appearance and then to Templates and search for Extra. You will see this page:

Click on that and you will see this page:

At the very end of your Extra.css add the following code:

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

Make sure that you click save!

Once you do that you will see this on your online indicator for members in the threads:

Just note that it could add some CPU usage to your users because of a infinite loop.

If you have any questions please feel free to ask away!

Looking for quality XenForo hosting? Check out Arvixe Web Solutions