Пользователь
- Регистрация
- 17 Ноя 2024
- Сообщения
- 76
- Автор темы
- #1
Приветствую уважаемые пользователи данного форума хотел бы сегодня рассказать как настроить меню быстрого доступа
Давайте начнем с создания
1.Открываем Внешний вид
2.Нажимаем на "Виджеты"
3.Нажинаем на "Добавить виджет"
4.Выбираем Определение виджета "HTML"
5.Добавить виджет
6. В ключ виджета вставляем "quick_access"
Заголовок:Меню быстрого доступа (по желанию)
7. Позиции для отображения:Список форумов: боковая панель
8.В Условия отображения нечего не ставим
9.В шаблон вставляем следующий код:
10.На расширенный режим ставим галочку
Давайте начнем с создания
1.Открываем Внешний вид
2.Нажимаем на "Виджеты"
3.Нажинаем на "Добавить виджет"
4.Выбираем Определение виджета "HTML"
5.Добавить виджет
6. В ключ виджета вставляем "quick_access"
Заголовок:Меню быстрого доступа (по желанию)
7. Позиции для отображения:Список форумов: боковая панель
8.В Условия отображения нечего не ставим
9.В шаблон вставляем следующий код:
CSS:
<div class="block">
<div class="block-body block-row">
<style>
/* Контейнер для скролла */
.quick-access-container {
max-height: 300px; /* можно подогнать под свой макет */
overflow-y: auto;
padding-right: 6px; /* чтобы текст не налезал на скролл */
scrollbar-width: thin;
scrollbar-color: #2a5298 #171e29;
}
/* Красивый скролл для Chrome/Edge/Safari */
.quick-access-container::-webkit-scrollbar {
width: 6px;
}
.quick-access-container::-webkit-scrollbar-track {
background: #171e29;
border-radius: 4px;
}
.quick-access-container::-webkit-scrollbar-thumb {
background: linear-gradient(180deg, #2a5298, #256d85);
border-radius: 4px;
}
.quick-access-container::-webkit-scrollbar-thumb:hover {
background: linear-gradient(180deg, #256d85, #2a5298);
}
/* Стили кнопок */
.quick-access .button {
width: 100%;
height: 40px;
display: inline-flex;
align-items: center;
justify-content: center;
text-decoration: none;
cursor: pointer;
border: 1px solid #31435d;
white-space: nowrap;
transition: all 0.3s ease;
font-size: 13px;
border-radius: 8px;
padding: 15px 18px 13px;
font-weight: 400;
text-align: center;
letter-spacing: .05em;
box-shadow: inset 0 -2px 0 rgb(0 0 0 / 12%);
color: #fff;
background: #171e29;
margin: 0 0 10px;
position: relative;
overflow: hidden;
}
.quick-access .button::before {
content: "";
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(270deg, #1e3c72, #2a5298, #256d85, #2a5298, #1e3c72);
background-size: 400% 400%;
transition: left 0.4s ease;
z-index: 0;
}
.quick-access .button:hover::before {
left: 0;
animation: gradientMove 4s ease infinite;
}
.quick-access .button:hover {
box-shadow: 15 15 15px rgba(37, 109, 133, 0.8),
25 25 25px rgba(42, 82, 152, 0.7),
35 35 35px rgba(30, 60, 114, 0.6);
}
@keyframes gradientMove {
0% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
100% { background-position: 0% 50%; }
}
.quick-access .button span {
position: relative;
z-index: 1;
}
</style>
<div class="quick-access-container">
<ol class="listPlain quick-access">
<li><a href="/threads/3/" class="button"><span class="button-text"><span>Правила проекта</span></span></a></li>
<li><a href="/forums/7/" class="button"><span class="button-text"><span>Правила форума</span></span></a></li>
<li><a href="/forums/8/" class="button"><span class="button-text"><span>Тех. Раздел Test</span></span></a></li>
<li><a href="/forums/13/" class="button"><span class="button-text"><span>Сервер №1</span></span></a></li>
<li><a href="/forums/20/" class="button"><span class="button-text"><span>Жалобы Test</span></span></a></li>
<li><a href="/forums/14/" class="button"><span class="button-text"><span>Role-Play Биографии</span></span></a></li>Итог: Вы Добавили Меню быстрого доступа
Настройка меню быстрого доступа
1.Заходим в виджеты нажимаем на "Меню быстрого доступа"
2.Листаете вниз до шаблона
3.Заменяете ссылку на вашу соц сеть
Настройка меню быстрого доступа
1.Заходим в виджеты нажимаем на "Меню быстрого доступа"
2.Листаете вниз до шаблона
3.Заменяете ссылку на вашу соц сеть
Вложения
Последнее редактирование модератором:
