- Ноя
- 128
- 39
Пользователь
Красивая регистрация и вход на форуме XenForo!
Хотите, чтобы ваши пользователи наслаждались стильной и удобной регистрацией и авторизацией? Сделайте ваш форум более привлекательным с помощью наших инструкций!
Следуйте этим простым шагам:
Теперь ваша регистрация и вход станут стильными и удобными! Пользователи точно оценят такой современный дизайн.
Если нужны дополнительные советы — пишите, помогу сделать ваш форум ещё красивее!
Хотите, чтобы ваши пользователи наслаждались стильной и удобной регистрацией и авторизацией? Сделайте ваш форум более привлекательным с помощью наших инструкций!
Следуйте этим простым шагам:
- Заходите в панель администратора — раздел "Панель Управления".
- Перейдите в раздел "Внешний вид" → "Шаблоны".
- В поиске найдите файл "extra.less".
- Вставьте следующий CSS-код в файл "extra.less":
Код:/* Стиль для красивой формы входа */ .login-form { background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%); padding: 20px; border-radius: 10px; box-shadow: 0 8px 16px rgba(0,0,0,0.2); color: #fff; } .login-form input[type="text"], .login-form input[type="password"] { width: 100%; padding: 10px; margin-bottom: 12px; border: none; border-radius: 5px; } .login-form button { width: 100%; padding: 10px; background-color: #fff; color: #6a11cb; border: none; border-radius: 5px; font-weight: bold; cursor: pointer; } .login-form button:hover { background-color: #f0f0f0; }
Теперь ваша регистрация и вход станут стильными и удобными! Пользователи точно оценят такой современный дизайн. Если нужны дополнительные советы — пишите, помогу сделать ваш форум ещё красивее!
extra.less:
/* Эффект при активном чекбоксе (неоновое состояние) */
.formRow input[type="checkbox"][name="accept"]:checked {
background: #e74c3c !important;
border-color: #e74c3c;
box-shadow: 0 0 10px rgba(231, 76, 60, 0.5);
}
/* Рисуем белую галочку внутри кастомного чекбокса */
.formRow input[type="checkbox"][name="accept"]:checked::before {
content: "\f00c";
font-family: 'Font Awesome 5 Pro', 'Font Awesome 5 Free';
font-weight: 900;
color: #fff;
font-size: 11px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
/* Текст рядом с чекбоксом */
.formRow:has([type="checkbox"][name="accept"]) .iconic-label {
color: #ffffff !important;
font-weight: 600;
cursor: pointer;
}
/* 4. Кнопка подтверждения регистрации/согласия */
.formSubmitRow-controls .button--primary {
background: linear-gradient(135deg, #e74c3c, #c0392b) !important;
color: #ffffff !important;
font-weight: 700 !important;
text-transform: uppercase;
letter-spacing: 1px;
padding: 12px 25px !important;
border: none !important;
box-shadow: 0 4px 15px rgba(231, 76, 60, 0.3) !important;
transition: all 0.25s ease !important;
}
.formSubmitRow-controls .button--primary:hover {
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(231, 76, 60, 0.5) !important;
background: linear-gradient(135deg, #ff4d39, #e74c3c) !important;
}
