VOC++ чаты (больше не поддерживаются)
3 • Посмотреть все темы

Учебник по дизайну VOC++ BSE

1 2

327

Геннадий @mychatik

27.05.2016

Автором этого учебника является pasha. На данный момент, авторский сайт не работает.
Я буду выкладывать учебник с своими уточнениями и дополнениями.

Тему НЕ ЗАСОРЯТЬ вопросами и комментариями!!! Для этого есть другие темы.

Добро пожаловать в VOC++ Учебник!
Главная задача проекта - это помощь начинающим (да и не только) администраторам чатов на движке VOC++ BSE.

Как известно, Voodoo Chat и, соответственно, VOC++ имеют фреймовую структуру.
Вот стандартная компоновка графических элементов дизайна:

Основные элементы дизайна находятся в папке grunge. Рассмотрим их:

- up.gif.

- down.gif.

- er.gif.

- filter_on.gif.

- grunge_12.gif.

- grunge_02.gif.

- grunge_05.gif.

- grunge_06.gif.

- grunge_09.gif.
[img]http://imgs.su/users/67540/1464316947.gif[/img] - grunge_10.gif.
[img]http://imgs.su/users/67540/1464316985.gif[/img] - grunge_11.gif.
[img]http://imgs.su/users/67540/1464317021.gif[/img] - grunge_14.gif.
[img]http://imgs.su/users/67540/1464317062.gif[/img] - pause_on.gif.

gradient.gif - pasha не стал выкладывать, так как он очень большой. Этот файл также отвечает за фон страниц в чате (магазина, кланов, при выходе с чата, смайликов и пр.)

Теперь о том, как покрасить пробелы, которые указаны на рисунке.
Для этого вам нужно открыть в дизайне чата файлы menu_public.php и menu_private.php и найти в них код:

<body bgcolor="#abd256" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
где bgcolor="#abd256" - это цвет тех самых пробелов.
Если вы хотите вставить картинку вместо цвета, то вам надо заменить bgcolor="#abd256" на: background="Ссылка вашего изображения"
Получится что-то типа такого:

<body background="/designes/design_1/grunge/12345.gif" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
menu_public.php отвечатет за верхнюю часть, а menu_private.php - за нижнюю.

327

Геннадий @mychatik

29.05.2016

Элемент, отвечающий за фон в нижнем фрейме под приватом, находится в другой папке - img

- down_buttons_menu.jpg

Также, в этой папке расположены такие основные картинки:

- amul_red.gif. Красный амулет. Означает, что у пользователя 1 амулет.

- amul_gray.gif. Серый амулет. Означает, что у пользователя 3 амулета.

- amul_orange.gif. Золотой амулет. Означает, что у пользователя 9 амулетов.

- amul_curse.gif. Проклятие. Значительно замедляет набор поинтов. Имея 4 проклятия, пользователь автоматически получает бан.

В стандартном чате, количество амулетов ограничено числом 27. То есть пользователь может иметь не больше 3х золотых амулетов.
Но в настоящее время есть моды, которые позволяет увеличить количество амулетов у пользователя до 81, 243 и даже до 1092!

- male.jpg. Принадлежность к полу Парень.

- female.jpg. Принадлежность к полу Девушка.

Для категории "без пола" ОНИ, в стандартном дизайне картинка не предусмотрена. Вместо неё стоит заглушка - прозрачная картинка gender_none.gif.
При желании, можете подобрать для этой категории своё изображение размером 16х16 px.

- have_photo.jpg. Означает, что у пользователя в профиле есть фото.

- rings.gif. Означает, что пользователь состоит в браке.

- utalk.gif. Пользователь не в игноре. Включается/выключается нажатием на динамик.
[img]http://imgs.su/users/67540/1464548533.gif[/img] - uignore.gif. Пользователь находится в игноре. Вы не видите сообщений от него.

[img]http://imgs.su/users/67540/1464548620.png[/img]

327

Геннадий @mychatik

02.06.2016

