Решено как сделать токое

[Ashamed_Addax]

типо сделать что бы сверху было вк ютуб телеграм там
скажите плис

 

[Monolith]

1. Создаем новый виджет HTML в админ панели xF2 - [Внешний Вид/Виджеты/Добавить виджет]. Прописываем любой ключ виджета ( у меня socset), заголовок, позиция для отображения, - "Список форумов: боковая панель позиция - 1, отмечаем чекбокс "Расширенный режим" для скрытия заголовка и добавляем в поле Шаблон следующий код:

<div class="block block-social">
    <div class="block-container">
        <div class="block-body block-row">
            <div class="xft-social-box">
                <div class="xft-social-btns">
                    <a class="btn vk" data-xf-init="tooltip" href="#" target="_blank" data-original-title="Группа в Вконтакте">
                        <xf:fa icon="fab fa-vk" /></a>
                    <a class="btn youtube" data-xf-init="tooltip" href="#" target="_blank" data-original-title="Канал на YouTube">
                        <xf:fa icon="fab fa-youtube" /></a>
                    <a class="btn discord" data-xf-init="tooltip" href="#" target="_blank" data-original-title="Наш канал в Discord">
                        <xf:fa icon="fab fa-discord" /></a>
                </div>
            </div>
        </div>
    </div>
</div>

Сохраняем наш виджет и получаем на выходе, обновив главную страницу форума, вот такой вид наших кнопочек:
Теперь нам нужно привести содержимое виджета в Шикарный вид.
2. Открываем extra.less и добавляем следующую запись

.xft-social-box {
    display: block;
    margin: 0 auto;
    padding: 10px 0;
    position: relative;
    .xft-social-btns {
        margin: auto;
        font-size: 0;
        text-align: center;
        position: relative;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        .btn, .btn:before, .btn i {
            transition: all .35s cubic-bezier(.31, -0.105, .43, 1.59);
        }
        .btn {
            display: inline-block;
            background-color: #fafafa;
            width: 50px;
            height: 50px;
            line-height: 50px;
            margin: 2px 5px;
            text-align: center;
            position: relative;
            overflow: hidden;
            border-radius: 28%;
            box-shadow: 0 5px 15px -5px rgba(0, 0, 0, 0.5);
            opacity: 0.99;
            &:before {
                content: '';
                width: 120%;
                height: 120%;
                position: absolute;
                top: 90%;
                left: -110%;    
                transform: rotate(45deg);    
            }
            i {
                font-size: 30px;
                vertical-align: middle;
                transform: scale(.8);        
            }
            &:focus:before, &:hover:before {
                top: -10%;
                left: -10%;        
            }
            &.vk {
                &:before {
                    background-color: #486a8e;
                }
                i {
                    color: #486a8e;
                }
            }
            &.youtube {
                &:before {
                    background-color: #a32929;
                }
                i {
                    color: #a32929;
                }        
            }
            &.discord {
                &:before {
                    background-color: #768AD6;
                }
                i {
                    color: #768AD6;
                }        
            }
            &:hover i {
                color: #fff;
                transform: scale(1);        
            }                            
        }
    }
}

Результат

 

[Ashamed_Addax]

оооооо спасибо

 

[𝐱 𝐲 𝐳]

Ответ был дан выше.
Закрыто.​