Animated online indicator (looks best on rounded avatars) 1.1

Animated online indicator (looks best on rounded avatars) 1.1

Overview Updates (1) Reviews (3) Discussion
zagorskey updated Animated online indicator (looks best on rounded avatars) with a new update entry:

Fixed tooltip position

If you've decided on using this modification permanently, you can fix the "Оnline Now" tooltip position by editing the following line in the message_user_info template from this:

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

to this:

Code: 
<xen:if is="{$user.isOnline}"><span class="Tooltip onlineMarker" title="{xen:phrase online_now}" data-offsetX="-7"...
Click to expand...

Read the rest of this update entry...
 
It can be implemented on a 3rd party add-on, yes.
Votick said:
Can this be implemented on a 1.3 Install?
Click to expand...

@no0b has submitted a review to this modification with a link to an add-on that you can use with XF 1.3 and easily implement my modification with a little bit of CSS knowledge.
 
zagorskey said:
Use this for .messageUserBlock div.avatarHolder .onlineMarker:before

Code: 
.messageUserBlock div.avatarHolder .onlineMarker:before
{
    content: '✔';
    color:#fff;
    font-size:10px;
    position: absolute;
    width: 10px;
    height: 10px;
    margin: 3px 0 0 3px;
    background:-webkit-linear-gradient(#75c088 0%,#098128 100%);
    background:linear-gradient(#75c088 0%,#098128 100%);
    border-color: #7fb900;
    border-radius: 50%
}

You can experiment a bit to achieve the most suitable effect for your needs.
Click to expand...

No, a Icon was fantastic!
 
Just enter the code into the extra.css is all that needs to be done? Have done that but the icon is not showing up when I refresh the page, this is on a local install.
 
Votick said:
Can this be implemented on a 1.3 Install?
Click to expand...

Here is a my website with this modified add-on, in case you want to see a demo.

And the modified css:

Code: 
.messageUserBlock .userUserOnline:before
{
    content: '';
    position: absolute;
    width: 12px;
    height: 12px;
    margin: 2px 0 0 2px;
    background: #337755;
    border-color: #337755;
    border-radius: 50%
}

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

.messageUserBlock .userUserOffline
{
    display: inline-block;
    width: 16px;
    height: 16px;
/*    margin: 9px 0 0 9px; <- if you'd like it on top left */
    margin: -21px 0 0 215px;
    background: #fff;
    border: none!important;
    border-radius: 50%!important;
    position: absolute;
}
      
.messageUserBlock .userUserOffline:before
{
    content: '';
    position: absolute;
    width: 12px;
    height: 12px;
    margin: 2px 0 0 2px;
    background-color: red;
    border-color: red;
    border-radius: 50%
}


@-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)}
}
 
Test board is running 1.4 beta2 and I've just copied the code into extra.css and have the option checked to show online status.

online1.webp

Running UI.X latest and it's still not showing :( not sure if there is anything else that needs to be done or I'm missing something.
 
Lemminator said:
I Dont no what i Must do :( can you help me ? @no0b
Click to expand...

First, since Xen 1.4 doesn't have offline status indicator, so you have to make a modification in the template. Go to your style template, and look for "message_user_info".

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

Replace it by this:
Code: 
<xen:if is="{$user.isOnline}"><span class="Tooltip onlineMarker" title="{xen:phrase online_now}" data-offsetX="-22" data-offsetY="-8"></span>
<xen:else />
<span class="Tooltip offlineMarker" title="Offline" data-offsetX="-10" data-offsetY="-8"></span>
</xen:if>

Now, Xen 1.4 has offline status indicator itself.

And then, you can add the css code using the same things as this resource, like:
Code: 
.messageUserBlock div.avatarHolder .offlineMarker
{
    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 .offlineMarker:before
{
    content: '';
    position: absolute;
    width: 10px;
    height: 10px;
    margin: 3px 0 0 3px;
    background: #7fb900 (color code here);
    border-color: #7fb900 (color code here);
    border-radius: 50%
}

.messageUserBlock div.avatarHolder .offlineMarker:after
{
    content: '';
    position: absolute;
    width: 32px;
    height: 32px;
    margin: -9px 0 0 -9px;
    border: 1px solid #7fb900 (color code here);
    border-radius: 50%;
    box-shadow: 0 0 4px #7fb900, inset 0 0 4px #7fb900 (color code here);
    -webkit-transform: scale(0);
    -webkit-animation: online 2.5s ease-in-out infinite;
    animation: online 2.5s ease-in-out infinite
}
 
no0b said:
First, since Xen 1.4 doesn't have offline status indicator, so you have to make a modification in the template. Go to your style template, and look for "message_user_info".

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

Replace it by this:
Code: 
<xen:if is="{$user.isOnline}"><span class="Tooltip onlineMarker" title="{xen:phrase online_now}" data-offsetX="-22" data-offsetY="-8"></span>
<xen:else />
<span class="Tooltip offlineMarker" title="Offline" data-offsetX="-10" data-offsetY="-8"></span>
</xen:if>

Now, Xen 1.4 has offline status indicator itself.

And then, you can add the css code using the same things as this resource, like:
Code: 
.messageUserBlock div.avatarHolder .offlineMarker
{
    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 .offlineMarker:before
{
    content: '';
    position: absolute;
    width: 10px;
    height: 10px;
    margin: 3px 0 0 3px;
    background: #7fb900 (color code here);
    border-color: #7fb900 (color code here);
    border-radius: 50%
}

.messageUserBlock div.avatarHolder .offlineMarker:after
{
    content: '';
    position: absolute;
    width: 32px;
    height: 32px;
    margin: -9px 0 0 -9px;
    border: 1px solid #7fb900 (color code here);
    border-radius: 50%;
    box-shadow: 0 0 4px #7fb900, inset 0 0 4px #7fb900 (color code here);
    -webkit-transform: scale(0);
    -webkit-animation: online 2.5s ease-in-out infinite;
    animation: online 2.5s ease-in-out infinite
}
Click to expand...
After test, i have an space for offline statut:

Screenshot_5.webp
 
You must log in or register to reply here.
Back
Top Bottom