XF2 Tutorials Online indicator based on user ID

[JowLix]

Bored with the same online indicator for everyone?

Me too, which is why I came up with this.

It's a selection of 10 different indicators which are automatically applied based on user ID.

Implementation is very simple.
It consists of one template edit and some CSS for each icon.
The CSS can be applied per style via the extra.less template.

The first step is to edit the message_macros template.

Look for this on line 10:

<span class="message-avatar-online" tabindex="0" data-xf-init="tooltip" data-trigger="auto" title="{{ phrase('online_now')|for_attr }}"></span>

Replace it with this:

<xf:set var="$ctaOnlineIconValue" value="{{ $user.user_id % 10 }}" />
<span class="message-avatar-online ctaOnlineIcon--{$ctaOnlineIconValue}" tabindex="0" data-xf-init="tooltip" data-trigger="auto" title="{{ phrase('online_now')|for_attr }}"></span>

Feel free to change the name of the variable (ctaOnlineIconValue) and CSS class (ctaOnlineIcon--) as you wish.
Just make sure you use the same name in the extra.less template if you do.


Then all you have to do is add your custom CSS to the extra.less template.

You will need a unique entry (10 in total) for each value from 0 to 9 for the ctaOnlineIcon-- class, like so:

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

    &:before
    {
        border-radius: 2px;
        border: @xf-messageUserBlock--background-color solid 4px;
    }

    &.ctaOnlineIcon--
    {
        &0:before
        {
            .m-faContent(@fa-var-star);
        }

        &1:before
        {
            .m-faContent(@fa-var-cube);
        }

        &2:before
        {
            .m-faContent(@fa-var-car-circle);
        }

        &3:before
        {
            .m-faContent(@fa-var-car-triangle);
        }

        ... and so on to 9
    }
}

And that's it!


As mentioned at the start, this can be applied per style just by changing the CSS in the extra.less template.
The message_macros template will only need to be edited if the other styles are not children of the edited style.