This trick allows you to make the forum founder's visitor messages look like a public chat.
ย visible to members and guests
--------------------------------------
This means that each member writes a comment in the messages of the founder of the forum
Messages will appear as chats on the homepage automatically
--------
These are visitor messages for the forum founder in the profile
Thus it appears on the home page
_____________________________________
1 Administration Panel > Users & Groups > Profiles
2 Install the following icons on the home page or in templates
- AwesomeBB:
- Code:
<div class="chat-forum">
ย ย ย
<div class="chat-forum-header">
ย chat forum ย
</div>
ย ย ย
<div class="chat-forum-page">
ย ย ย
<div class="chat-forum-page2">
ย ย ย ย ย ย ย ย ย ย ย ย ย ย ย ย ย ย ย ย ย ย ย ย ย ย ย ย ย ย ย ย ย ย ย ย ย ย ย ย ย ย ย ย ย ย ย ย ย ย ย ย ย ย ย ย ย ย ย ย ย ย ย ย ย ย ย ย ย ย ย ย ย ย ย ย ย ย ย ย ย ย ย ย ย ย ย
</div>
ย ย ย <script> ย
$(function(){var pa=$('.chat-forum-page2'); $.get('/u1wall' , function(data){ var h= $(data).find('.block .block-header + .block-content').html();pa.html(h);});}); ย ย
</script> ย ย ย
</div>
ย ย ย <a class="btn btn-default" title="new message" href="/privmsg?mode=post_profile&u=1"><span>new message</span></a>
</div><style>
.chat-forum-header {
ย ย text-align: center;
ย ย background-color: #1E88E5;
ย ย box-shadow: 0 2px 3px rgba(0,0,0,0.1), 0 0 2px rgba(0,0,0,0.1);
ย ย color: #FFF;
ย ย border-radius: 3px;
ย ย padding: 16px;
ย ย font-size: 17px;
ย ย font-weight: 800;
}
.chat-forum-page {
ย ย width: 100%;
ย ย height: 450px;
ย ย overflow: overlay;
ย ย padding: 15px 30px 15px 15px;
ย ย background: white;
ย ย margin-bottom: 10px;
ย ย border: solid #2196F3 1px;
}
.chat-forum a.btn.btn-default {
ย ย width: 100%;
ย ย margin-bottom: 22px;
ย ย text-align: center;
ย ย background-color: #1E88E5;
ย ย box-shadow: 0 2px 3px rgba(0,0,0,0.1), 0 0 2px rgba(0,0,0,0.1);
ย ย color: #FFF;
ย ย border-radius: 3px;
ย ย font-size: 17px;
ย ย font-weight: 800;
}
.chat-forum .friend-header em {
ย ย font-size: 10px;
}
.chat-forum .friend-header a {
ย ย margin: 3px;
ย ย font-size: 12px;
}
.chat-forum .friend-header:first-line {
ย ย font-size: 0;
}
.chat-forum .avatar img, .chat-forum .avatar {
ย ย width: 45px !important;
ย ย height: 45px !important;
}
.chat-forum div.friend-header > ul > li.last > a:after {
ย ย color: #ff1100;
ย ย font-size: 30px;
ย ย font-weight: bold;
ย ย content: "x";
}
.chat-forum div.friend-header > ul > li.last > a, .chat-forum div.friend-header > ul > li:nth-child(1) > a {
ย ย font-size: 0;
}
.chat-forum div.friend-header > ul > li:nth-child(1) > a:after {
ย ย content: ">";
ย ย font-size: 30px;
ย ย color: #00b507;
}
</style>
- phpBB3--ModernBB:
- Code:
<div class="chat-forum">
ย ย
<div class="chat-forum-header">
ย chat forum
</div>
ย ย
<div class="chat-forum-page">
ย ย
<div class="chat-forum-page2">
ย ย ย ย ย ย ย ย ย ย ย ย ย ย ย ย ย ย ย ย ย ย ย ย ย ย ย ย ย ย ย ย ย ย ย ย ย ย ย ย ย ย ย ย ย ย ย ย ย ย ย ย ย ย ย ย ย ย ย ย ย ย ย ย ย ย ย ย ย ย ย ย ย ย ย ย ย ย ย ย ย ย ย ย ย ย
</div>
ย ย ย <script>
$(function(){var pa=$('.chat-forum-page2'); $.get('/u1wall' , function(data){ var h= $(data).find('.panel:last-child').html();pa.html(h);});}); ย
</script> ย ย
</div>
ย ย ย <a class="btn btn-default" title="new message" href="/privmsg?mode=post_profile&u=1"><span>new message</span></a>
</div><style>
.chat-forum-header {
ย ย font-weight: 600;
ย ย text-align: center;
ย ย font-size: 17px;
ย ย color: #fff;
ย ย clear: both;
ย ย background: #0555b3;
ย ย padding: 10px;
ย ย border-radius: 3px;
ย ย box-shadow: 0 1px 6px rgba(0,0,0,0.06);
}
.chat-forum-page {
ย ย border: solid 1px;
ย ย padding-right: 30px;
ย ย overflow: overlay;
ย ย height: 500px;
}
.chat-forum .pagination.top, .chat-forum .new-message.bottom {
ย ย display: none;
}
.chat-forum ul.message-footer a {
ย ย margin: 8px;
ย ย font-size: 12px;
ย ย float: right;
}
.chat-forum .avatar {
ย ย position: relative;
ย ย float: left;
}
.chat-forum .avatar img, .chat-forum .avatar {
ย ย width: 45px !important;
ย ย height: 45px !important;
}
.chat-forum .message-block {
ย ย overflow: hidden;
ย ย padding: 10px;
ย ย background: #00000005;
ย ย border: solid 1px #0000004a;
ย ย margin-bottom: 10px;
}
.chat-forum .message-block em {
ย ย font-size: 15px;
}
.chat-forum .message-header a {
ย ย margin-right: 5px;
ย ย font-size: 15px;
}
.chat-forum h1, .chat-forum .message-header {
ย ย font-size: 0 !important;
}
.chat-forum .message-date {
ย ย float: right;
ย ย font-size: 15px;
ย ย display: inline-block;
}
.chat-forum a.btn.btn-default {
ย ย margin-bottom: 11px;
ย ย width: 100%;
ย ย font-weight: 600;
ย ย display: block;
ย ย text-align: center;
ย ย font-size: 17px;
ย ย color: #fff;
ย ย clear: both;
ย ย background: #05518d;
ย ย padding: 10px;
ย ย border-radius: 3px;
ย ย box-shadow: 0 1px 6px rgba(0,0,0,0.06);
}
.chat-forum div.message-block > ul > li.last > a:after {
ย ย color: #ff1100;
ย ย font-size: 30px;
ย ย font-weight: bold;
ย ย content: "x";
}
.chat-forum div.message-block > ul > li.last > a {
ย ย font-size: 0;
}
.chat-forum div.message-block > ul > li:nth-child(1) > a {
ย ย font-size: 0;
}
.chat-forum div.message-block > ul > li:nth-child(1) > a:after {
ย ย content: ">";
ย ย font-size: 30px;
ย ย color: #00b507;
}
</style>
- PunBB:
- Code:
<div class="chat-forum">
ย ย
<div class="chat-forum-header">
ย chat forum
</div>
ย ย
<div class="chat-forum-page">
ย ย
<div class="chat-forum-page2">
ย ย ย ย ย ย ย ย ย ย ย ย ย ย ย ย ย ย ย ย ย ย ย ย ย ย ย ย ย ย ย ย ย ย ย ย ย ย ย ย ย ย ย ย ย ย ย ย ย ย ย ย ย ย ย ย ย ย ย ย ย ย ย ย ย ย ย ย ย ย ย ย ย ย ย ย ย ย ย ย ย ย ย ย ย ย
</div>
ย ย ย <script>
$(function(){var pa=$('.chat-forum-page2'); $.get('/u1wall' , function(data){ var h= $(data).find('.pun .main-content').html();pa.html(h);});}); ย
</script> ย ย
</div>
ย ย ย <a class="btn btn-default" title="new message" href="/privmsg?mode=post_profile&u=1"><span>new message</span></a>
</div><style>
.chat-forum-header {
ย ย font-weight: 600;
ย ย text-align: center;
ย ย font-size: 17px;
ย ย color: #fff;
ย ย clear: both;
ย ย background: #0555b3;
ย ย padding: 10px;
ย ย border-radius: 3px;
ย ย box-shadow: 0 1px 6px rgba(0,0,0,0.06);
}
.chat-forum-page {
ย ย border: solid 1px;
ย ย padding-right: 30px;
ย ย overflow: overlay;
ย ย height: 500px;
}
.chat-forum .pagination.top, .chat-forum .new-message.bottom {
ย ย display: none;
}
.chat-forum ul.message-footer{
ย ย list-style: none;
ย ย padding: 7px;
}
.chat-forum ul.message-footer a {
ย ย margin: 8px;
ย ย font-size: 12px;
ย ย float: right;
}
.chat-forum .avatar {
ย ย position: relative;
ย ย float: left;
}
.chat-forum .avatar img, .chat-forum .avatar {
ย ย width: 45px !important;
ย ย height: 45px !important;
}
.chat-forum .message-block {
ย ย overflow: hidden;
ย ย padding: 10px;
ย ย background: #00000005;
ย ย border: solid 1px #0000004a;
ย ย margin-bottom: 10px;
margin-top: 10px;
}
.chat-forum .message-block em {
ย ย font-size: 15px;
}
.chat-forum .message-header a {
ย ย margin-right: 5px;
ย ย font-size: 15px;
}
.chat-forum h1, .chat-forum .message-header {
ย ย font-size: 0 !important;
}
.chat-forum .message-date {
ย ย float: right;
ย ย font-size: 15px;
ย ย display: inline-block;
}
.chat-forum a.btn.btn-default {
ย ย margin-bottom: 11px;
ย ย width: 100%;
ย ย font-weight: 600;
ย ย display: block;
ย ย text-align: center;
ย ย font-size: 17px;
ย ย color: #fff;
ย ย clear: both;
ย ย background: #05518d;
ย ย padding: 10px;
ย ย border-radius: 3px;
ย ย box-shadow: 0 1px 6px rgba(0,0,0,0.06);
}
.chat-forum div.message-block > ul > li.last > a:after {
ย ย color: #ff1100;
ย ย font-size: 30px;
ย ย font-weight: bold;
ย ย content: "x";
}
.chat-forum div.message-block > ul > li.last > a {
ย ย font-size: 0;
}
.chat-forum div.message-block > ul > li:nth-child(1) > a {
ย ย font-size: 0;
}
.chat-forum div.message-block > ul > li:nth-child(1) > a:after {
ย ย content: ">";
ย ย font-size: 30px;
ย ย color: #00b507;
}
.chat-forum ul.message-footer {
ย ย padding: 0 !important;
}
</style>
- Invision:
- Code:
<div class="chat-forum">
ย
<div class="chat-forum-header">
ย chat forum
</div>
ย
<div class="chat-forum-page">
ย
<div class="chat-forum-page2">
ย ย ย ย ย ย ย ย ย ย ย ย ย ย ย ย ย ย ย ย ย ย ย ย ย ย ย ย ย ย ย ย ย ย ย ย ย ย ย ย ย ย ย ย ย ย ย ย ย ย ย ย ย ย ย ย ย ย ย ย ย ย ย ย ย ย ย ย ย ย ย ย ย ย ย ย ย ย ย ย ย ย ย ย ย
</div>
ย ย ย <script>
$(function(){var pa=$('.chat-forum-page2'); $.get('/u1wall' , function(data){ var h= $(data).find('#profile-advanced-details ol').html();pa.html(h);});});
</script> ย
</div>
ย ย ย <a class="btn btn-default" title="new message" href="/privmsg?mode=post_profile&u=1"><span>new message</span></a>
</div><style>
.chat-forum-header {
ย ย font-weight: 600;
ย ย text-align: center;
ย ย font-size: 17px;
ย ย color: #fff;
ย ย clear: both;
ย ย background: #0555b3;
ย ย padding: 10px;
ย ย border-radius: 3px;
ย ย box-shadow: 0 1px 6px rgba(0,0,0,0.06);
}
.chat-forum-page {
ย ย border: solid 1px;
ย ย padding-right: 30px;
ย ย overflow: overlay;
ย ย height: 500px;
}
.chat-forum .pagination.top, .chat-forum .new-message.bottom {
ย ย display: none;
}
.chat-forum ul.message-footer{
ย ย list-style: none;
ย ย padding: 7px;
}
.chat-forum ul.message-footer a {
ย ย margin: 8px;
ย ย font-size: 12px;
ย ย float: right;
}
.chat-forum-page2 {
ย ย padding-left: 5px;
ย ย list-style: none;
}
.chat-forum .avatar {
ย ย position: relative;
ย ย float: left;
}
.chat-forum .avatar img, .chat-forum .avatar {
ย ย width: 45px !important;
ย ย height: 45px !important;
}
.chat-forum .message-block {
ย ย overflow: hidden;
ย ย padding: 10px;
ย ย background: #00000005;
ย ย border: solid 1px #0000004a;
ย ย margin-bottom: 10px;
margin-top: 10px;
}
.chat-forum .message-block em {
ย ย font-size: 15px;
}
.chat-forum .message-header a {
ย ย margin-right: 5px;
ย ย font-size: 15px;
}
.chat-forum h1, .chat-forum .message-header {
ย ย font-size: 0 !important;
}
.chat-forum .message-date {
ย ย float: right;
ย ย font-size: 15px;
ย ย display: inline-block;
}
.chat-forum a.btn.btn-default {
ย ย margin-bottom: 11px;
ย ย width: 100%;
ย ย font-weight: 600;
ย ย display: block;
ย ย text-align: center;
ย ย font-size: 17px;
ย ย color: #fff;
ย ย clear: both;
ย ย background: #05518d;
ย ย padding: 10px;
ย ย border-radius: 3px;
ย ย box-shadow: 0 1px 6px rgba(0,0,0,0.06);
}
.chat-forum div.message-block > ul > li.last > a:after {
ย ย color: #ff1100;
ย ย font-size: 30px;
ย ย font-weight: bold;
ย ย content: "x";
}
.chat-forum div.message-block > ul > li.last > a {
ย ย font-size: 0;
}
.chat-forum div.message-block > ul > li:nth-child(1) > a {
ย ย font-size: 0;
}
.chat-forum div.message-block > ul > li:nth-child(1) > a:after {
ย ย content: ">";
ย ย font-size: 30px;
ย ย color: #00b507;
}
</style>
- phpBB2:
- Code:
<div class="chat-forum">
<div class="chat-forum-header">
ย chat forum
</div>
<div class="chat-forum-page">
<div class="chat-forum-page2">
ย ย ย ย ย ย ย ย ย ย ย ย ย ย ย ย ย ย ย ย ย ย ย ย ย ย ย ย ย ย ย ย ย ย ย ย ย ย ย ย ย ย ย ย ย ย ย ย ย ย ย ย ย ย ย ย ย ย ย ย ย ย ย ย ย ย ย ย ย ย ย ย ย ย ย ย ย ย ย ย ย ย ย ย
</div>
ย ย ย <script>
$(function(){var pa=$('.chat-forum-page2'); $.get('/u1wall' , function(data){ var h= $(data).find('#profile-advanced-details ol').html();pa.html(h);});});
</script>
</div>
ย ย ย <a class="btn btn-default" title="new message" href="/privmsg?mode=post_profile&u=1"><span>new message</span></a>
</div><style>
.chat-forum-header {
ย ย font-weight: 600;
ย ย text-align: center;
ย ย font-size: 17px;
ย ย color: #fff;
ย ย clear: both;
ย ย background: #0555b3;
ย ย padding: 10px;
ย ย border-radius: 3px;
ย ย box-shadow: 0 1px 6px rgba(0,0,0,0.06);
}
.chat-forum-page {
ย ย border: solid 1px;
ย ย padding-right: 30px;
ย ย overflow: overlay;
ย ย height: 500px;
}
.chat-forum .pagination.top, .chat-forum .new-message.bottom {
ย ย display: none;
}
.chat-forum ul.message-footer{
font-size: 0;
ย ย list-style: none;
ย ย padding: 7px;
}
.chat-forum ul.message-footer a {
ย ย margin: 8px;
ย ย font-size: 12px;
ย ย float: right;
}
.chat-forum-page2 {
ย ย padding-left: 5px;
ย ย list-style: none;
}
.chat-forum .avatar {
ย ย position: relative;
ย ย float: left;
}
.chat-forum .avatar img, .chat-forum .avatar {
ย ย width: 45px !important;
ย ย height: 45px !important;
}
.chat-forum .message-block {
ย ย overflow: hidden;
ย ย padding: 10px;
ย ย background: #00000005;
ย ย border: solid 1px #0000004a;
ย ย margin-bottom: 10px;
margin-top: 10px;
}
.chat-forum .message-block em {
ย ย font-size: 15px;
}
.chat-forum .message-header a {
ย ย margin-right: 5px;
ย ย font-size: 15px;
}
.chat-forum h1, .chat-forum .message-header {
ย ย text-align: left;
ย ย font-size: 0 !important;
}
.chat-forum .message-text {
ย ย margin-top: 5px;
ย ย font-size: 13px !important;
ย ย text-align: left;
}
.chat-forum .message-date {
ย ย float: right;
ย ย font-size: 15px;
ย ย display: inline-block;
}
.chat-forum a.btn.btn-default {
ย ย margin-bottom: 11px;
ย ย font-weight: 600;
ย ย display: block;
ย ย text-align: center;
ย ย font-size: 17px;
ย ย color: #fff;
ย ย clear: both;
ย ย background: #05518d;
ย ย padding: 10px;
ย ย border-radius: 3px;
ย ย box-shadow: 0 1px 6px rgba(0,0,0,0.06);
}
.chat-forum div.message-block > ul > li.last > a:after {
ย ย color: #ff1100;
ย ย font-size: 30px;
ย ย font-weight: bold;
ย ย content: "x";
}
.chat-forum div.message-block > ul > li.last > a {
ย ย font-size: 0;
}
.chat-forum div.message-block > ul > li:nth-child(1) > a {
ย ย font-size: 0;
}
.chat-forum div.message-block > ul > li:nth-child(1) > a:after {
ย ย content: ">";
ย ย font-size: 30px;
ย ย color: #00b507;
}
</style>
-------------------------------------------------------------------
you can specify the minimum level of access to the chat by: special rights
and by Preferences
___________________________________________________________
This tutorial was written by: ูููุงู2000
(The codes were written by ูููุงู2000, and Milouze14 code was used in this thread)
Last edited by ูููุงู2000 on August 26th 2023, 7:22 am; edited 8 times in total