Hitskin.com
welcome every
This trick allows you to make the forum founder's visitor messages look like a public chat.
visible to members and guests
--------------------------------------
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 Sat Aug 26 2023, 08:22; edited 8 times in total
or 
but the tutorial from this topic does not require that...
Facebook
Twitter
Pinterest
Youtube
