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