Гайд Контакты в дополнительных полях тем (Telegram, VK, OK) в xenForo

Что делаем:​

• Создаём дополнительные поля тем.
• Настраиваем их отображение с иконками Font Awesome.
• Добавляем стили для красивого вывода и анимации.

Шаг 1: Создание дополнительных полей​

Пример: Telegram​

• ID поля: telegram
• Место отображения: После сообщения
• HTML для вывода значения:

<a href="//telegram.im/@{$value}" target="_blank">

• HTML-обёртка:

<div class="field-contact tg">
    {$value}
    <span class="fa-stack" style="vertical-align: top;">
        <i class="far fa-circle fa-stack-2x"></i>
        <i class="fab fa-telegram-plane fa-stack-1x"></i>
    </span>
</a>
</div>

В поле вписываем ник без символа @

Нажмите, чтобы раскрыть...

Пример: ВКонтакте​

• ID поля: vk
• HTML для вывода значения:

<a href="{$value}" target="_blank">

• HTML-обёртка:

<div class="field-contact vk">
    {$value}
    <span class="fa-stack" style="vertical-align: top;">
        <i class="far fa-circle fa-stack-2x"></i>
        <i class="fab fa-vk fa-stack-1x"></i>
    </span>
</a>
</div>

Вводим ссылку на страницу

Нажмите, чтобы раскрыть...

Пример: Одноклассники​

• ID поля: ok
• HTML для вывода значения:

<a href="{$value}" target="_blank">

• HTML-обёртка:

<div class="field-contact ok">
    {$value}
    <span class="fa-stack" style="vertical-align: top;">
        <i class="far fa-circle fa-stack-2x"></i>
        <i class="fab fa-odnoklassniki fa-stack-1x"></i>
    </span>
</a>
</div>

Указываем прямую ссылку на профиль

Нажмите, чтобы раскрыть...

Шаг 2: Стилизация в extra.less​

/* === Контактные иконки в темах === */
.field-contact {
    display: inline-flex;
    width: auto;
    font-size: 1.2em;
    padding: 5px 2px;

    &.tg a {
        color: #28A8EA;
    }

    &.vk a {
        color: #2787F5;
    }

    &.ok a {
        color: #EE8208;
    }

    .fa-stack {
        transition: transform 0.2s;
    }

    &:hover .fa-stack {
        transform: scale(1.1);
    }
}