• This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn more.

XF 2.0 Users Without Avatar & Background Color

sip

Active member
#1
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

XenForo developer
Staff member
#2
Probably just simpler to style the online indicator accordingly.

You can see it in the template message.less by searching for:
Less:
.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

Active member
#3
Probably just simpler to style the online indicator accordingly.

You can see it in the template message.less by searching for:
Less:
.message-avatar-online
Can pulsating animation be added? If that's possible, then a hand holding would be helpful :)
 

sip

Active member
#6
@CyberAP

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

CSS:
    .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); }
}
 
Last edited: