XF 2.0 Users Without Avatar & Background Color

[sip]

Many users without Avatar get the shades of green as the color in their avatar with a Letter.
This green hampers the "Online status" green color making it almost non noticeable.
Is it possible that certain shades of green are altogether avoided and if yes, then How can we do this?

 

[Chris D]

Probably just simpler to style the online indicator accordingly.

You can see it in the template message.less by searching for:

.message-avatar-online

Obviously the dynamic letter avatar uses a wide range of colours so it might be difficult to find something which does not clash, but adding a text or box shadow here might make it work better.

 

[sip]

Probably just simpler to style the online indicator accordingly.

You can see it in the template message.less by searching for:

.message-avatar-online

Can pulsating animation be added? If that's possible, then a hand holding would be helpful

 

[Chris D]

I’m sure it’s possible but I don’t really have any suggestions on achieving it off hand.

 

[CyberAP]

Can pulsating animation be added? If that's possible, then a hand holding would be helpful

You can make it with CSS animations.

 

[sip]

@CyberAP

Thanks. Got it working.
Since it's working, I presume it's right.
Here's the modified .message-avatar-online

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

    animation-name: pulse_animation;
    animation-duration: 5000ms;
    transform-origin:70% 70%;
    animation-iteration-count: infinite;
    animation-timing-function: linear;

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

    @keyframes pulse_animation {
    0% { transform: scale(1); }
    30% { transform: scale(1); }
    40% { transform: scale(1.28); }
    50% { transform: scale(1); }
    60% { transform: scale(1); }
    70% { transform: scale(1.25); }
    80% { transform: scale(1); }
    100% { transform: scale(1); }
}