Мануал 2.x Онлайн-индикатор на основе пользовательского ID

23808 · 24 Окт 2019

Оригинальный материал -

У вас нет разрешения на просмотр ссылки, пожалуйста Войдите или Зарегистрируйтесь

Вам надоел один и тот же онлайн-индикатор для всех?

Мне тоже, поэтому я и придумал это.

Это выбор из 10 различных индикаторов, которые автоматически применяются на основе идентификатора пользователя.

Реализация очень проста.
Она состоит из одного редактирования шаблона и нескольких CSS для каждой иконки.
CSS может быть применен для каждого стиля через шаблон extra.less.

Первым шагом является редактирование шаблона message_macros.

Ищите это в строке 10:

Код:

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

Заменяем этим:

Форматирование (BB-код):

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

Не стесняйтесь изменять имя переменной (ctaOnlineIconValue) и класс CSS (ctaOnlineIcon--) по своему усмотрению.
Просто убедитесь, что вы используете одно и то же имя в шаблоне extra.less.

Затем все, что вам нужно сделать, это добавить свой собственный CSS в шаблон extra.less.

Вам понадобится уникальная запись (всего 10) для каждого значения от 0 до 9 для класса ctaOnlineIcon--, например:

HTML:

message-avatar-wrapper .message-avatar-online.ctaOnlineIcon--0
{
    &:before {
        .m-faContent(@fa-var-star);
        color: gold;
    }
}

.message-avatar-wrapper .message-avatar-online.ctaOnlineIcon--1
{
    &:before {
        .m-faContent(@fa-var-cube);
        color: green;
    }
}

.message-avatar-wrapper .message-avatar-online.ctaOnlineIcon--2
{
    &:before {
        .m-faContent(@fa-var-circle);
        color: blue;
    }
}

.message-avatar-wrapper .message-avatar-online.ctaOnlineIcon--3
{
    &:before {
        .m-faContent(@fa-var-triangle);
        color: orange;
    }
}

...

Вот и все!

Как уже упоминалось в начале, это можно применить к стилю, просто изменив CSS в шаблоне extra.less.

Шаблон message_macros необходимо редактировать только в том случае, если другие стили не являются потомками отредактированного стиля. Лучше использовать модификации шаблона TMS. Как пользоваться модификациями шаблона ссылка в подписи.

Примеры:

Новогодние онлайн индикаторы

Код:

/* #### 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;
    }
}

Halloween онлайн индикаторы

Код:

/* #### 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;
    }
}

ratagag · 21 Ноя 2020

Спасибо

Goldcs · 1 Июн 2021

Спасибо)

makarov · 24 Авг 2022

интересно сделано, думаю пригодиться

howtomw · 18 Окт 2022

Оп, оп, спасибо