- no_photo.jpg. Означает, что у пользователя нет фото, т.е. он его не загрузил.

Эта картинка находится в следующей папке дизайна - images.
Также, в этой папке находятся такие основные картинки:

- silence.gif. Появляется возле ника пользователя, когда ему дают молчанку.

- status_1.gif. Статус - Ушёл.

- status_2.gif. Статус - N/A.

- status_3.gif. Статус - Не беспокоить!.

- webcam.gif. Появляется, когда пользователь настроит камеру в профиле.

В папке zodiac находятся знаки Зодиака, которые появляются в личке пользователя.
Они реагируют на день рождения по дате, выставляемой в профиле.
Но, если установить День рождения: 0.0.0 , то в личке будет стоять картинка Козерога.

Сейчас уже существует дополнение, устраняющее эту проблему.

Сами картинки знаков Зодиака я выкладывать не буду из-за большого их количества.
Да и, при необходимости, наборы знаков Зодиака различного дизайна всегда можно найти в сети.
Обратите внимание, что картинки знаков Зодиака в чате имеют расширение .jpg.
Если вы будете загружать набор картинок, имеющих другое расширение - необходимо подкорректировать файл zodiac.php

327

Геннадий @mychatik

20.06.2016

В папке main находятся такие основные картинки:

- vip_litle.gif Появляется возле ника, когда пользователь становится VIP.

- vip_big.jpg Появляется у пользователя в личке.

Важно! По лицензионным условиям использования сборок VOC++ Business Special Edition, НЕОБХОДИМО перерисовать рисунки /chat/designes/rozmova4/main/vip_big.jpg и /chat/designes/rozmova4/main/vip_litle.gif.
Данные графические элементы охраняются авторским правом и НЕ принадлежат студии CREATIFF Design. Они приведены *исключительно ради примера* и подлежат замене в обязательном порядке.

- profile_02.jpg. Верхняя часть шапки в личке пользователя.

- profile_05.jpg. Нижняя часть шапки в личке пользователя.

327

Геннадий @mychatik

29.06.2016

С папками закончили, переходим к файлам.

Файлы menu_private.php и menu_public.php

Это два похожих файла.
menu_public.php отвечает за верхнюю полоску в чате:

menu_private.php отвечает за нижнюю полоску в чате:

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

327

Геннадий @mychatik

29.06.2016

Файл navibar.php отвечает за верхнюю часть, где находятся смайлы, кланы и т.д.:

Файл top.php отвечает за фрейм, где находится логотип чата (grunge_05.gif).

Файл remote_rbs.php отвечает за верхнюю часть дизайна справа от лого (grunge_05.gif).

Файл sender_visible.php отвечает за нижнюю часть дизайна.

327

Геннадий @mychatik

29.06.2016

Файл pictures.php отвечает за смайлики. Т.е. при нажатии на кнопку Смайлики, вы попадаете в pictures.php:

Не путать со смайлами в самом чате!

За вывод смайликов слева от списка пользователей отвечает файл smileys.php.

327

Геннадий @mychatik

29.06.2016

Файл user_info.php отвечает за Профиль пользователя:

327

Геннадий @mychatik

29.06.2016

Файл shop.php отвечает за магазин.
Т.е., при нажатии на кнопку Магазин, вы попадаете в shop.php:

327

Геннадий @mychatik

04.07.2016

Файл clan_view.php отвечает за вывод кланов:

327

Геннадий @mychatik

04.07.2016

Файл registration_form.php отвечает за регистрацию пользователя.

327

Геннадий @mychatik

04.07.2016

Файл logout.php отвечает за выход с чата.
Т.е. при нажатии на кнопку выход:

Вы попадаете в logout.php:

327

Геннадий @mychatik

04.07.2016

Файл fullinfo.php отвечает за личку пользователя.

Так же он разделяет окна - profile_content.php, profile_top.php и profile_photo.php.
Разделяются окна с помощью тега <frameset>.

Немного о теге <frameset>:

Синтаксис:

