Faq по дизайну

Статус
В этой теме нельзя размещать новые ответы.

spy girl

Помощник Админа
Регистрация
04.09.14
Сообщения
507
Реакции
275
Баллы
63
Возраст
40
Данное пособие очень удобная, доступная и толковая подсказка для админов чатов, которые решили попробовать сделать внутренний дизайн чата своими руками. Делать его начал человек, известный под ником klerik за что ему большое спасибо! Далее будем дополнять сами.

Меню:
  1. Главные елементы дизайна.
  2. Дополнительные елементы дизайна.
  3. Изменяем цвет текста в нижней панели.
  4. Изменяем и удаляем фреймы top и remote_rbs.
  5. Фоновая картинка в общаке, правый нижний угол.
  6. Меняем цвет кнопок: Правила, Магазин, Клан...
  7. Меняем цвет верхней части лички.
  8. Как изменить страницу выхода.
  9. Как изменить высоту нижней панели.
  10. Как сделать кроссбраузерность дизайна.
  11. Как расширить фрейм смайлы и список пользователи.
  12. Как убрать подчеркивание в списке пользователей.
  13. Запоминание ника в форме входа.
  14. Корректируем нижнюю панель под все браузеры.
Дальше пошли наши и других людей дополнения, найденные самостоятельно либо же в необъятных просторах интернета
  1. Меняем цвет списка выбора комнаты и смены статуса
  2. Где меняются цвета в списке пользователей Все, Админы, Шаманы, Девушки, Парни, Они?
  3. Как сменить белый фон в списке пользователей?
  4. Изменить фон объявлений
  5. Изменить фон ОТПРАВЛЯЕМЫХ сообщений в общак
  6. Изменить фон ПОЛУЧАЕМЫХ сообщений в общаке
  7. Изменить фон и цвет текста выпадающего меню количества баллов голосования за фото
  8. Как изменить фон профиля
 
Последнее редактирование модератором:

spy girl

Помощник Админа
Регистрация
04.09.14
Сообщения
507
Реакции
275
Баллы
63
Возраст
40
1) Главные элементы дизайна.
Дизайн чата VOC++ состоит из множества картинок, различного формата. Сейчас я вам расскажу немного о главных графических элементах дизайна.
Рассказывать буду по Стандартному дизайну (скрин соответственно сделан по нему)
a23266033ca8.jpg


1. Картинка:
a8ea09ee412f.gif
Размеры (143х24) Путь (Ваш дизайн/grunge/grunge_09.gif)
2. Картинка (здесь 2 картинки при включении и выключении они изменяются):
1 картинка
filter_on.gif
Размеры (22х24) Путь (Ваш дизайн/grunge/filter_on.gif)
2 картинка
grunge_12.gif
Размеры (22х24) Путь (Ваш дизайн/grunge/grunge_12.gif)
3. Картинка (здесь 2 картинки при включении и выключении они изменяются):
1 картинка
231003607603.jpg.gif
Размеры (20х24) Путь (Ваш дизайн/grunge/grunge_11.gif)
2 картинка
221457698618.jpg.gif
Размеры (20х24) Путь (Ваш дизайн/grunge/pause_on.gif)
4. Картинка:
869802494267.jpg.gif
Размеры (23х24) Путь (Ваш дизайн/grunge/grunge_10.gif)
5. Картинка:
2ec57c61e04d.gif
Размеры (444х72) Путь (Ваш дизайн/grunge/grunge_05.gif)
6. Картинка:
618859aa86dd.gif

Размеры (655х20) Путь (Ваш дизайн/grunge/grunge_02.gif)
7. Картинка:
7cd04cb6e408.gif
Размеры (11х72) Путь (Ваш дизайн/grunge/grunge_06.gif)
8. Картинка:
104954466834.jpg.gif
Размеры (224х24) Путь (Ваш дизайн/grunge/grunge_14.gif)
9. Размеры (2х2000) Путь (Ваш дизайн/grunge/gradient.gif)
10. Картинка:
467294734445.jpg.gif
Размеры (24х24) Путь (Ваш дизайн/grunge/down.gif)
11. Картинка:
167142803792.jpg.gif
Размеры (24х24) Путь (Ваш дизайн/grunge/up.gif)
12. Картинка:
780961533354.jpg
Размеры (4х200) Путь (Ваш дизайн/img/down_buttons_menu.jpg)
 
