- Версия XenForo
- 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;
}
На выходе получаем
В архиве полностью готовый шаблон
account_preferences
для полной замены.Скачивать не обязательно если в описании понятно что и как делать.