Форма входа «Form-07»

Описание

Форма входа №07 — содержит небольшой набор CSS свойств, для оформления формы входа в вашем чате. Она имеет достаточно простой и приятный внешний вид. Вместо изношенных, стандартных ссылок «Войти в аккаунт», «Отмена» и других, form-07 создает простые, но, в тоже время, стильные кнопки, поля для ввода логина и пароля и многое другое.

Помимо самой формы, код стилизует остальные кнопки в чате и поля ввода текста, а также добавляет эффекты при наведении на них.

Преимущества «Form-07» перед классическим дизайном chatovod

• Новый вид формы входа в чат
• Простые и изящные кнопки во всем чате
• Новый внешний вид полей ввода текста
• Легко настроить под основной стиль чата

Настройка цветовой гаммы

• Если вы используете стандартный вид чата (зеленый), делать изменения в коде вам не нужно.

• Если вы используете другую цветовую гамму, например, синюю, то вы можете воспользоваться инструкцией ниже.

Инструкция

В верхней части полученного кода вы увидите такие строки:

    --btnbg: #b6e245;
    --btnhover: #a0ca2d;
    --color: #fff;
    --radius: 30px;

где,

1. фон кнопок (btn – button, bg – background)
2. фон кнопок при наведении
3. цвет текста кнопок и лейблов (например, Ваш ник в чате:)
4. радиус скругления углов кнопок и полей ввода текста

Если вы хотите изменить/добавить собственное фоновое изображение на страницу входа, найдите в начале кода строчку .chatFull .transparent и замените содержимое background-image на нужное вам.

    background-image: url('ссылка на изображение');

Вы можете изменить положение изображения при помощи css свойства background-position: 5% 10%;, указанном в коде.

1. ссылка на изображение – адрес вашей новой картинки (https://_______.jpg)
2. позиционирование изображения по оси Х (5%) и Y (10%)

Вы с легкостью сможете изменить и настроить фон, цвета и углы под свои нужды. Для ускорения процесса воспользуйтесь прикрепленными изображениями на этой странице или закажите установку у нас.

Если настройка вызвала у вас затруднения, вы можете задать вопрос в отзывах к шаблону формы.

Информацию об установке и создании собственных стилей для кнопок и текста читайте в разделе FAQ.