XenForo - Виджет кнопок социальных сетей | Fi4a.ru

Создаем HTML виджет.
Ключ виджета: soc_button_widget
Заголовок: Мы в социальных сетях
Позиции для отображения: Список разделов: Боковая панель: 1
Шаблон:

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>

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

Less:

$0
/* ---- SOCIAL-BUTTONS ---- */

@buttonsFacebook: #3b5998;      // Цвет кнопки Facebook
@buttonsTwitter: #55acee;       // Цвет кнопки Twitter
@buttonsVk: #0077FF;            // Цвет кнопки ВКонтакте
@buttonsYoutube: #bb0000;       // Цвет кнопки YouTube
@buttonsInstagram: #CF2872;     // Цвет кнопки Instagram
@buttonsOdnoklassniki: #F17000; // Цвет кнопки Одноклассников
@buttonsTelegram: #28A8EA;      // Цвет кнопки Телеграм
@buttonsViber: #583FBB;         // Цвет кнопки Viber
@buttonsWhatsapp: #4BCA5A;      // Цвет кнопки WhatsApp
@buttonsDiscord: #404EED;       // Цвет кнопки Discord
@buttonsHover: #fefefe;         // Цвет кнопок при наведении и цвет иконок без наведения курсора
@buttonsSize: 40px;                // Размер кнопок

.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);
        }
        &:last-child {
            margin-right: 0;
        }
        &.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;
            }
        }               
    }
}

XenForo Виджет кнопок социальных сетей

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