€
$
₴
₽
EN
RU
Ribbon
Catalog
Files
Forums
Services
Page
Main
Radiotalk
Custom
VOC++ чаты (больше не поддерживаются)
3 •
Посмотреть все темы
Учебник по дизайну VOC++ BSE
1
2
327
Геннадий
@mychatik
27.05.2016
Автором этого учебника является [b]pasha[/b]. На данный момент, авторский сайт не работает.
Я буду выкладывать учебник с своими уточнениями и дополнениями.
[color=red][b]Тему НЕ ЗАСОРЯТЬ вопросами и комментариями!!! Для этого есть другие темы.[/b][/color]
Добро пожаловать в [b]VOC++ Учебник[/b]!
Главная задача проекта - это помощь начинающим (да и не только) администраторам чатов на движке [b]VOC++ BSE[/b].
Как известно, [b]Voodoo Chat[/b] и, соответственно, [b]VOC++[/b] имеют фреймовую структуру.
Вот стандартная компоновка графических элементов дизайна:
[img]http://imgs.su/users/67540/1464317986.png[/img]
Основные элементы дизайна находятся в папке [b]grunge[/b]. Рассмотрим их:
[img]http://imgs.su/users/67540/1464316579.gif[/img] - [b]up.gif[/b].
[img]http://imgs.su/users/67540/1464316517.gif[/img] - [b]down.gif[/b].
[img]http://imgs.su/users/67540/1464316625.gif[/img] - [b]er.gif[/b].
[img]http://imgs.su/users/67540/1464316669.gif[/img] - [b]filter_on.gif[/b].
[img]http://imgs.su/users/67540/1464316734.gif[/img] - [b]grunge_12.gif[/b].
[img]http://imgs.su/users/67540/1464316781.gif[/img] - [b]grunge_02.gif[/b].
[img]http://imgs.su/users/67540/1464316812.gif[/img] - [b]grunge_05.gif[/b].
[img]http://imgs.su/users/67540/1464316860.gif[/img] - [b]grunge_06.gif[/b].
[img]http://imgs.su/users/67540/1464316912.gif[/img] - [b]grunge_09.gif[/b].
[img]http://imgs.su/users/67540/1464316947.gif[/img] - [b]grunge_10.gif[/b].
[img]http://imgs.su/users/67540/1464316985.gif[/img] - [b]grunge_11.gif[/b].
[img]http://imgs.su/users/67540/1464317021.gif[/img] - [b]grunge_14.gif[/b].
[img]http://imgs.su/users/67540/1464317062.gif[/img] - [b]pause_on.gif[/b].
[b]gradient.gif[/b] - pasha не стал выкладывать, так как он очень большой. Этот файл также отвечает за фон страниц в чате (магазина, кланов, при выходе с чата, смайликов и пр.)
Теперь о том, как покрасить пробелы, которые указаны на рисунке.
Для этого вам нужно открыть в дизайне чата файлы [b]menu_public.php[/b] и [b]menu_private.php[/b] и найти в них код:
[code]<body bgcolor="#abd256" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">[/code]
где [b]bgcolor="#abd256"[/b] - это цвет тех самых пробелов.
Если вы хотите вставить картинку вместо цвета, то вам надо заменить [b]bgcolor="#abd256"[/b] на: [b]background="Ссылка вашего изображения"[/b]
Получится что-то типа такого:
[code]<body background="/designes/design_1/grunge/12345.gif" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">[/code]
[b]menu_public.php[/b] отвечатет за верхнюю часть, а [b]menu_private.php[/b] - за нижнюю.
327
Геннадий
@mychatik
29.05.2016
Элемент, отвечающий за фон в нижнем фрейме под приватом, находится в другой папке - [b]img[/b]
[img]http://imgs.su/users/67540/1464546347.jpg[/img] - [b]down_buttons_menu.jpg[/b]
Также, в этой папке расположены такие основные картинки:
[img]http://imgs.su/users/67540/1464547005.gif[/img] - [b]amul_red.gif[/b]. Красный амулет. Означает, что у пользователя 1 амулет.
[img]http://imgs.su/users/67540/1464547076.gif[/img] - [b]amul_gray.gif[/b]. Серый амулет. Означает, что у пользователя 3 амулета.
[img]http://imgs.su/users/67540/1464547134.gif[/img] - [b]amul_orange.gif[/b]. Золотой амулет. Означает, что у пользователя 9 амулетов.
[img]http://imgs.su/users/67540/1464548105.gif[/img] - [b]amul_curse.gif[/b]. Проклятие. Значительно замедляет набор поинтов. Имея 4 проклятия, пользователь автоматически получает бан.
В стандартном чате, количество амулетов ограничено числом 27. То есть пользователь может иметь не больше 3х золотых амулетов.
Но в настоящее время есть моды, которые позволяет увеличить количество амулетов у пользователя до 81, 243 и даже до 1092!
[img]http://imgs.su/users/67540/1464547624.jpg[/img] - [b]male.jpg[/b]. Принадлежность к полу [b]Парень[/b].
[img]http://imgs.su/users/67540/1464547571.jpg[/img] - [b]female.jpg[/b]. Принадлежность к полу [b]Девушка[/b].
Для категории "без пола" [b]ОНИ[/b], в стандартном дизайне картинка не предусмотрена. Вместо неё стоит заглушка - прозрачная картинка [b]gender_none.gif[/b].
При желании, можете подобрать для этой категории своё изображение размером 16х16 px.
[img]http://imgs.su/users/67540/1464548327.jpg[/img] - [b]have_photo.jpg[/b]. Означает, что у пользователя в профиле есть фото.
[img]http://imgs.su/users/67540/1464548378.gif[/img] - [b]rings.gif[/b]. Означает, что пользователь состоит в браке.
[img]http://imgs.su/users/67540/1464548447.gif[/img] - [b]utalk.gif[/b]. Пользователь не в игноре. Включается/выключается нажатием на динамик.
[img]http://imgs.su/users/67540/1464548533.gif[/img] - [b]uignore.gif[/b]. Пользователь находится в игноре. Вы не видите сообщений от него.
[img]http://imgs.su/users/67540/1464548620.png[/img]
327
Геннадий
@mychatik
02.06.2016
[img]http://imgs.su/users/67540/1464835232.jpg[/img] - [b]no_photo.jpg[/b]. Означает, что у пользователя нет фото, т.е. он его не загрузил.
Эта картинка находится в следующей папке дизайна - [b]images[/b].
Также, в этой папке находятся такие основные картинки:
[img]http://imgs.su/users/67540/1464835543.gif[/img] - [b]silence.gif[/b]. Появляется возле ника пользователя, когда ему дают молчанку.
[img]http://imgs.su/users/67540/1464835629.gif[/img] - [b]status_1.gif[/b]. Статус - [b]Ушёл[/b].
[img]http://imgs.su/users/67540/1464835677.gif[/img] - [b]status_2.gif[/b]. Статус - [b]N/A[/b].
[img]http://imgs.su/users/67540/1464835744.gif[/img] - [b]status_3.gif[/b]. Статус - [b]Не беспокоить![/b].
[img]http://imgs.su/users/67540/1464835796.gif[/img] - [b]webcam.gif[/b]. Появляется, когда пользователь настроит камеру в профиле.
[img]http://imgs.su/users/67540/1464835889.png[/img]
В папке [b]zodiac[/b] находятся знаки Зодиака, которые появляются в личке пользователя.
Они реагируют на день рождения по дате, выставляемой в профиле.
Но, если установить [b]День рождения: [color=red]0.0.0[/color][/b] , то в личке будет стоять картинка Козерога.
Сейчас уже [url=https://forum.vmeste.eu/viewtopic.php?pid=324923#p324923]существует дополнение[/url], устраняющее эту проблему.
[img]http://imgs.su/users/67540/1464836386.png[/img]
Сами картинки знаков Зодиака я выкладывать не буду из-за большого их количества.
Да и, при необходимости, наборы знаков Зодиака различного дизайна всегда можно найти в сети.
Обратите внимание, что картинки знаков Зодиака в чате имеют расширение [b].jpg[/b].
Если вы будете загружать набор картинок, имеющих другое расширение - необходимо подкорректировать файл [b]zodiac.php[/b]
327
Геннадий
@mychatik
20.06.2016
В папке [b]main[/b] находятся такие основные картинки:
[img]http://imgs.su/users/67540/1466435652.gif[/img] - [b]vip_litle.gif[/b] Появляется возле ника, когда пользователь становится [b]VIP[/b].
[img]http://imgs.su/users/67540/1466435404.png[/img]
[img]http://imgs.su/users/67540/1466435428.jpg[/img] - [b]vip_big.jpg[/b] Появляется у пользователя в личке.
[b]Важно![/b] По лицензионным условиям использования сборок [b]VOC++ Business Special Edition[/b], НЕОБХОДИМО перерисовать рисунки [b]/chat/designes/rozmova4/main/vip_big.jpg[/b] и [b]/chat/designes/rozmova4/main/vip_litle.gif[/b].
Данные графические элементы охраняются авторским правом и НЕ принадлежат студии [b]CREATIFF Design[/b]. Они приведены *исключительно ради примера* и подлежат замене в обязательном порядке.
[img]http://imgs.su/users/67540/1466435498.jpg[/img] - [b]profile_02.jpg[/b]. Верхняя часть шапки в личке пользователя.
[img]http://imgs.su/users/67540/1466435547.jpg[/img] - [b]profile_05.jpg[/b]. Нижняя часть шапки в личке пользователя.
[img]http://imgs.su/users/67540/1464836386.png[/img]
327
Геннадий
@mychatik
29.06.2016
С папками закончили, переходим к файлам.
Файлы [b]menu_private.php[/b] и [b]menu_public.php[/b]
Это два похожих файла.
[b]menu_public.php[/b] отвечает за верхнюю полоску в чате:
[img]http://imgs.su/users/67540/1467165407.png[/img]
[b]menu_private.php[/b] отвечает за нижнюю полоску в чате:
[img]http://imgs.su/users/67540/1467165448.png[/img]
На этих полосках, при необходимости, вы можете разместить дополнительные кнопки, ссылки, бегущую строку с информацией и т.д...
327
Геннадий
@mychatik
29.06.2016
Файл [b]navibar.php[/b] отвечает за верхнюю часть, где находятся смайлы, кланы и т.д.:
[img]http://imgs.su/users/67540/1467166863.png[/img]
[img]http://imgs.su/users/67540/1467166882.png[/img]
Файл [b]top.php[/b] отвечает за фрейм, где находится логотип чата ([b]grunge_05.gif[/b]).
[img]http://imgs.su/users/67540/1467166318.png[/img]
Файл [b]remote_rbs.php[/b] отвечает за верхнюю часть дизайна справа от лого ([b]grunge_05.gif[/b]).
[img]http://imgs.su/users/67540/1467166154.png[/img]
Файл [b]sender_visible.php[/b] отвечает за нижнюю часть дизайна.
[img]http://imgs.su/users/67540/1467166212.png[/img]
327
Геннадий
@mychatik
29.06.2016
Файл [b]pictures.php[/b] отвечает за смайлики. Т.е. при нажатии на кнопку [b]Смайлики[/b], вы попадаете в [b]pictures.php[/b]:
[img]http://imgs.su/users/67540/1466816679.png[/img]
[u]Не путать со смайлами в самом чате![/u]
За вывод смайликов слева от списка пользователей отвечает файл [b]smileys.php[/b].
[img]http://imgs.su/users/67540/1467166010.png[/img]
327
Геннадий
@mychatik
29.06.2016
Файл [b]user_info.php[/b] отвечает за Профиль пользователя:
[img]http://imgs.su/users/67540/1467166598.png[/img]
327
Геннадий
@mychatik
29.06.2016
Файл [b]shop.php [/b]отвечает за магазин.
Т.е., при нажатии на кнопку [b]Магазин[/b], вы попадаете в [b]shop.php[/b]:
[img]http://imgs.su/users/67540/1467596644.png[/img]
327
Геннадий
@mychatik
04.07.2016
Файл [b]clan_view.php[/b] отвечает за вывод кланов:
[img]http://imgs.su/users/67540/1466816543.png[/img]
327
Геннадий
@mychatik
04.07.2016
Файл [b]registration_form.php[/b] отвечает за регистрацию пользователя.
[img]http://imgs.su/users/67540/1467596517.png[/img]
327
Геннадий
@mychatik
04.07.2016
Файл [b]logout.php[/b] отвечает за выход с чата.
Т.е. при нажатии на кнопку выход:
[img]http://imgs.su/users/67540/1467599148.png[/img]
Вы попадаете в [b]logout.php[/b]:
[img]http://imgs.su/users/67540/1467599190.png[/img]
327
Геннадий
@mychatik
04.07.2016
Файл [b]fullinfo.php[/b] отвечает за личку пользователя.
Так же он разделяет окна - [b]profile_content.php[/b], [b]profile_top.php[/b] и [b]profile_photo.php[/b].
Разделяются окна с помощью тега [b]<frameset>[/b].
[img]http://imgs.su/users/67540/1467600032.png[/img]
Немного о теге [b]<frameset>[/b]:
Синтаксис:
[code]<frameset>
<frame>
</frameset>[/code]
Определяет структуру фреймов на веб-странице.
Фреймы разделяют окно браузера на отдельные области, расположенные вплотную друг к другу. В каждую из таких областей загружается самостоятельная веб-страница определяемая с помощью тега [b]<frame>[/b].
С помощью фреймов веб-страница делится на два или более документа, которые обычно содержат навигацию по сайту и его контент.
Механизм фреймов позволяет открывать документ в одном фрейме, по ссылке, нажатой в совершенно другом фрейме.
Тег [b]<frameset>[/b] заменяет собой элемент [b]<body>[/b] на веб-странице.
Допустимо использовать вложенную структуру элементов, это позволяет разбить один фрейм на две и более области.
Атрибуты:
[b]border[/b] - Толщина границы между фреймами.
[b]bordercolor[/b] - Цвет линии границы.
[b]cols[/b] - Устанавливает ширину или пропорции фреймов в виде колонок.
[b]framespacing[/b] - Аналог атрибута border, задает ширину границы.
[b]rows[/b] - Задает размер или пропорции фреймов в виде строк.
[b]align[/b] - Определяет как фрейм будет выравниваться по краю, а также способ обтекания его текстом.
[b]frameborder[/b] - Устанавливает, отображать границу вокруг фрейма или нет.
[b]height[/b] - Высота фрейма.
[b]hspace[/b] - Горизонтальный отступ от фрейма до окружающего контента.
[b]marginheight[/b] - Отступ сверху и снизу от содержания до границы фрейма.
[b]marginwidth[/b] - Отступ слева и справа от содержания до границы фрейма.
[b]name[/b] - Имя фрейма.
[b]noresize[/b] - Определяет, можно изменять размер фрейма пользователю или нет.
[b]scrolling[/b] - Способ отображения полосы прокрутки во фрейме.
[b]src[/b] - Путь к файлу, содержимое которого будет загружаться во фрейм.
[b]vspace[/b] - Вертикальный отступ от фрейма до окружающего контента.
[b]width[/b] - Ширина фрейма.
Закрывающий тег:
[code]</frameset>[/code]
- Обязателен.
327
Геннадий
@mychatik
07.07.2016
Файл [b]profile_top.php[/b] отвечает за верхнюю часть в личке пользователя.
[img]http://imgs.su/users/67540/1467905236.png[/img]
327
Геннадий
@mychatik
07.07.2016
Файл [b]profile_photo.php[/b] отвечает за фотографию в личке пользователя.
[img]http://imgs.su/users/67540/1467905319.png[/img]
327
Геннадий
@mychatik
07.07.2016
Файл [b]profile_content.php[/b] отвечает за информацию в личке пользователя справа.
[img]http://imgs.su/users/67540/1467905377.png[/img]
327
Геннадий
@mychatik
14.07.2016
Файл [b]zodiac.php[/b] отвечает за вывод знаков Зодиака.
[img]http://imgs.su/users/67540/1468457869.png[/img]
[b]P.S.[/b] Штатный файл можно заменить на более компактный [url=https://forum.vmeste.eu/viewtopic.php?pid=328714#p328714]ZODIAC V2.0[/url]
327
Геннадий
@mychatik
14.07.2016
Файл [b]voc.php[/b] отвечает за всё, происходящие в чате. Но мы ниже рассмотрим только дизайн внутри чата.
[img]http://imgs.su/users/67540/1468458325.png[/img]
327
Геннадий
@mychatik
14.07.2016
[b]Вопрос:[/b] Где поменять цвет этого фрейма?
[img]http://imgs.su/users/67540/1468458408.png[/img]
[b]Ответ:[/b] Открываем [b]voc.php[/b] находим код:
[code]write(\'</head><body bgcolor=\"#f1f1f1\" text=\"#000000\" LEFTMARGIN=0 TOPMARGIN=0 MARGINWIDTH=0 MARGINHEIGHT=0>\\n\');[/code]
где
[b]bgcolor="#f1f1f1"[/b] - отвечает за цвет фона.
[b]text="#000000"[/b] - отвечает за цвет текста.
327
Геннадий
@mychatik
14.07.2016
[b]Вопрос:[/b] Где поменять цвет [b]ВСЕ[/b], [b]АДМИНЫ[/b], [b]ШАМАНЫ[/b], [b]МОЙ КЛАН[/b], [b]ДЕВУШКИ[/b], [b]ПАРНИ[/b], [b]ОНИ[/b], в списке пользователей?
[img]http://imgs.su/users/67540/1468458767.png[/img]
[b]Ответ:[/b] Открываем [b]voc.php[/b] находим код:
[code] 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> (\');[/code]
где
[b]bgcolor=\"#7EC63E\"[/b] - Отвечает за цвет полоски [b]ВСЕ[/b].
[b]font color=\"#FFFFFF\"[/b] - Отвечает за цвет текста [b]ВСЕ[/b].
[code] 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\');[/code]
где
[b]bgcolor=\"#FB400D\"[/b] - Отвечает за цвет полоски [b]АДМИНЫ[/b].
[b]font color=\"#FFFFFF\"[/b] - Отвечает за цвет текста [b]АДМИНЫ[/b].
[code] 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>\');[/code]
где
[b]bgcolor=\"#FFB900\"[/b] - Отвечает за цвет полоски [b]ШАМАНЫ[/b].
[b]font color=\"#FFFFFF\"[/b] - Отвечает за цвет текста [b]ШАМАНЫ[/b].
[b]P.S.[/b] Данная строка будет, если у вас в чате установлен мод "Шаманы отдельно".
[code] 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> (\');[/code]
где
[b]bgcolor=\"#BCD560\"[/b] - Отвечает за цвет полоски [b]МОЙ КЛАН[/b].
[b]font color=\"#FFFFFF\"[/b] - Отвечает за цвет текста [b]МОЙ КЛАН[/b].
[code] 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> (\');[/code]
где
[b]bgcolor=\"#ff02bf\"[/b] - Отвечает за цвет полоски [b]ДЕВУШКИ[/b].
[b]font color=\"#FFFFFF\"[/b] - Отвечает за цвет текста [b]ДЕВУШКИ[/b].
[code] 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> (\');[/code]
где
[b]bgcolor=\"#FD6801\"[/b] - Отвечает за цвет полоски [b]ПАРНИ[/b].
[b]font color=\"#FFFFFF\"[/b] - Отвечает за цвет текста [b]ПАРНИ[/b].
[code] 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> (\');[/code]
где
[b]bgcolor=\"#666666\"[/b] - Отвечает за цвет полоски [b]ОНИ[/b].
[b]font color=\"#FFFFFF\"[/b] - Отвечает за цвет текста [b]ОНИ[/b].
3 •