Online indicator [Deleted]

[KSA]

ALMUSA submitted a new resource:

Online indicator - Frame user avatar with online status indicator

This is very simple CSS modification to the XF default online indicator.

In your EXTRA.less template add the following code.

.message-avatar-wrapper .message-avatar-online {
    position: absolute;
    top: -1px;
    left: -1px;
    right: -1px;
    bottom: -1px;
    border: 2px solid;
    border-left-color: #7fb90087;
    border-top-color: #7fb90087;
    border-right-color: #7fb90087;
    border-bottom-color: #7fb90087;
    border-radius: 3px;
    box-shadow: 0px 0px 10px 3px...

Read more about this resource...

 

[Brad P]

What about styles that have round avatars? Does it work for them also ?

 

[KSA]

Are you currently using an add-on for your online indicator or template modification?

 

[Brad P]

It’s part of ththe styles features in style properties

 

[KSA]

It’s part of ththe styles features in style properties

You go ahead and disable the background of your online indicator and then use the code below. If you face any difficulty doing so let me know.

This how its going to look.



and your code will be

.message-avatar-wrapper .message-avatar-online {
    position: absolute;
    top: -1px;
    right: -1px;
    left: -1px;
    bottom: -1px;
    border-radius: 50px;
    border: 2px solid #7fb900;
    border-right-color: #7fb90087;
    border-left-color: #7fb90087;
    border-bottom-color: #7fb90087;
    border-top-color: #7fb90087;
    box-shadow: 0px 0px 10px 3px hsla(79, 99%, 36%, 0.16862745098039217);
}

 

[AfyonluKesis]

It does not work properly in UI.X 2 @Dalton Prock

 

[KSA]

It does not work properly in UI.X 2 @Dalton Prock


View attachment 177133

Could provide url to your forum so we can have that working for you.

 

[AfyonluKesis]

forum on localhost now.. I tested
my localhost server

 

[KSA]

forum on localhost now.. I tested
my localhost server

I have it fixed for you. if anything else please feel free.

 

[AfyonluKesis]

can we make it glow?
This code working on default theme but it does not work on this ui.x style

.message-avatar-wrapper
{
    position: relative;
    display: inline-block;
    vertical-align: bottom;

    .message-avatar-online
    {
        position: absolute;
        top: -1px;
        left: -1px;
        bottom: -1px;
        right: -1px;
        box-shadow: 0 0 15px rgb(70, 177, 37), inset 0 0 20px white;   
        border: 2px solid transparent;
        border-top-color: rgb(70, 177, 37);
        border-left-color: rgb(70, 177, 37);
        border-bottom-color: rgb(70, 177, 37);
        border-right-color: rgb(70, 177, 37);   
        border-radius: (5%);
    -webkit-transform: scale(1);
    -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(1)}
     50% {opacity: .9}
    100% {opacity: 1;-webkit-transform: scale(1)}
}

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

 

[KSA]

can we make it glow?
This code working on default theme but it does not work on this ui.x style

.message-avatar-wrapper
{
    position: relative;
    display: inline-block;
    vertical-align: bottom;

    .message-avatar-online
    {
        position: absolute;
        top: -1px;
        left: -1px;
        bottom: -1px;
        right: -1px;
        box-shadow: 0 0 15px rgb(70, 177, 37), inset 0 0 20px white;  
        border: 2px solid transparent;
        border-top-color: rgb(70, 177, 37);
        border-left-color: rgb(70, 177, 37);
        border-bottom-color: rgb(70, 177, 37);
        border-right-color: rgb(70, 177, 37);  
        border-radius: (5%);
    -webkit-transform: scale(1);
    -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(1)}
     50% {opacity: .9}
    100% {opacity: 1;-webkit-transform: scale(1)}
}

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

Done.

 

[AfyonluKesis]

We need to delete message.less

.message-avatar-online
    {
        position: absolute;
        top: -3px;
        left: -3px;

        // border: 7px solid transparent;
        // border-left-color: rgb(127, 185, 0);
        // border-top-color: rgb(127, 185, 0);
        // border-radius: (@xf-avatarBorderRadius + 1) max(0px, @xf-avatarBorderRadius - 1px) 0 max(0px, @xf-avatarBorderRadius - 1);
        height: 10px;
        width: 10px;
        background: rgb(127, 185, 0);
        border-radius: 100%;
    }

2.5 days I did not sleep, my mind gives error now but I understand now ty for all

 

[Disciple of Nagash]

Hi, just to check, will this remove the existing online indicator on the top left of the avatar?

Also, am I correct in assuming that this is included in the theme template if I export from my test site and import into my live site?

Cheers

 

[KSA]

Hi, just to check, will this remove the existing online indicator on the top left of the avatar?

yes

Also, am I correct in assuming that this is included in the theme template if I export from my test site and import into my live site?

Cheers

correct.

 

[kankan]

Hello
What would be the code to fit UX2 theme ?
Thanks

 

[Old Nick]

thanks for this easy template modification.

 

[Old Nick]

@ALMUSA just a little problem, this code disabled the "user info pop-up" when you "mouse-hover" the avatar, you need to "mouse-hover" the nickname. Is this can be fixed ?

 

[vape.to]

is there a way to make this work on Mobile/responsive layout? currently doen't look right on mobile.

 

[KSA]

is there a way to make this work on Mobile/responsive layout? currently doen't look right on mobile.

Will check it out.

 

[KSA]

This resource has been removed and is no longer available.