Создаем дополнительные поля:
Телеграм
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>
в поле используем ссылку на страницу.
Указывал только основные значения, другие на свое усмотрение.
Идем в шаблон extra.less стиля или делаем модификацию
/* === 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);
}
}
}
