Урок "Дизайн чата" разделён на 6 частей.
1. Дизайн чата: "Рисуем и разрезаем".
2. Дизайн чата: "Устанавливаем".
3. Дизайн чата: "Записная книжка".
4. Дизайн чата: "Дизайн страниц раздела".
5. Дизайн чата: "Дизайн формы регистрации".
6. Дизайн чата: "Дизайн анкеты".
----------------------------------------------------
!!Все изображения в уроке превью - увеличиваются при клике.
Спасибо чату "Одиночеству.net" за открытую админку для урока.
Теперь к уроку.
В предыдущем уроке мы рисовали и вырезали дизайн. Теперь приступим к установке в чат.
Заходим в админку - дизайн.
Нажимаем "Создать". Даём название.
Жмём "ок". Он должен у вас появиться в списке дизайнов.
Переходим в "Дизайн чата".
"Основные стили".
* цвет текста - цвет который будет использован при оформлении чата.
* цвет - это цвет фона.
* скрол - это полоса прокрутки.
В этом пункте настраиваются стили ссылок.
*цвет текста - какого цвета будут ссылки.
Ещё вы можете добавить рамку или какое то украшение.
В этом пункте настраивается ввид ссылки, при наведении на неё курсором.
Мне захотелось, что бы при наведении появлялся фон.
*цвет текста - можно задать что бы изменялся цвет.
*фон-это фон под ссылкой.
*прозрачность - можно уменьшить прозрачность...в процентах.
*можно сделать рамку или украшение текста.
Пример заголовок таблиц можно посмотреть в личных настройках.
*закругление углов - это насколько будет скруглены углы у рамки.
"Фрейм баннера".
*Что бы загрузить картинку баннера нажимаем на белый квадрат и ищем у себя на компьютере заранее приготовленный файл.
Если всё прошло успешно..она появиться вот в таком виде:
*свойства - выбираем будет ли повторяться наш баннер.
*позиция - как будет располагаться загруженное изображение. В этом случае я сделала что бы баннер был в левом верхнем углу. Например, если вы устанавливаете дизайн который будет относительно центра..выбирайте стрелку вверх.
*рамка - будет ли наш баннер заключён в рамку. В этом уроке мне не нужна рамка..поэтому ставим значение 0.
"Фрейм меню"
*цвет текста - это цвет текста надписей на кнопках.
*цвет - можно например рисовать кнопки без изображения на фоне..а просто цвет.
*прозрачность - в процентах можно уменьшить прозрачность фонового цвета.
*свойства - лучше ставить значение без повтора. Хотя всё зависит от ваших кнопок.
*шрифт - это относится к тексту на на кнопке.
*закругление углов - можем обозначить насколько будут закруглены края у кнопки. Оставив пустые поля края закруглены не будут.
*ширина, высота - задаём желаемые размеры кнопки. У меня установлены те значения, которые у изображения для фона кнопки.
Как будет выглядеть кнопка при наведении на неё мыши.
Стили выбираем какие вам захочется. Я меняла только цвет текста и фоновое изображение.
Стиль кнопок, по которым уже переходили.
Я обычно оставляю в этом пункте всё в таком виде.
Вокруг кнопок можно задать рамку. В этом дизайне я решилась обойтись без неё..поэтому все поля пусты.
"Фрейм отправки сообщений"
В этом пункте задаём стили полей ввода сообщения.
*возможно загружать на фон изображения.
*цвет текста - каким цветом будет вводиться сообщение в поле.
*цвет - цвет фона поля ввода.
*шрифт - какой шрифт будет применён к тексту.
*рамка - меняем цвет и ширину (у меня ширина на скрине 1) рамки.
*закругление углов - будут ли закруглены края у рамки.
*поле - отступы текста.
*отступ - расположение самого поля ввода.
*высота - какой высоты будет поле ввода.
Как будет выглядеть поле ввода, когда оно активно (т.е. когда там курсор или мы что то печатем).
Тут добавляем только изменения с "Поля ввода".
*эти кнопки не имеют определённую ширину, если будете рисовать фон...учитывайте.
*цвет - это цвет фона кнопки.
* высота - можно задать свою высоту этим кнопкам.
Нажимаем "Сохранить".
Должны вывестись сообщения об успешной загрузке файлов.
Переходим в "Дизайн окна сообщений".
Это основная настройка фрейма.
На этом этапе грузится картинка, которая будет во фрейме.
*цвет текста - цвет сообщений фрейма.
*цвет - какого цвета будет фрейм.
*рисунок - если есть картинка для фрейма загружаем сюда. (обязательно ставим галочку "фиксировать").
*свойства - будет ли картинка по повторяться по фрейму.
*позиция- определяем положение загруженной картинки (мне нужно было что бы она была в правом верхнем углу).
*поле - отступы текста.
Когда заходим в чат, текстом написано название чата. В этом пункте настраиваем стиль этого текста.
Можно поставить размер шрифта 0 рх, тогда названия чата не будет видно.
"Дополнительные стили".
Настраиваем стиль топика чата.
На скрине, по-моему мнени, наилуший вариант настройки.
*цвет текста - цвет которым будет написан текст в топике.
*фон - советую оставить пустые поля (можно, конечно задать какой то цвет..на этом фоне будет написан текст).
*рамка - будет ли топик обведён в рамку.
*отступ - отступы относительно фрейма.
*поле - отступы текста относительно краёв топика.
"Выделение фраз мне"
"Системные сообщения"
"Окно смайликов"
Нажимаем на кнопку "Сохранить".
Переходим в "Дизайн списка посетителей".
"Основные стили".
*цвет - цвет фона списка посетителей.
*рисунок - изображение которое будет на фоне. (если его нет, ничего не загружаем..останется просто фон).
*свойства - обязательно ставим галочку "фиксировать".
*позиция - определяем позицию загруженного изображения.
"Пользовательские стили"
У меня часто спрашивают как убрать белые и зелёные полоски в списке посетителей.
Убирается это именно в этом пункте. (рамка..нужно поставить значение 0)
Нажимаем "Сохранить".
Переходим в "Дизайн навигации".
*цвет - цвет фона нижней части навигации.
*рисунок - загружаем сюда изображение, которое будет в нижней части навигации.
*свойство - выбираем будет ли повторяться загруженный рисунок.
*позиция - расположение изображения фона.
*рамка - можем задать рамку.
*закругление углов - можно закруглить края.
*отступ - отступы от краёв информации.
*поле - отступ текста относительно фона.
*рисунок - загружаем картинку для верхней части навигации.
*высота - высота верхней части навигации..она равна высоте загруженной картинки.
Нажимаем на "Сохранить".
Переходим в "Дизайн контекстного меню".
Контекстное меню - это меню, которое открывается при нажатии правой кнопки на ник.
*цвет - цвет фона меню.
*рисунок - можно загрузить своё изображение на фон.
*рамка - рамка вокруг меню.
*закругление улов - можно закруглить края у меню.
*поле - отступ текста от краёв.
Нажимаем "Сохранить".
Дизайн установлен.
Вариантов настройки дизайна множества, завит от вашей фантазии))
Будут вопросы по установке, можете спрашивать в этой теме.
Следующий урок будет про дизайн Записной книжки, Формы регистрации, Анкеты, Разделов.