Урок "Дизайн чата" разделён на 6 частей.
1. Дизайн чата: "Рисуем и разрезаем".
2. Дизайн чата: "Устанавливаем".
3. Дизайн чата: "Записная книжка".
4. Дизайн чата: "Дизайн страниц раздела".
5. Дизайн чата: "Дизайн формы регистрации".
6. Дизайн чата: "Дизайн анкеты".
------------------------------------------------------
!!Все изображения урока размещены в превью - при клике увеличатся.

В этом уроке я расскажу как настраивать дизайн записной книжки.
В итоге урока, у меня получилась такая книжка.
http://s7.uploads.ru/enLi9.png

Я планировала записную книжку с фоновым изображением..поэтому заранее нарисовала этот фон.
(вес не более 50k):
http://s7.uploads.ru/t/2uy8q.gif

Теперь переходим в админку, дизайн записной книжки.

Основные стили.

Окно.

http://s7.uploads.ru/t/GIhBY.png
Здесь я загрузила заранее приготовленный фон. Позиционировала его в правый верхний угол, без повтора.
Цвет выбирала такой же как и на фоновом изображении..что бы не видно было границ.

Обводка окна.

http://s7.uploads.ru/t/EOsX7.png
Обводка окна - это рамка вокруг всего окна книжки.

Заголовок.

http://s6.uploads.ru/t/tP8nR.png
Тут мы настраиваем фон и стиль текста.
(пример заголовка "Новая записка", "Входящие записки").

Панель.

http://s6.uploads.ru/t/MhRGp.png

Сообщение от админа чата.

http://s7.uploads.ru/t/OgesB.png

Сообщение от админа сервиса.

http://s6.uploads.ru/t/RwNkS.png

Системное уведомление.

http://s6.uploads.ru/t/0cDIq.png

Кнопки.

http://s7.uploads.ru/t/xEOah.png

Разделитель между кнопками.

http://s7.uploads.ru/t/bVJu0.png

Список сообщений.

Список сообщений.

http://s6.uploads.ru/t/OT6BM.png

Заголовок списка сообщений.

http://s6.uploads.ru/t/0MsCZ.png

Выделенное сообщение.

http://s7.uploads.ru/t/TmvV9.png
Это стиль текста при наведении на него мышью.

Сообщение.

http://s6.uploads.ru/t/Qcgbp.png

Поле ввода.

Поле ввода.

http://s7.uploads.ru/t/Ib3dv.png
Стиль поля ввода сообщения, когда отправляем новую записку.

Поле ввода в фокусе.

http://s6.uploads.ru/t/nSg56.png
Если оставить настройки как на скрине, то поле ввода ввода не будет меняться, когда в нём печатаем.

После всех настроек, жмём на кнопку "Сохранить".
http://s6.uploads.ru/t/1toAX.png