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

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

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

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

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

Окно.

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

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

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

Заголовок.

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

Панель.

http://sh.uploads.ru/t/0n5Fi.png

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

http://s3.uploads.ru/t/r3qOl.png

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

http://s5.uploads.ru/t/Ablyq.png

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

http://s8.uploads.ru/t/6nlj2.png

Кнопки.

http://s9.uploads.ru/t/1eCTY.png

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

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

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

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

http://s9.uploads.ru/t/XRPgl.png

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

http://sg.uploads.ru/t/WjlYF.png

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

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

Сообщение.

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

Поле ввода.

Поле ввода.

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

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

http://sh.uploads.ru/t/VTq4e.png

Если оставить настройки как на скрине, то поле ввода ввода не будет меняться, когда в нём печатаем.

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