<frameset>

<frame>

</frameset>

Определяет структуру фреймов на веб-странице.
Фреймы разделяют окно браузера на отдельные области, расположенные вплотную друг к другу. В каждую из таких областей загружается самостоятельная веб-страница определяемая с помощью тега <frame>.
С помощью фреймов веб-страница делится на два или более документа, которые обычно содержат навигацию по сайту и его контент.
Механизм фреймов позволяет открывать документ в одном фрейме, по ссылке, нажатой в совершенно другом фрейме.
Тег <frameset> заменяет собой элемент <body> на веб-странице.
Допустимо использовать вложенную структуру элементов, это позволяет разбить один фрейм на две и более области.

Атрибуты:
border - Толщина границы между фреймами.
bordercolor - Цвет линии границы.
cols - Устанавливает ширину или пропорции фреймов в виде колонок.
framespacing - Аналог атрибута border, задает ширину границы.
rows - Задает размер или пропорции фреймов в виде строк.
align - Определяет как фрейм будет выравниваться по краю, а также способ обтекания его текстом.
frameborder - Устанавливает, отображать границу вокруг фрейма или нет.
height - Высота фрейма.
hspace - Горизонтальный отступ от фрейма до окружающего контента.
marginheight - Отступ сверху и снизу от содержания до границы фрейма.
marginwidth - Отступ слева и справа от содержания до границы фрейма.
name - Имя фрейма.
noresize - Определяет, можно изменять размер фрейма пользователю или нет.
scrolling - Способ отображения полосы прокрутки во фрейме.
src - Путь к файлу, содержимое которого будет загружаться во фрейм.
vspace - Вертикальный отступ от фрейма до окружающего контента.
width - Ширина фрейма.
Закрывающий тег:
</frameset>
- Обязателен.

327

Геннадий @mychatik

07.07.2016

Файл profile_top.php отвечает за верхнюю часть в личке пользователя.

327

Геннадий @mychatik

07.07.2016

Файл profile_photo.php отвечает за фотографию в личке пользователя.

327

Геннадий @mychatik

07.07.2016

Файл profile_content.php отвечает за информацию в личке пользователя справа.

327

Геннадий @mychatik

14.07.2016

Файл zodiac.php отвечает за вывод знаков Зодиака.

P.S. Штатный файл можно заменить на более компактный ZODIAC V2.0

327

Геннадий @mychatik

14.07.2016

Файл voc.php отвечает за всё, происходящие в чате. Но мы ниже рассмотрим только дизайн внутри чата.

327

Геннадий @mychatik

14.07.2016

Вопрос: Где поменять цвет этого фрейма?

Ответ: Открываем voc.php находим код:

write(\'</head><body bgcolor=\"#f1f1f1\" text=\"#000000\" LEFTMARGIN=0 TOPMARGIN=0 MARGINWIDTH=0 MARGINHEIGHT=0>\\n\');
где
bgcolor="#f1f1f1" - отвечает за цвет фона.
text="#000000" - отвечает за цвет текста.

327

Геннадий @mychatik

14.07.2016

Вопрос: Где поменять цвет ВСЕ, АДМИНЫ, ШАМАНЫ, МОЙ КЛАН, ДЕВУШКИ, ПАРНИ, ОНИ, в списке пользователей?

Ответ: Открываем voc.php находим код:

    write(\'<table width=\"100%\" border=\"0\" cellspacing=\"0\" cellpadding=\"0\">\\n\');

    write(\'<tr><td height=20 bgcolor=\"#7EC63E\"> <div align=\"center\"><b><a href=\"javascript:;\" onClick=\"parent.Whisper(\\\'<?php echo $sw_usr_all_link; ?>\\\');\"><font color=\"#FFFFFF\"><?php echo $w_usr_all; ?></a> (\');

где
bgcolor=\"#7EC63E\" - Отвечает за цвет полоски ВСЕ.
font color=\"#FFFFFF\" - Отвечает за цвет текста ВСЕ.

    if(arrAdminsSize || voc_powers == 1) {

       write(\'<tr><td bgcolor=\"#FB400D\" height=20><div align=\"center\"><b>\\n\');

       write(\'<a href=\"javascript:;\" onClick=\"parent.Whisper(\\\'<?php echo $sw_usr_adm_link;?>\\\');\"><font color=\"#FFFFFF\"><?php echo $w_usr_adm; ?></a> (\');

       write(arrAdminsSize);

       write(\')</font></b></div>\\n\');

       write(\'</td></tr>\\n\');

где
bgcolor=\"#FB400D\" - Отвечает за цвет полоски АДМИНЫ.
font color=\"#FFFFFF\" - Отвечает за цвет текста АДМИНЫ.

    write(\'<tr><td height=20 bgcolor=\"#FFB900\"> <div align=\"center\"><b><a href=\"javascript:;\" onClick=\"parent.Whisper(\\\'<?php echo $sw_usr_shaman_link; ?>\\\');\"><font color=\"#FFFFFF\"><?php echo $w_usr_shaman; ?></a>\');

где
bgcolor=\"#FFB900\" - Отвечает за цвет полоски ШАМАНЫ.
font color=\"#FFFFFF\" - Отвечает за цвет текста ШАМАНЫ.
P.S. Данная строка будет, если у вас в чате установлен мод "Шаманы отдельно".

    write(\'<tr><td height=20 bgcolor=\"#BCD560\" align=center valign=middle> \');

    if(arrClanSize > 0) {

       if(arrClan[0].ClanAvatar != \'\') write(\'<table align=center cellspacing=0 cellpadding=0><tr><td width=20 align=center valign=middle><img src = \"\'+ arrClan[0].ClanAvatar + \'\" border = 0></td><td>\');

    }

    write(\'<b><a href=\"javascript:;\" onClick=\"parent.Whisper(\\\'<?php echo $sw_usr_clan_link;?>\\\');\"><font color=\"#FFFFFF\"><?php echo $w_usr_clan; ?></a> (\');

где
bgcolor=\"#BCD560\" - Отвечает за цвет полоски МОЙ КЛАН.
font color=\"#FFFFFF\" - Отвечает за цвет текста МОЙ КЛАН.

    if(arrGirlsSize) {

       write(\'<tr><td bgcolor=\"#ff02bf\" height=20><div align=\"center\">\\n\');

       write(\'<b><a href=\"javascript:;\" onClick=\"parent.Whisper(\\\'<?php echo $sw_usr_girls_link;?>\\\');\"><font color=\"#FFFFFF\"><?php echo $w_usr_girls; ?></a> (\');

где
bgcolor=\"#ff02bf\" - Отвечает за цвет полоски ДЕВУШКИ.
font color=\"#FFFFFF\" - Отвечает за цвет текста ДЕВУШКИ.

    if(arrBoysSize) {

       write(\'<tr> <td height=20 bgcolor=\"#FD6801\"><div align=\"center\">\\n\');

       write(\'<b><a href=\"javascript:;\" onClick=\"parent.Whisper(\\\'<?php echo $sw_usr_boys_link;?>\\\');\"><font color=\"#FFFFFF\"><?php echo $w_usr_boys; ?></a> (\');

где
bgcolor=\"#FD6801\" - Отвечает за цвет полоски ПАРНИ.
font color=\"#FFFFFF\" - Отвечает за цвет текста ПАРНИ.

    if(arrHimSize) {

       write(\'<tr> <td bgcolor=\"#666666\" height=20><div align=\"center\">\\n\');

       write(\'<b><a href=\"javascript:;\" onClick=\"parent.Whisper(\\\'<?php echo $sw_usr_they_link;?>\\\');\"><font color=\"#FFFFFF\"><?php echo $w_usr_they; ?></a> (\');

где
bgcolor=\"#666666\" - Отвечает за цвет полоски ОНИ.
font color=\"#FFFFFF\" - Отвечает за цвет текста ОНИ.