chatpost
Топики в виде Мессенджера или Чата на форумах MyBB.ru
Данная фича работает на базе возможностей создания Спец-постов для форумов MyBB.ru без использования html-тегов.
Пользователи не должны использовать никакие шаблоны или работать с HTML - посты сами "превращаются" в чат за счет заранее созданных стилей и скриптов.
В данной версии:
посты пользователей автоматически преобразуются в ответы в чат
профиль автора скрыт, в посте отображается аватар профиля пользователя, отправившего сообщения
сообщения топикстартера автоматически выделяются как сообщения отправителя, который начал переписку в "мессенджере", а ответы в тему как ответы в мессенджере
дата отправки сообщения автоматически встает под постом в мессенджере
форма ответа перенесена в виде строчки ответа в чат, оставлены кнопка смайликов, а остальные скрыты
перед началом чата закреплен блок с вот этим описанием как демонстрация возможности вставлять любые инструкции для пользователей или ролевые эпики, картинки и предыстории
Возможности:
можно оставить стандартную форму ответа, что позволит вам использовать маски профиля и любой другой функционал при создании постов в стиле чата
можно отображать не аватарку из профиля, а специально выбранную пользователем картинку
можно вставлять не реальную дату сообщения, а "ролевую", выбранную пользователем
можно добавить очень простой и удобный инструментарий создания чатов, который позволит пользователям легко оформлять ролевые переписки в виде мессенджера
можно воплотить почти любые заморочки, связанные с дизайном и интерфейсом
Данная версия НЕ оптимизирована под мобильный дизайн нашего форума, но это возможно сделать
Чат ForumD.ru
Тестим сообщения в стиле чата
[html]<style>
/* Лайки */
.chattopic .post-author .pa-respect {
position: absolute;
z-index: 200;
top: -12px;
left: 40px;
font-size: 0;
}
.chattopic .post-author.topic-starter .pa-respect {right: 40px;left: auto;}
.chattopic .post-author .pa-respect a {font-size: 18px;}
.chattopic .post-vote, .chattopic .post-rating {display: none !important;}
.chat-rating {padding: 0 5px;}
.chat-date .chat-rating {color: #e63737;}
.chat-rating:hover {color: #e63737;}
/* Посты топикстартера */
.chat-epic {padding: 10px 0;}
.chattopic .chat-starter .chat-date,
.chattopic .topic-starter .pa-avatar {left: auto; right: 0;}
.chattopic .chat-starter .post-content {left: auto; right: 50px;
background: #dceef7;
border: 1px solid #7bc5e3;
}
.chattopic .chat-starter .post-box {text-align: right;}
/* Форма ответа */
.chattopic #post-form .inputfield {
position: absolute;
left: -40px;
width: 110px;
top: 30px;
}
.chattopic .formsubmit {
margin: 0 auto;
display: block;
text-align: center;
}
.chat-respond {min-height: 150px;}
.chattopic .formal fieldset {margin: 0; padding: 0 0 20px;}
#pun .punbb .chattopic #tags #smilies-area,
#pun .punbb .chattopic #tags #image-area {
position: absolute !important;
z-index: 9999;
left: 0;
bottom: 40px;
background: #f2f2f2;
padding: 5px;
border: 1px solid #ccc;
}
#pun .punbb .chattopic #tags div {position: relative !important;}
.punbb .chattopic #form-buttons td {display: none !important;}
.chattopic .fs-box {margin: 0; padding: 0;}
.chattopic #form-buttons {height: 0;}
.punbb .chattopic #form-buttons td#button-smile {
display: block !important;
position: absolute;
padding: 0px !important;
margin: 0 !important;
background: #bbb !important;
border-radius: 50%;
width: 30px;
height: 30px;
top: 0px;
}
.punbb .chattopic #form-buttons td#button-smile {left: 0;}
.punbb .chattopic #form-buttons td#button-image {left: 0;}
.punbb .chattopic #form-buttons .material-icons {position: absolute; z-index: 10;
color: #fff !important;
left: 2px;
top: 2px;
}
.chattopic #main-reply {
width: 290px;
height: 20px;
margin: 0 0 0 40px;
display: block;
}
/*Первый пост*/
.chattopic .topicpost .post-links .material-icons,
.chattopic .topicpost .chat-date {display: none;}
.chattopic .topicpost .post-content {border: none;display: block;padding: 0; left: auto; max-width: 100%; background: transparent;right: auto; max-height: 100% !important;}
.chattopic .topicpost.chat-starter .post-box {text-align: left;}
.chattopic .topicpost h3,
.chattopic .topicpost .post-author {display: none;}
.chattopic .topicpost .post-links li a {font-size: 18px;}
.chattopic .topicpost .post-links {position: absolute; top: 0; right: 0;}
.punbb .chattopic .topicpost .post-content img {margin: 0;}
.chattopic .post.topicpost {
background: transparent;
width: auto;
padding: 0;
}
.chattopic .topicpost .post-content {margin: 0;}
.isguest .chattopic .post.topicpost.firstpost .container {padding: 0;}
/*Дизайн*/
.chattopic #post-form {
width: 332px;
margin: 0 auto;
background: #e3e3e3;
height: 34px;
border-radius: 0 0 20px 20px;
padding: 10px 20px;
position: relative;
border: none;
}
.chattopic .post-links {
position: absolute;
right: -36px;
top: 0;
}
.chattopic .post-links li.pl-delete,
.chattopic .post-links li.pl-edit {
display: block;
margin: 0 0 4px !important;
position: relative;
width: 16px;
height: 16px;
}
.chattopic .post-links li a {
font-size: 0;
display: block;
position: absolute;
width: 16px;
height: 16px;
z-index: 100;
top: 0;
left: 0;
}
.chattopic .post-links li .material-icons {font-size: 16px;}
.chat-date {
position: absolute;
left: 0;
bottom: -16px;
}
.chat-date a {
font-weight: normal;
font-size: 11px;
color: #ccc;
}
.punbb .chattopic .post[data-group-id="3"] .pa-avatar,
.punbb .chattopic .post .pa-avatar a,
.punbb .chattopic .post .pa-avatar img {
border: none !important;
width: 40px;
height: 40px;
}
.chattopic .pa-avatar {width: auto; height: auto; left: 0px; top: 0;}
.punbb .chattopic .post-content img {margin: 5px auto;}
.chattopic .post-content {
font-size: 13px;
width: auto;
border: 1px solid #d7d7d7;
border-radius: 5px;
padding: 3px 5px;
background: #f2f2f2;
display: inline-block;
position: relative;
left: 50px;
max-width: 280px;
margin: 0 0 20px;
min-width: 90px;
}
.chattopic .post {
background: #fff;
width: 352px;
margin: 0 auto;
position: relative;
padding: 0px 10px 8px;
border: none;
min-height: 45px;
}
.chat-start {
width: 372px;
background: #bbb url(https://i.imgur.com/QnViIKZ.png) no-repeat center center;
height: 45px;
border-radius: 20px 20px 0 0;
margin: 0 auto;
position: relative;
border-bottom: 8px solid #fff;
}
.chat-start img {
position: absolute;
border-radius: 50%;
width: 32px;
height: 32px;
top: 8px;
left: 34px;
}
.ch-s-name {
position: absolute;
font-weight: bold;
color: #fff;
left: 74px;
top: 6px;
}
.ch-s-descr {
color: #fff;
font-size: 13px;
position: absolute;
top: 22px;
left: 76px;
}
/* Отключаем стандартные стили */
.chattopic .post-content .chatpost,
.chattopic .post h3 .pa-ip,
.chattopic .post h3 strong,
.chattopic .post .sharelink,
.chattopic .post-links .pl-quote,
#pun-viewtopic .chattopic .post-author .pa-author,
.chattopic .post-author .pa-title,
.chattopic .post-author .pa-online,
.chattopic .post-author .pa-fld2,
.chattopic .post-author .pa-fld1,
.chattopic .post-author .pa-fld4,
.chattopic .post-author .pa-ua,
.chattopic .post-author .pa-links,
.topicpost .post-author .pa-avatar,
.chattopic .post h3,
.chattopic #userinfo,
.chattopic #pt-swich,
.chattopic #pt-inside,
.chattopic .button[name="preview"],
.chattopic .topicpost.firstpost:after,
.chattopic .post-sig,
.chattopic div.post-vote p a.positive:before,
.posted-at {display: none !important;}
.chattopic .post .container {border: none; left: auto; top: auto; background-color: transparent; padding: 0;}
.chattopic .post-author {border: none; margin: 0; min-height: 0;}
.chattopic .post-links,
.chattopic .post-author ul {margin: 0; border: none; padding: 0; background: transparent;}
.chattopic #post-form .container {margin: 0; border: none; padding: 0; background: transparent; left: auto; top: auto;}
.chattopic .post-content p,
.chattopic .post-box {padding: 0;}
</style>
[/html]
