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

Description

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

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

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

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

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

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

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

Инструкция

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

    --btnbg: #4994f5;
    --btnhover: #4fb6ff;
    --btncolor: #fff;
    --radius: 10px;

    --texts: #666;
    --bordertext: #ccc;

где,

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

Если вы хотите добавить собственное фоновое изображение на страницу входа, найдите в начале кода строчку .chatFull .transparent и замените содержимое background-image на код ниже.
Вы можете добавить позиционирование изображения при помощи CSS свойства background-position: 5% 10%;

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

где,

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

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

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

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