[XenForo] Как настроить меню быстрого доступа?

Добро пожаловать!

Зарегистрировавшись у нас, вы сможете обсуждать, делиться и отправлять личные сообщения другим участникам нашего сообщества.

Зарегистрироваться!
Пользователь
Регистрация
13 Авг 2025
Сообщения
114
Приветствую уважаемые пользователи данного форума хотел бы сегодня рассказать как настроить меню быстрого доступа
Давайте начнем с создания
1.Открываем Внешний вид
Посмотреть вложение 13613
2.Нажимаем на "Виджеты"
3.Нажинаем на "Добавить виджет"
Посмотреть вложение 13614
4.Выбираем Определение виджета "HTML"
5.Добавить виджет
Посмотреть вложение 13618
6. В ключ виджета вставляем "quick_access"
Заголовок:Меню быстрого доступа (по желанию)
7. Позиции для отображения:Список форумов: боковая панель
Посмотреть вложение 13616
8.В Условия отображения нечего не ставим
Посмотреть вложение 13617
9.В шаблон вставляем следующий код:
HTML:
<div class="block quick-access" data-widget-id="777" data-widget-key="forum_menu_dostup" data-widget-definition="html"><div class="block-container" style="border-radius: 12px; overflow: hidden; background: linear-gradient(145deg, #0f1729, #1a2436); border: 1px solid #2a3c50; box-shadow: 0 8px 32px rgba(0,0,0,0.3);"><h3 class="block-minorHeader" style="background: linear-gradient(135deg, #1e3c72, #2a5298); color: #fff; padding: 15px 20px; margin: 0; font-family: 'Segoe UI', system-ui, sans-serif; font-weight: 600; font-size: 16px; text-align: center; letter-spacing: 0.5px; border-bottom: 1px solid #2a5298;">Меню быстрого доступа</h3><div class="block-body block-row" style="padding: 20px;"><style>@import url('[URL='https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap%27);']https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap');[/URL]

.quick-access {
    font-family: 'Inter', 'Segoe UI', system-ui, sans-serif;
}

hr {
    border: none;
    height: 1px;
    background: linear-gradient(90deg, transparent, #2a5298, transparent);
    margin: 8px 0;
}

.quick-access .button {
    padding: 0;
    width: 100%;
    height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    text-decoration: none;
    cursor: pointer;
    border: 1px solid transparent;
    white-space: nowrap;
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    font-size: 13px;
    border-radius: 8px;
    padding: 0 16px;
    font-weight: 500;
    text-align: left;
    text-transform: none;
    letter-spacing: 0.2px;
    border: 1px solid #2a3c50;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    color: #e2e8f0;
    background: rgba(30, 41, 59, 0.7);
    backdrop-filter: blur(10px);
    font-family: 'Inter', 'Segoe UI', system-ui, sans-serif;
    position: relative;
    overflow: hidden;
}

.quick-access .button::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
    transition: left 0.6s ease;
}

.quick-access .button:hover::before {
    left: 100%;
}

.quick-access .button:hover {
    background: linear-gradient(135deg, #1e3c72, #2a5298, #256d85);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(37, 109, 133, 0.4);
    border-color: #3b82f6;
    color: #ffffff;
}

.quick-access .button:active {
    transform: translateY(0);
    box-shadow: 0 2px 10px rgba(37, 109, 133, 0.3);
}

.quick-access .button-text {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: 'Inter', 'Segoe UI', system-ui, sans-serif;
    font-size: 13px;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%;
}

.quick-access .button-text::before {
    content: '›';
    font-size: 16px;
    opacity: 0.7;
    transition: transform 0.3s ease;
    flex-shrink: 0;
}

.quick-access .button:hover .button-text::before {
    transform: translateX(3px);
    opacity: 1;
}

.listPlain.quick-access {
    margin: 0;
    padding: 0;
    list-style: none;
}

.listPlain.quick-access li {
    margin: 0;
    padding: 0;
}

/* Специально для длинного текста */
.quick-access .button:last-child .button-text {
    font-size: 12.5px;
    letter-spacing: 0.1px;
}

</style><ol class="listPlain quick-access"><li><a href="/forums/73/" class="button"><span class="button-text">Новости и информация</span></a></li><hr><li><a href="forums/8" class="button"><span class="button-text">Технический раздел</span></a></li><hr><li><a href="forums/72/" class="button"><span class="button-text">Правила сервера</span></a></li><hr><li><a href="forums/20" class="button"><span class="button-text">Жалобы Bloom</span></a></li><hr><li><a href="/forums/45/" class="button"><span class="button-text">Стать администратором</span></a></li></ol></div></div></div>


Итог: Вы Добавили Меню быстрого доступа
Настройка меню быстрого доступа
1.Заходим в виджеты нажимаем на "Меню быстрого доступа"
2.Листаете вниз до шаблона
3.Заменяете ссылку на вашу соц сеть
А можно её сделать голубой?
 
Сверху