Welcome!

By registering with us, you'll be able to discuss, share and private message with other members of our community.

SignUp Now!
Стиль кнопки настроек аккаунта

Стиль кнопки настроек аккаунта 01

Версия XenForo
  1. 2.2
Открываем шаблон account_preferences

Ищем label="{{ phrase('alert') }}" и заменяем на class="toggle-switch"

Так же само
Ищем label="{{ phrase('push') }}" и заменяем на class="toggle-switch"

Далее в extra.less добавляем это

CSS:
.toggle-switch {
    position: relative;
    width: 50px;
    height: 24px;
    -webkit-appearance: none;
    appearance: none;
    background-color: #ca3b3b;
    outline: none;
    cursor: pointer;
    border-radius: 12px;
    transition: background-color 0.3s;
    display: inline-block;
    vertical-align: middle;
}

.toggle-switch:checked {
    background-color: #66bb6a;
}

.toggle-switch:before {
    content: "";
    position: absolute;
    top: 2px;
    left: 2px;
    width: 20px;
    height: 20px;
    background-color: #000000;
    border-radius: 50%;
    transition: transform 0.3s, content 0.3s;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 8px;
    color: #f30909;
}

.toggle-switch:checked:before {
    content: "";
    transform: translateX(26px);
    color: #37fc1d;
}

.notificationChoices-choice--alert .iconic input {
    position: relative;
    width: 50px;
    height: 24px;
    overflow: unset;
    vertical-align: middle;
}

.notificationChoices-choice--alert .iconic input+i {
    display: none;
}

На выходе получаем
1752444336434.png



В архиве полностью готовый шаблон account_preferences для полной замены.
Скачивать не обязательно если в описании понятно что и как делать.
Нет прав для скачивания
Автор
KeoFox
Скачивания
7
Просмотры
707
Первый выпуск
Обновление
Оценка
0.00 звёзд 0 оценок

Другие ресурсы пользователя KeoFox

Сверху