Описание
Форма входа №06 — содержит небольшой набор CSS свойств, для оформления формы входа в вашем чате. Она имеет достаточно простой и приятный внешний вид. Вместо изношенных, стандартных ссылок «Войти в аккаунт», «Отмена» и других, form-06 создает простые, но, в тоже время, стильные кнопки, поля для ввода логина и пароля и многое другое.
Помимо самой формы, код стилизует остальные кнопки в чате и поля ввода текста, а также добавляет эффекты при наведении на них.
Преимущества «Form-06» перед классическим дизайном
- Новый вид формы входа в чат
- Простые и изящные кнопки во всем чате
- Новый внешний вид полей ввода текста
- Легко настроить под основной стиль чата
Настройка цветовой гаммы
- Если вы используете стандартный вид чата (зеленый), делать изменения в коде вам не нужно.
- Если вы используете другую цветовую гамму, например, синюю, то вы можете воспользоваться инструкцией ниже.
Инструкция
В верхней части полученного кода вы увидите такие строки:
--btnbg: #4994f5;
--btnhover: #4fb6ff;
--btncolor: #fff;
--radius: 10px;
--texts: #666;
--bordertext: #ccc;
где,
- фон кнопок (btn – button, bg – background)
- фон кнопок при наведении
- цвет текста кнопок
- радиус скругления углов кнопок и полей ввода текста
- цвет набираемого текста и лейблов
- рамка поля ввода текста
Если вы хотите добавить собственное фоновое изображение на страницу входа, найдите в начале кода строчку .chatFull .transparent
и замените содержимое background-image
на код ниже.
Вы можете добавить позиционирование изображения при помощи CSS свойства background-position: 5% 10%;
background-image: url('ссылка на изображение');
где,
- ссылка на изображение – адрес вашей новой картинки (https://_______.jpg)
- позиционирование изображения по оси Х (5%) и Y (10%)
Вы с легкостью сможете изменить и настроить фон, цвета и углы под свои нужды. Для ускорения процесса воспользуйтесь прикрепленными изображениями на этой странице.
Если настройка вызвала у вас затруднения, вы можете задать вопрос в отзывах к шаблону формы.
Информацию об установке и создании собственных стилей для кнопок и текста читайте в разделе FAQ.
Отзывы
Отзывов пока нет.