Бесплатный форум: форум поддержки
Добро пожаловать на форум поддержки сервиса Forum2x2 !

Для полноценной работы с форумом,
пожалуйста, войдите на форум под своим логином (если вы уже зарегистрированы) или же зарегистрируйтесь.


С нашей помощью вы можете создать форум,
похожий на этот!
Мы в социальных сетях

Правила форума

для обязательного прочтения!


Внимание! Важная информация для РЕГИСТРАЦИИ на форуме:

Пожалуйста, не регистрируйтесь на этом форуме с электронными адресами mail.ru, bk.ru, inbox.ru, list.ru - вам может не прийти письмо со ссылкой активации!
Вы можете воспользоваться адресами типа yandex.ru, rambler.ru, gmail.com и т.д.
Интересные решения
Быстрый переход к сервисам: Savepic Видео фоторедактор Транслит

Чатик с аватарками. [Universal]

Предыдущая тема Следующая тема Перейти вниз

Чатик с аватарками. [Universal]

Сообщение автор Сказочник Зазеркалья в Пн 19 Май - 11:23

Всем приветик.  

В данном туториале я решил изложить информацию по установке на свой форум, чата с аватарками юзеров. Чат интересный и простенький, имеющий функцию аватарок юзеров и другие плюсы, но в каждой бочке мёда, бывает и ложка дёгтя. В чате иногда появляется реклама, которую конечно можно отключить путём нажатия на крестик рядом с ней. Ну, или можно отключить профессиональным путём за 100 рублей в месяц. Это уже ваш выбор, как быть с этим чатом, но я рекомендую просто закрывать её, кликая по крестику. Собственно не будем заморачиваться такими темами как реклама, приступим к созданию такого Чатика:










Этап первый - Создание чата.

Как обычно нам нужно потопать на официальный сайт нужного продукта:

http://chatfactory.ru

Зайдя на главную страницу, нам нужно зарегистрироваться, естественно если у нас ещё нет аккаунта на этом сайте. Пройдя небольшую и бесплатную регистрацию на сайте, вам нужно подтвердить свой аккаунт через почту, после чего можете войти на сайт под своим логином и паролем. Теперь после авторизации вам потребуется заполнить свой профиль: поставить авку, заполнить дату рождения и т.д:



Хотя собственно говоря можете это и не делать, но лучше всё же иметь заполненный и профессиональный профиль чтобы выделяться среди серой толпы. Заполнив профиль, можете переходить к созданию чата, для этого перейдите на главную страницу сервиса:



И там вы увидите кнопку "Создать чат", этак нажимаете на неё и вы оказываетесь на такой странице:



