XF 2 Tip Online indicator based on user ID

Add this to the extra.less template.

Code:

/* #### Online Indicator #### */
.message-avatar-wrapper .message-avatar-online
{
    left: 48%;
}

.message-avatar-wrapper .message-avatar-online.ctaOnlineIcon--0
{
    &:before {
        .m-faContent(@fa-var-sleigh);
        color: #ee0010;
        background: #ffffff;
        border: #ffffff solid 4px;
        border-radius: 2px;
        font-weight: 900;
    }
}

.message-avatar-wrapper .message-avatar-online.ctaOnlineIcon--1
{
    &:before {
        .m-faContent(@fa-var-bells);
        color: #ffd700;
        background: #008400;
        border: #008400 solid 4px;
        border-radius: 2px;
        font-weight: 900;
    }
}

.message-avatar-wrapper .message-avatar-online.ctaOnlineIcon--2
{
    &:before {
        .m-faContent(@fa-var-candy-cane);
        color: #e75480;
        background: #ffffff;
        border: #ffffff solid 4px;
        border-radius: 2px;
        font-weight: 900;
    }
}

.message-avatar-wrapper .message-avatar-online.ctaOnlineIcon--3
{
    &:before {
        .m-faContent(@fa-var-deer-rudolph);
        color: #654321;
        background: #fffafa;
        border: #fffafa solid 4px;
        border-radius: 2px;
        font-weight: 900;
    }
}

.message-avatar-wrapper .message-avatar-online.ctaOnlineIcon--4
{
    &:before {
        .m-faContent(@fa-var-gifts);
        color: #800080;
        background: #ffdd4b;
        border: #ffdd4b solid 4px;
        border-radius: 2px;
        font-weight: 900;
    }
}

.message-avatar-wrapper .message-avatar-online.ctaOnlineIcon--5
{
    &:before {
        .m-faContent(@fa-var-glass-cheers);
        color: #ffe9ca;
        background: #d2222f;
        border: #d2222f solid 4px;
        border-radius: 2px;
        font-weight: 900;
    }
}

.message-avatar-wrapper .message-avatar-online.ctaOnlineIcon--6
{
    &:before {
        .m-faContent(@fa-var-hat-santa);
        color: #ee0010;
        background: #ffffff;
        border: #ffffff solid 4px;
        border-radius: 2px;
        font-weight: 900;
    }
}

.message-avatar-wrapper .message-avatar-online.ctaOnlineIcon--7
{
    &:before {
        .m-faContent(@fa-var-holly-berry);
        color: #008800;
        background: #ffffff;
        border: #ffffff solid 4px;
        border-radius: 2px;
        font-weight: 900;
    }
}

.message-avatar-wrapper .message-avatar-online.ctaOnlineIcon--8
{
    &:before {
        .m-faContent(@fa-var-snowman);
        color: #fffafa;
        background: #87ceeb;
        border: #87ceeb solid 4px;
        border-radius: 2px;
        font-weight: 900;
    }
}

.message-avatar-wrapper .message-avatar-online.ctaOnlineIcon--9
{
    &:before {
        .m-faContent(@fa-var-tree-decorated);
        color: #006600;
        background: #edf6fd;
        border: #edf6fd solid 4px;
        border-radius: 2px;
        font-weight: 900;
    }
}

Add this to the extra.less template.

Code:

/* #### Online Indicator #### */
.message-avatar-wrapper .message-avatar-online
{
    left: 48%;
}

.message-avatar-wrapper .message-avatar-online.ctaOnlineIcon--0
{
    &:before {
        .m-faContent(@fa-var-broom);
        color: #654321;
        background: #e8ecef;
        border: #e8ecef solid 4px;
        border-radius: 2px;
        font-weight: 900;
    }
}

.message-avatar-wrapper .message-avatar-online.ctaOnlineIcon--1
{
    &:before {
        .m-faContent(@fa-var-bat);
        color: #000000;
        background: #4678b3;
        border: #4678b3 solid 4px;
        border-radius: 2px;
        font-weight: 900;
    }
}

.message-avatar-wrapper .message-avatar-online.ctaOnlineIcon--2
{
    &:before {
        .m-faContent(@fa-var-cauldron);
        color: #111;
        background: #489466;
        border: #489466 solid 4px;
        border-radius: 2px;
        font-weight: 900;
    }
}

.message-avatar-wrapper .message-avatar-online.ctaOnlineIcon--3
{
    &:before {
        .m-faContent(@fa-var-coffin);
        color: #654321;
        background: #aaaaaa;
        border: #aaaaaa solid 4px;
        border-radius: 2px;
        font-weight: 900;
    }
}

.message-avatar-wrapper .message-avatar-online.ctaOnlineIcon--4
{
    &:before {
        .m-faContent(@fa-var-ghost);
        color: #f8f8ff;
        background: #171139;
        border: #171139 solid 4px;
        border-radius: 2px;
        font-weight: 900;
    }
}

.message-avatar-wrapper .message-avatar-online.ctaOnlineIcon--5
{
    &:before {
        .m-faContent(@fa-var-hat-witch);
        color: #000000;
        background: #489466;
        border: #489466 solid 4px;
        border-radius: 2px;
        font-weight: 900;
    }
}

.message-avatar-wrapper .message-avatar-online.ctaOnlineIcon--6
{
    &:before {
        .m-faContent(@fa-var-hat-wizard);
        color: #000000;
        background: #a885bf;
        border: #a885bf solid 4px;
        border-radius: 2px;
        font-weight: 900;
    }
}

.message-avatar-wrapper .message-avatar-online.ctaOnlineIcon--7
{
    &:before {
        .m-faContent(@fa-var-hockey-mask);
        color: #ffffff;
        background: #1e1e46;
        border: #1e1e46 solid 4px;
        border-radius: 2px;
        font-weight: 900;
    }
}

.message-avatar-wrapper .message-avatar-online.ctaOnlineIcon--8
{
    &:before {
        .m-faContent(@fa-var-jack-o-lantern);
        color: #ff7518;
        background: #000000;
        border: #000000 solid 4px;
        border-radius: 2px;
        font-weight: 900;
    }
}

.message-avatar-wrapper .message-avatar-online.ctaOnlineIcon--9
{
    &:before {
        .m-faContent(@fa-var-spider-black-widow);
        color: #000000;
        background: #ce0018;
        border: #ce0018 solid 4px;
        border-radius: 2px;
        font-weight: 900;
    }
}