XenForo - Контакты в дополнительных полях тем | Fi4a.ru

На примере телеграма, вконтакте и одноклассников, делаем дополнительные поля тем и выводим в сообщение.

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

Код:

<div class="field-telegram">
    <a href="//telegram.im/@{$value}" target="_blank">
        <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 для вывода значения:

Код:

<div class="field-vk">
    <a href="{$value}" target="_blank">
        <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 для вывода значения:

Код:

<div class="field-ok">
    <a href="{$value}" target="_blank">
        <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>

в поле используем ссылку на страницу.
Указывал только основные значения, другие на свое усмотрение.
Идем в шаблон extra.less стиля или делаем модификацию

Less:

.pairs.pairs--columns.pairs--fixedSmall {
    &[data-field="telegram"], &[data-field="vk"], &[data-field="ok"] {
        display: inline-flex;
        width: auto;
        dt {
            display: none;
        }
        dd {
            font-size: 1.2em;
            padding: 5px 2px;
            transition: transform .2s;
            .field-telegram a {
                color: #28A8EA;
            }
            .field-vk a {
                color: #2787F5;
            }
            .field-ok a {
                color: #EE8208;
            }     
            &:hover {
                transform: scale(1.1);
            }
        }
    }
}

Создаем дополнительные поля:
Телеграм
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>

Код:

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

Код:

/* === field contact === */

.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 .2s;
    }
    &:hover {
        .fa-stack {
            transform: scale(1.1);
        }
    }
}

Таким способом можно сделать для любых сетей и мессенджеров

XenForo Контакты в дополнительных полях тем

Ещё ресурсы от Skaiman