Гайд Виджет «Мы в социальных сетях» xenForo

[DESALIN]

Создаём стильный иконный виджет со ссылками на соцсети в боковой панели форума.

Шаг 1: HTML-шаблон виджета​

Название виджета: Мы в социальных сетях
Ключ: soc_button_widget
Позиция: Список разделов → Боковая панель
HTML-код:

<div class="block soc-button_widget" {{ widget_data($widget) }}>
    <div class="block-container">
        <div class="block-body block-row">
            <div class="rounded-social-buttons">
                <a class="social-button facebook" href="https://www.facebook.com/" target="_blank"><xf:fa icon="fab fa-facebook-f" /></a>
                <a class="social-button twitter" href="https://www.twitter.com/" target="_blank"><xf:fa icon="fab fa-twitter" /></a>
                <a class="social-button vk" href="https://vk.com/" target="_blank"><xf:fa icon="fab fa-vk" /></a>
                <a class="social-button odnoklassniki" href="https://ok.ru/" target="_blank"><xf:fa icon="fab fa-odnoklassniki" /></a>
                <a class="social-button youtube" href="https://www.youtube.com/" target="_blank"><xf:fa icon="fab fa-youtube" /></a>
                <a class="social-button instagram" href="https://www.instagram.com/" target="_blank"><xf:fa icon="fab fa-instagram" /></a>
                <a class="social-button telegram" href="https://telegram.org/" target="_blank"><xf:fa icon="fab fa-telegram-plane" /></a>
                <a class="social-button viber" href="https://www.viber.com/" target="_blank"><xf:fa icon="fab fa-viber" /></a>
                <a class="social-button whatsapp" href="https://www.whatsapp.com/" target="_blank"><xf:fa icon="fab fa-whatsapp" /></a>
                <a class="social-button discord" href="https://discord.com/" target="_blank"><xf:fa icon="fab fa-discord" /></a>
            </div>
        </div>
    </div>
</div>

Шаг 2: Стилизация в extra.less
Добавляем в extra.less следующий CSS для круглых иконок с эффектами:
Или можете создать модификацию шаблона

Создаем модификацию шаблона extra.less
Ключ модификации: soc_button_widget
Тип поиска: Регулярное выражение
Найти: #$#
Заменить ставим код ниже:

/* ---- SOCIAL-BUTTONS ---- */
@buttonsSize: 40px;
@buttonsHover: #fefefe;

@buttonsFacebook: #3b5998;
@buttonsTwitter: #55acee;
@buttonsVk: #0077FF;
@buttonsYoutube: #bb0000;
@buttonsInstagram: #CF2872;
@buttonsOdnoklassniki: #F17000;
@buttonsTelegram: #28A8EA;
@buttonsViber: #583FBB;
@buttonsWhatsapp: #4BCA5A;
@buttonsDiscord: #404EED;

.rounded-social-buttons {
    text-align: center;

    .social-button {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: @buttonsSize;
        height: @buttonsSize;
        border: (@buttonsSize/10/2) solid transparent;
        padding: 0;
        text-decoration: none;
        color: @buttonsHover;
        font-size: (@buttonsSize/2);
        border-radius: 50%;
        transition: all 0.5s ease;
        margin: 0 (@buttonsSize/10/2) (@buttonsSize/10/2) 0;

        &:hover {
            transform: rotate(360deg);
        }

        &.facebook        { background: @buttonsFacebook;        &:hover { color: @buttonsFacebook; background: @buttonsHover; border-color: @buttonsFacebook; } }
        &.twitter         { background: @buttonsTwitter;         &:hover { color: @buttonsTwitter; background: @buttonsHover; border-color: @buttonsTwitter; } }
        &.vk              { background: @buttonsVk;              &:hover { color: @buttonsVk; background: @buttonsHover; border-color: @buttonsVk; } }
        &.youtube         { background: @buttonsYoutube;         &:hover { color: @buttonsYoutube; background: @buttonsHover; border-color: @buttonsYoutube; } }
        &.instagram       { background: @buttonsInstagram;       &:hover { color: @buttonsInstagram; background: @buttonsHover; border-color: @buttonsInstagram; } }
        &.odnoklassniki   { background: @buttonsOdnoklassniki;   &:hover { color: @buttonsOdnoklassniki; background: @buttonsHover; border-color: @buttonsOdnoklassniki; } }
        &.telegram        { background: @buttonsTelegram;        &:hover { color: @buttonsTelegram; background: @buttonsHover; border-color: @buttonsTelegram; } }
        &.viber           { background: @buttonsViber;           &:hover { color: @buttonsViber; background: @buttonsHover; border-color: @buttonsViber; } }
        &.whatsapp        { background: @buttonsWhatsapp;        &:hover { color: @buttonsWhatsapp; background: @buttonsHover; border-color: @buttonsWhatsapp; } }
        &.discord         { background: @buttonsDiscord;         &:hover { color: @buttonsDiscord; background: @buttonsHover; border-color: @buttonsDiscord; } }
    }
}