Последнее редактирование модератором:

spy girl

Помощник Админа
Регистрация
04.09.14
Сообщения
507
Реакции
275
Баллы
63
Возраст
40
2)Дополнительные елементы дизайна.
Расказывать буду по Стандартному дизайну (скрин соответственно зделан по нему)

930502881979.jpg

1.2 Чтобы изменить цвет в этих местах необходимо в дизайне найти и открыть такие файлы: menu_private.php и menu_public.php и далее редактируем их:
В файлах находим такие строки:

HTML:
<body bgcolor="#abd256" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
abd256 - цвет вашей полосы (на данный момен как на скрине зеленый).
Если вы хотите сделать вместо цвета картинку, необходимо заменить код который выше на этот:

HTML:
<body height="24" background="<?=$current_design?>grunge/lin.gif"leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
и загрузить картинку в папку (Ваш дизайн/grunge) с названием lin.gif. Размеры картинки (ширина не имеет значения, а высота 24 px)
2.2 Чтобы изменить цвет полос в списке пользвателей, а именно Все, Клан, Девушка, Парни, Админы, Шаманы, Они необходимо в дизайне найти и открывать файл voc.php и далее редактируем его:
Находим такие строки для:

- Строка Все. Цвет строки: 7EC63E - меняйте на свое
Код:
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> (');
- Строка Админы. Цвет строки: FB400D - меняйте на свое
HTML:
 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> (\');
- Строка Шаманы. Цвет строки: FFB900 - меняйте на свое
HTML:
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>');
- Строка Кланы. Цвет строки: BCD560 - меняйте на свое
HTML:
write(\'<tr><td height=20 bgcolor=\"#BCD560\" align=center valign=middle> \'); 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> (\');
- Строка Девушки. Цвет строки: ff02bf - меняйте на свое
HTML:
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> (\');
- Строка Парни. Цвет строки: FD6801 - меняйте на свое
HTML:
 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> (\');
- Строка Они. Цвет строки: 666666 - меняйте на свое
HTML:
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> (\');
3.2 Картинка (здесь 2 картинки при включении и выключении они изменяются):
1 картинка
602931804175.jpg.gif
Размеры (12х13) Путь (Ваш дизайн/img/utalk.gif)

2 картинка
447481735544.jpg.gif
Размеры (12х13) Путь (Ваш дизайн/img/uignore.gif)
4.2 Картинка (здесь 2 картинки меняются в зависимости от пола):
1 картинка
827377673574.jpg
Размеры (16х16) Путь (Ваш дизайн/img/female.ipg)
2 картинка
342936071580.jpg
Размеры (16х16) Путь (Ваш дизайн/img/male.jpg)
5.2 Картинка (здесь 2 картинки изменяются при наявности фото):
1 картинка
496671341918.jpg
Размеры (16х16) Путь (Ваш дизайн/img/have_photo.jpg)
2 картинка
166328864939.jpg
Размеры (16х16) Путь (Ваш дизайн/images/no_photo.gif)
6.2 Картинка:
742536789884.jpg.gif
Размеры (18х18) Путь (Ваш дизайн/img/amul_curse.gif)
Так же есть амулеты, картинки которых зависят от количества амулетов:
Картинка:
253732424596.jpg.gif
Размеры (18х18) Путь (Ваш дизайн/img/amul_red.gif)
Картинка:
295529873598.jpg.gif
Размеры (18х18) Путь (Ваш дизайн/img/amul_blue.gif)
Картинка:
amul_orange.gif
Размеры (18х18) Путь (Ваш дизайн/img/amul_orange.gif)
7.2 При необходимости изменить цвет данного эелемента дизайна, необходимой в дизайне найти и открыть файл voc.php и далее редактируем:
Находим такие строки:
HTML:
 write('</head><body bgcolor="#f1f1f1" text="#000000" LEFTMARGIN=0 TOPMARGIN=0 MARGINWIDTH=0 MARGINHEIGHT=0>\n');
- f1f1f1 это цвет вашего элемента.
При необходимости вставить Графический элемент заменяем код который написан выше на этот:
HTML:
 write('</head><body background="<?=$current_design?>grunge/down_buttons_menu.jpg" text="#000000" LEFTMARGIN=0 TOPMARGIN=0 MARGINWIDTH=0 MARGINHEIGHT=0>\n');
8.2 Картинка:
806105196784.jpg.gif
Размеры (16х16) Путь (Ваш дизайн/grunge/er.gif)
9.2 Для изменения цвета кнопок, необходимо в дизайне открыть style.css и редактируем его
Находим такие строки:
HTML:
.input {  font-family: Verdana, Arial, Helvetica, sans-serif, Tahoma; font-size: 10pt; color: #000000; height: auto; width: auto; border: #98C00B; border-style: solid; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px}
.input_button {  font-family: Verdana, Arial, Helvetica, sans-serif, Tahoma; font-size: 10px; background-color: #7E9B16; color: #FFFFFF; height: auto; width: auto; border: #98C00B; border-style: solid; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px}
7E9B16 - цвет кнопок.
При необходимости вставить графический элемент замените код который выше на этот:
HTML:
.input { font-family: Verdana, Arial, Helvetica, sans-serif, Tahoma; font-size: 10pt; color: #000000; height: auto; width: auto; border: #98C00B; border-style: solid; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px}
.input_button {  font-family: Verdana, Arial, Helvetica, sans-serif, Tahoma; font-size: 10px; background-color: #ff0000; background-image: url(сылку на вашу картинку); color: #FFFFFF; height: auto; width: auto; border: #000000; border-style: solid; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px}
 
Последнее редактирование модератором:

spy girl

Помощник Админа
Регистрация
04.09.14
Сообщения
507
Реакции
275
Баллы
63
Возраст
40
Изменяем цвет текста в нижней панели. ( "сообщение:", " для кого", "Очищать после отправки", "I", "U", " транслит", "стиль" )
Два способа:
Первый
(будет такой цвет только в одном дизайне в котором меняем) открываем в дизайне файл sender_visible.php находим такое:
HTML:
<font size=1><b><?=ucfirst($w_roz_msg)?>:</b></font>
заменяем на такое
HTML:
<font color="#ffffff" size="1"><b><?=ucfirst($w_roz_msg)?>:</b></font>
потом находим такое:
HTML:
<font size=1><b><?=ucfirst($w_roz_who)?>:</b></font>
заменяем на это:
HTML:
<font color="#ffffff" size="1"><b><?=ucfirst($w_roz_who)?>:</b></font>
Делаем аналогичное в этих строках, а именно:
HTML:
<small><?php echo $w_clear_nick_after; ?>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</small>
меняем на
HTML:
<small><font color="#ffffff" size="1"><?php echo $w_clear_nick_after; ?>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</font></small>
Код
HTML:
<small><I>I</I></small>
меняем на:
HTML:
<small><font color="#ffffff" size="1"><I>I</I></font></small>
Код
HTML:
<small><small><u>U</u></small>
меняем на:
HTML:
<small><font color="#ffffff" size="1"><u>U</u></font></small>
Код:
HTML:
<small><?php echo $w_roz_translit; ?></small>
меняем на:
HTML:
<small><font color="#ffffff" size="1"><?php echo $w_roz_translit; ?></font></small>
Код:
HTML:
<small><?php echo $w_roz_style; ?></small>
меняем на:
HTML:
<font color="#ffffff" size="1"><?php echo $w_roz_style; ?></font></small>

Второй (будет во всех дизаходним цветом) открываем файл /languages/ru.php и находим такие строки:
HTML:
$w_roz_who                              = "для кого";
заменяем на
HTML:
$w_roz_who                              = "<font color='#ffffff'>для кого</font>";
Потом найдем:

HTML:
$w_roz_msg                              = "сообщение";
заменяем на
HTML:
$w_roz_msg                              = "<font color='#ffffff'>сообщение</font>";

#ffffff - во всех случаях это цвет, на который вы меняете
 
Последнее редактирование модератором:

spy girl

Помощник Админа
Регистрация
04.09.14
Сообщения
507
Реакции
275
Баллы
63
Возраст
40
Вернемся к фреймам. Сейчас расскажу как изменить размер и убрать фрейм, который выделен на картинке:
00b590b98ab9.jpg

Итак для изменения высоты, открываем voc.php с дизайна и ищем:
HTML:
<frameset rows="0,20,72,*,0,0" framespacing="1" scrolling="no" frameborder="YES" bordercolor="#3D4976" onLoad="giveMeChat();">
72 - это и есть ваша высота.
Теперь как убрать полностью этот фрейм. Открываем тот же voc.php с дизайна и ищим и удаляем такие строки (в стандартном файле это 797-798 строки):
HTML:
window.frames['top_top'].document.location.href='<?php echo $current_design;?>top.php';
    window.frames['top_banner'].document.location.href='<?=$current_design?>remote_rbs.php';
Дальше ищем и удаляем такие строки:
HTML:
<frameset cols="444,*" framespacing="0" scrolling="no" frameborder="no" bordercolor="#3D4976" >
  <frame name="top_top" src="<?php echo $current_design; ?>blank.html" marginwidth="0" marginheight="0" scrolling="no" frameborder="0">
  <frame name="top_banner" src="<?php echo $current_design; ?>blank.html" marginwidth="0" marginheight="0" scrolling="no" frameborder="0">
</frameset>
Потом, находим строку:
HTML:
<frameset rows="0,20,72,*,0,0" framespacing="1" scrolling="no" frameborder="YES" bordercolor="#3D4976" onLoad="giveMeChat();">
И заменяем ее на эту:
HTML:
<frameset rows="0,20,*,0,0" framespacing="1" scrolling="no" frameborder="YES" bordercolor="#3D4976" onLoad="giveMeChat();">
ВАЖНО!!! Если убираете данный фрейм, у вас могут будут проблемы с отправкой сообщений. Поэтому если не очень дружите с PHP и HTML, то лучше не рискуйте))))))
 
Последнее редактирование модератором:

spy girl

Помощник Админа
Регистрация
04.09.14
Сообщения
507
Реакции
275
Баллы
63
Возраст
40
Делаем фоновую картинку общака, прижимая к правому нижнему углу.

В стандартном voc.php с дизайна находим такую строку:
HTML:
var hdrLine6 = '<script language="javascript">\n var pause = 0;\n function up()\n {\nif (pause == 0)\n { \nscrollTo(0,10000000);\n} \n}\n </'+'script'+'>\n</head><body bgcolor="#fafafa" marginwidth="2" marginheight="2" topmargin="2" leftmargin="2" >\n';
И заменим на эту:
HTML:
var hdrLine6 = '<script language="javascript">\n var pause = 0;\n function up()\n {\nif (pause == 0)\n { \nscrollTo(0,10000000);\n} \n}\n </'+'script'+'>\n</head><body bgcolor="#FFFFFF" marginwidth="2" marginheight="2" topmargin="2" leftmargin="2" ><style type=text/css> body {background-image : url(http://путь); background-attachment :fixed; background-repeat: no-repeat; background-position: right bottom; }</style>\n';

Незабывайте изменить путь к изображению!
 

spy girl

Помощник Админа
Регистрация
04.09.14
Сообщения
507
Реакции
275
Баллы
63
Возраст
40
Как сменить Цвет кнопок Правила, Магазин, кланы, Мы, админка, Выход, офлайн ПМ?

Ответ: в файле navibar.php
HTML:
<td width="10%"><b><a href="javascript:;" onclick="javascript:eek:pen_win('rules.php', 'rules');"><font color=ТУТ ПИШЕМ ЦВЕТ В RGB Или по английски название цвета>Правила</font></a></b></td>
<td width="10%"><b><a href="javascript:;" onclick="javascript:eek:pen_win('shop.php?session=<?php echo $session;?>', 'shop');"><font color=ТУТ ПИШЕМ ЦВЕТ В RGB Или по английски название цвета ><?php echo $shop;?></font></a></b></td>
<td width="10%"><b><a href="javascript:;" onclick="javascript:eek:pen_win('board_list.php?session=<?php echo $session;?>', 'help');"><font color= ТУТ ПИШЕМ ЦВЕТ В RGB Или по английски название цвета><?php echo $w_roz_offline_pm; ?></font></a></b></td>
<td width="10%"><b><a href="javascript:;" onclick="javascript:eek:pen_win('users.php?session=<?php echo $session;?>', 'usersinfo');"><font color=ТУТ ПИШЕМ ЦВЕТ В RGB Или по английски название цвета><?php echo $w_info_about;?></font></a></b></td>
<td width="10%"><b><a href="javascript:;" onclick="javascript:eek:pen_win('pictures.php?session=<?php echo $session;?>', 'pictures');"><font color=ТУТ ПИШЕМ ЦВЕТ В RGB Или по английски название цвета><?php echo $w_pictures;?></font></a></b></td>
<td width="10%"><b><a href="javascript:;" onclick="javascript:eek:pen_win('clan_view.php?session=<?php echo $session;?>', 'clans');"><font color=ТУТ ПИШЕМ ЦВЕТ В RGB Или по английски название цвета><?php echo $w_roz_clans;?></font></a></b></td>
<?php if (count($room_ids)){?><td width="10%"><b><a href="rooms.php?session=<?php echo $session;?>" target="voc_who_visible"><font color=ТУТ ПИШЕМ ЦВЕТ В RGB Или по английски название цвета><?php echo $w_who_in_rooms; ?></font></a></b></td><?php }?>
<?php if (!$is_regist_complete) {?>
<td width="10%"><b><a href="javascript:;" onclick="javascript:eek:pen_win('registration_form.php?session=<?php echo $session;?>', 'registration');"><font color=ТУТ ПИШЕМ ЦВЕТ В RGB Или по английски название цвета | ВНИМАНИЕ ЭТО КНОПКА РЕГИСТРАЦИЯ ><?php echo $w_registration; ?></font></a></b></td>
<?php }else{?>
<td width="10%"><b><a href="javascript:;" onclick="javascript:eek:pen_win('user_info.php?session=<?php echo $session;?>', 'perosnalinfo');"><font color=ТУТ ПИШЕМ ЦВЕТ В RGB Или по английски название цвета><?php echo $w_about_me;?></font></a></b></td>
<?php if ($current_user->user_class=="admin") {?>
<td width="10%"><b><a href="javascript:;" onclick="javascript:eek:pen_win('admin.php?session=<?php echo $session;?>', 'gun');"><font color=ТУТ ПИШЕМ ЦВЕТ В RGB Или по английски название цвета><?php echo $w_gun;?></font></a></b></td>
<?php }
if ($current_user->custom_class & CST_PRIEST) {?>
<td width="10%"><b><a href="javascript:;" onclick="javascript:eek:pen_win('admin_work.php?op=marry&session=<?php echo $session;?>', 'gun');"><font color=ТУТ ПИШЕМ ЦВЕТ В RGB Или по английски название цвета ><?php echo $w_roz_marr; ?></font></a></b></td>
<?php }
if ($current_user->clan_class > 0 and $current_user->clan_id > 0) {?>
<td width="10%"><b><a href="javascript:;" onclick="javascript:eek:pen_win('clan.php?session=<?php echo $session;?>', 'clan');"><font color=ТУТ ПИШЕМ ЦВЕТ В RGB Или по английски название цвета><?php echo $w_roz_my_clan; ?></font></a></b></td>
<?php }
}?>
<td width="10%"><b><a href="logout.php?session=<?php echo $session;?>" target="_parent"><font color=ТУТ ПИШЕМ ЦВЕТ В RGB Или по английски название цвета><?php echo ucfirst($w_roz_quit); ?></font></a></b></td>
</tr>
 
Последнее редактирование модератором:
Статус
В этой теме нельзя размещать новые ответы.
Сверху Снизу