На этой странице введите имя чата, описание чата и пароль для входа, ага. Затем нажмите на кнопку "Создать чат" и вас перебросит на страницу "Паспорта чата". Теперь вам нужно настроить: №1 - Внешний вид чата, №2 - Общие настройки, №3 - Смайлики, и если у вас есть на счёту деньги, можете заодно отключить и назойливую рекламу (это лишь, если вы серьёзно заняты сайтом". И так ниже разберём основные настройки:


Exclamation №1 - Оформление чата.

Нажимаете на ссылку "Внешний вид чата" и попадаете на такую страницу:

Здесь можно закруглить углы чата (Рекомендуется), также можно изменить цвет текста, фоновое изображение, разделитель между сообщениями. Если фоновое изображение не используете, можете настроить цветовой фон, ну и прозрачность области сообщений, также можно изменить. Но самое главное вам, наверное, нужно будет сделать небольшой внутренний отступ чата от вверха, а с отключенным заголовком это будет сложно. Поэтому загружаем на место логотипа такую полоску с прозрачным фоном:

Код:
http://savepic.org/3465697.png

Примечание: вы можете загрузить и другой логотип (свой), также можете использовать и заголовок, я лишь привожу пример красиво оформленного  чата на мой вкус. И так после настройки должно получиться примерно так:



Если вас всё устраивает, переходите к следующему этапу.





Exclamation №2 - Общие настройки.

Раздел общие настройки, собственно говоря, отвечает за основные функции чата. Давайте рассмотрим, что здесь есть:



Вам нужно будет заполнить все поля (это просто мой совет), правила можете поставить свои, пароль для входа изменить, а дальше идёт настройка функций. Ниже выложен скриншот, на котором включены важные функции:





Собственно говоря, фильтр мата вам обязательно нужно включить, если вы не хотите нарушать соответствующую статью, так как рано или поздно кто то возмёт да и обматериться в вашем чате. Показывать сообщения о входе и выходе, думаю тоже лучше отключить, так как если юзеры будут выходить и заходить, то они будут сбивать переписку. Разрешить личные л/с, ну это уж на ваше усмотрение, но я думаю, что лучше включить. Закрыть гостевой вход, здесь тоже уже вам решать, но я советую лучше закрыть гостям вход, иначе Спам и "Мат" вам будет обеспечен, равнозначно также, если включить на форуме функцию "Пиар". Есть такие люди, которые из за зависти или прочих убеждений, могут всякие гадости написать и испортить тем самым вам настроение или репутацию форума, правда наказать. Ну и включить аватарки, наверное, будет крутым решением, потому что так вы значительно улучшите ваш чат. Ну, всё на этом заканчивается основной разбор настроек чата.





Exclamation№3 - Смайлики.

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





Поэтому можно перейти к предпоследнему шагу, а именно получение кода для вставки.








Этап второй - Получение кода для вставки.

Теперь нам требуется получить код для вставки, а то вы наверняка уже желаете установить себе подобный чатик. Ну что же не буду затягивать с инструкцией и постараюсь вкратце и понятно объяснить как получить код для вставки. Существует два вида кода для вставки, первый это код для вставки виджета на Htlm страницу или в виджет, но в виджете чат будет не удобным, поэтому лучше вариант с Htlm. Второй вариант это графическая закладка, которая будет располагаться, например слева или справа, а может и вверху, всё зависит в каком именно углу вы хотите видеть закладку, плюс можно настроить отступ закладки. Дополнительно можно сделать свою закладку, ил настроить цвет фона уже существующей. С настройкой думаю, разберётесь, а теперь покажу как получить код:

№1 -Код для вставки на Htlm страницу - Настраиваете ширину и высоту вашего чата, затем можете нажать на кнопку "Получить код", копируете код на блокнот и закрываете вкладку.





№2 - Код для вставки в виджеты/шаблоны - Настраиваете вашу визуальную закладку, после чего нажимает "получить код", готовый код копируете на блокнот и закрываете сайт.





Теперь когда вы имеете коды, можно перейти к последнему и завершающему шагу.  Arrow









Этап третий - Встройка кода в шаблоны/виджеты/Htlm страницу.

Теперь завершаем данный процесс, предварительно подумав куда мы хотим вставить чат. Вариантов всего 3, это Шаблоны, виджеты, Htlm - страница. Ниже выложена инструкция по каждому из вариантов:



Exclamation №1 - Виджеты(Закладка).

Панель Администратора - Модули - Портал и Виджеты - Виджеты форума.

Создаёте новый персональный виджет с такими параметрами:

Имя виджета : Любое, например "Чат".
Использовать стандартный шаблон : Нет!
Название виджета : Оставляем это поле пустым.


В содержимое ставим код для вставки (см. второй вариант Закладки), затем сохраняете и ставите виджет в левую или правую колонку. Проверяйте, у вас сбоку или в другом месте форума должна быть такая панелька:



При нажатии на которое, будет появляется окошко с чатом внутри.  Arrow





Exclamation№2 - Шаблоны.

На форумах с движками phpBB2 & punBB возможна встройка кода в шаблон, для этого в нужном шаблоне в начале ставим код для вставки (см. второй вариант Закладки). Например вы хотите чтобы Закладка была в шаблоне профиля, тогда топаем сюда:

Панель Администратора - Оформление - Шаблоны - Профиль - profile_view_body.

В начало шаблона profile_view_body ставим код для вставки, после чего сохраняем и опубликовываем. В профиле это будет выглядеть примерно так:









Exclamation №3 – Htlm страница.

Панель Администратора - Модули - HTML & JAVASCRIPT - Управление страницами HTML.

Создаём новую Htlm страницу с такими параметрами:


Название: Например "Беседка".
Вы хотите использовать верх и низ вашего форума?: Нет!
Использовать эту страницу в качестве Главной?: Нет!


В содержимое страницы, вставляем этот код:

Код:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="ru" xml:lang="ru">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
</head>
<br/><body><div class="regulations">


Вот сюда ставите код вашего чата!!!

<style>
body {
background: url(http://www.snapsnap.ru/i/ibackground.png); /*основной фон*/
background-attachment: fixed; /*Фиксация фона*/
}

.regulations{
background: url(http://i70.servimg.com/u/f70/17/66/77/30/66180312.gif); /*фон поля с содержимым*/
width:50%; /*ширина поля с содержимым*/
font-size:17px; /*размер шрифта*/
border:double 7px #FFFFFF; /*рамка*/
-moz-border-radius:10px;
-khtml-border-radius:10px;
-webkit-border-radius:10px;
border-radius:10px;
margin: 0 auto;
padding:0px 0px -150px 0px;
min-width:700px !important;
line-height:1.3em;
}
</style>
</body>
</html>


Теперь вам нужно вставить чат в страницу, но перед вставкой не забудьте оформить чат в код для перемещения:


Код:
<div style="position:fixed; left:550px; bottom: 20%;">

Сюда вставляем код для вставки чата!

</div>


Это позволит вам перемещать чат по странице, настраивая параметры. Также вы можете изменить фон странички, а также добавлять свои улучшения по вкусу и желанию.  Exclamation


Думаю на этом можно завершить туториал. По всем дополнительным вопросам можете обращаться непосредственно ко мне. Желаю удачи в продвижении и улучшении ваших форумов ребята.  friends

С уважением автор данного туториала Михаэль Картер aka Сказочник Зазеркалья.

Сказочник Зазеркалья
Дизайнер
Дизайнер

Мужчина

Сообщения : 3547
Возраст : 25
Место обитания : Морг.
Регистрация : 2012-11-16
Благодарности : 687

Без предупреждений

http://help.forum2x2.ru

Вернуться к началу Перейти вниз

Предыдущая тема Следующая тема Вернуться к началу


 
Права доступа к этому форуму:
Вы не можете отвечать на сообщения