Online indicator based on user ID

[UnstucK]

Bored with the same online indicator for everyone?​

Compatibility with XenForo: 2.1, 2.2, 2.3

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.

XenForo is a commercial Internet forum software package written in PHP. It was developed by former vBulletin developers, and it is designed to enhance community engagement and provide forum owners with a powerful platform to build and manage their online communities.

CSS (Cascading Style Sheets) is a stylesheet language used to describe the presentation of a document written in HTML or XML. It enables the separation of content from design, allowing for greater flexibility and control in the layout and appearance of web pages.

 

Creating custom prefix styling

[cXF] Navigation tab icons for custom tabs