Chat estilo facebook para ModernBB

3 participantes

Ver o tópico anterior Ver o tópico seguinte Ir para baixo

Tópico resolvido Chat estilo facebook para ModernBB

Mensagem por Luqui 09.07.18 23:00

Detalhes da questão


Endereço do fórum: http://lostscavenge.forumeiros.com/
Versão do fórum: ModernBB

Descrição


Teria como fazer um chat estilo facebook para versão ModernBB? eu vi um tópico a um tempo mas não era para a mesma versão e ele fica bugado.

https://ajuda.forumeiros.com/t78694-e-possivel-fazer-um-chat-igual-ao-do-orkut-facebook

Print do bug

http://prntscr.com/k4i6d3

http://prntscr.com/k4i6kt


Última edição por Luqui em 21.07.18 1:19, editado 2 vez(es)
Luqui

Luqui
***

Membro desde : 14/03/2018
Mensagens : 186
Pontos : 262

http://lostscavenge.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Chat estilo facebook para ModernBB

Mensagem por RafaelS. 11.07.18 20:42

Olá!

Troque o CSS do tópico, por este:

Código:
.button-app {
position: fixed;
right: 0;
bottom: 0;
}
#chatbox {
bottom: 0;
height: 300px;
left: 0;
padding-bottom: 30px;
top: auto;
width: 300px;
background-color: white;
border: 1px solid rgba(0, 0, 0, .3);
border-width: 0 1px;
}
#chatbox_footer {
height: 30px;
padding: 0;
position: absolute;
width: 300px;
background-color: white;
border-top: 1px solid #A5A5A5;
border-left: 1px solid #A5A5A5;}
#chatbox_members {
border: 0;
bottom: 0;
position: fixed;
right: 0;
width: 207px;
z-index: 999;
background: white;
border-left: 1px solid #979797;
}
#chatbox p{
background: white;
border-top: 1px solid #EEE;
border-width: 1px 0 0;
}
#chat-app-fb, #chatbox, #chatbox p, #chatbox p strong
{font-family: 'lucida grande',tahoma,verdana,arial,sans-serif;
font-size: 11px;
font-weight: normal!important;}
 
#chatbox_header.main-head {
background: #4A66A0;
border: 1px solid rgba(0, 39, 121, .76);
border-bottom: none;
bottom: 330px;
cursor: pointer;
height: 30px;
line-height: 30px;
padding: 0;
position: absolute;
top: auto;
width: 300px;
}
.chatbox-title {
display: none;
}
#chatbox_option_autorefresh {
display: none;
}
#chatbox_footer label {
color: transparent;
font-size: 0;
visibility: hidden;
}
#message {
font-size: 12px;
visibility: visible;
width: 244px;
border: 0;
outline: 0;
height: 28px;
position: relative;
top: -10px;
padding: 0 5px;
}
.right-box.style-buttons {
display: block;
background: #2C2C2C;
}
#chat-app-fb {
position: fixed;
top: 0;
bottom: 0;
height: 100%;
right: 0;
width: 500px;
}
body.chatbox {
background: none;
border: none;
}
.chatbox-options {
margin: 0;
float: left;
padding-left: 10px;
}
#divsmilies {
background: white;
border: 1px solid white;
left: 10px;
position: relative;
top: -38px;
width: 42px;
height: 26px;
}
#chatbox_members .member-title ,.date-and-time, #divcolor, #divstrike, #divunderline, #divitalic, #divbold {
display: none;
}
#chatbox_members ul li {
padding: 6px 0 6px 10px;
margin: 2px 0;
}
#chatbox_members ul li:hover {background: #E6E9EE;}
#chatbox_members ul {
margin: 0;
padding: 0;
}
body[bgcolor^="#fbfbfb"] {
background: transparent;
}
#chatbox_contextmenu {
z-index: 999;
margin-top: 10px;
margin-left: -39px;
}
.fb-search form input {
background-image: url("http://i.imgur.com/9tSaXF7.png");
border: 0;
width: 133px;
height: 25px;
padding: 0 0 0 20px;
background-repeat: no-repeat;
outline: none;
box-shadow: none;
color: #BDBDBD;
font-family: 'lucida grande', tahoma, verdana, arial, sans-serif;
font-size: 11px;
z-index: 999999!important;
position: relative;}
.seo-me {
width: 207px;
}
.profile-se {
float: right;
margin-right: 27px;
}
.button-app img[src^="http://i.imgur.com/degNOB8.png"] {
float: right;
position: absolute;
right: 0;
}
.button-app img[src^="http://i.imgur.com/FMZxNQv.png"] {
margin-right: 30px;
}
.button-app img[src^="http://i.imgur.com/FMZxNQv.png"] + div.seo-me {
display: none;
}
.fb-search form input:focus {
color: #4B4B4B;
}
.button-app {
z-index: 999999!important;
}
#chat-app-fb {
z-index: 99999!important;
}
.count-user {
position: fixed;
z-index: 999;
right: 155px;
bottom: 6px;
font: bold 11px verdana ,arial;
color: #000;}
.button-app img[src^="http://i.imgur.com/degNOB8.png"] + div.seo-me + div.count-user {
display: none;
}
.button-app img[src^="http://i.imgur.com/FMZxNQv.png"] + div.seo-me + div.count-user {
display: inline;
}
div#chatbox {
height: 88.4%!important;
    margin-bottom: 13%!important;
    width: 100%;
}
div#chatbox_members {
    width: 180px !important;
}
div#chatbox_footer {
    margin-left: 36% !important;
}
div#chatbox_footer input#message {
    top: 0 !important;
}
.right-box.style-buttons {
    background: white !important;
}

Abraços. Feliz
avatar

RafaelS.
Membro Entusiasta

Membro desde : 26/04/2014
Mensagens : 5746
Pontos : 7156

http://techmais.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Chat estilo facebook para ModernBB

Mensagem por Luqui 15.07.18 23:17

Desculpe a demora da resposta, Funcionou perfeitamente pórem o número de pessoas logadas está bugado http://prntscr.com/k6t563
Luqui

Luqui
***

Membro desde : 14/03/2018
Mensagens : 186
Pontos : 262

http://lostscavenge.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Chat estilo facebook para ModernBB

Mensagem por RafaelS. 16.07.18 1:57

Fórum em manutenção



Para que possamos dar continuidade, o seu fórum não pode estar em manutenção. Seu tópico ficará pendente até você retirar o modo de manutenção. Caso não seja retirado nos próximos dois dias, este será movido para lixeira.

Tópico pendente.


Última edição por RafaelS. em 16.07.18 11:33, editado 1 vez(es)
avatar

RafaelS.
Membro Entusiasta

Membro desde : 26/04/2014
Mensagens : 5746
Pontos : 7156

http://techmais.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Chat estilo facebook para ModernBB

Mensagem por Luqui 16.07.18 2:17

Retirado.
Luqui

Luqui
***

Membro desde : 14/03/2018
Mensagens : 186
Pontos : 262

http://lostscavenge.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Chat estilo facebook para ModernBB

Mensagem por RafaelS. 16.07.18 16:02

Olá!

Troque o código Javascript por este:

Código:
<div style="cursor:pointer;" class="button-app">
     <img onclick="document.getElementById('chat-app-fb').style.display=(this.src=='http://i.imgur.com/FMZxNQv.png')?'block':'none';this.src=(this.src=='http://i.imgur.com/FMZxNQv.png')?'http://i.imgur.com/degNOB8.png':'http://i.imgur.com/FMZxNQv.png';" src="http://i.imgur.com/FMZxNQv.png" /> 
   <div class="seo-me">
       
      <div class="profile-se">
           <a href="/profile?mode=editprofile"><img title="Opções" src="http://i.imgur.com/xHLwgoA.png" /></a> 
      </div>
       
      <div class="fb-search">
          
         <form method="get" action="/search">
              <input onblur="if (this.value == '') this.value = 'Buscar';" onclick="if (this.value == 'Buscar') this.value = '';" value="Buscar" name="search_keywords" class="inputbox medium" type="text" /> 
         </form>
          
      </div>
       
   </div>
    
   <div class="count-user">
        (<span id="chat-user-on">0</span>) 
   </div>
</div>
<div style="display:none;" id="chat-app-fb">
       <iframe frameborder="0" marginheight="0" style="height: 100%;margin-left: -19px;width: 520px;" marginwidth="0" scrolling="no" src="/chatbox/index.forum?page=front&"></iframe>
</div><script>jQuery(document).ready( function() {jQuery("#chat-user-on").load("/ #main-content .block:eq(1) strong:eq(0)");});</script>

Abraços. Feliz

Tópico movido de 'Questões sobre a aparência do fórum' para 'Questões sobre códigos'
avatar

RafaelS.
Membro Entusiasta

Membro desde : 26/04/2014
Mensagens : 5746
Pontos : 7156

http://techmais.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Chat estilo facebook para ModernBB

Mensagem por Luqui 16.07.18 16:48

Continua bugado
Luqui

Luqui
***

Membro desde : 14/03/2018
Mensagens : 186
Pontos : 262

http://lostscavenge.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Chat estilo facebook para ModernBB

Mensagem por RafaelS. 16.07.18 17:13

Colocou o código que lhe passei no widget?
avatar

RafaelS.
Membro Entusiasta

Membro desde : 26/04/2014
Mensagens : 5746
Pontos : 7156

http://techmais.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Chat estilo facebook para ModernBB

Mensagem por Luqui 16.07.18 17:17

Você falou para eu colocar no Javascript, porém não fiz pelo java fiz pela mensagem da página principal igual citado no vídeo tutorial do Post onde encontrei o chat.
Luqui

Luqui
***

Membro desde : 14/03/2018
Mensagens : 186
Pontos : 262

http://lostscavenge.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Chat estilo facebook para ModernBB

Mensagem por RafaelS. 16.07.18 17:34

Sim @Luqui pode colocar tanto na mensagem da página inicial quanto em um widget. Na verdade eu não disse para colocar em um Javascript, disse apenas para substituir o código (Javascript) por aquele.

O código que lhe passei, a principio funcionaria, porém eu visitei o seu fórum e vi que as estatísticas não são as estatísticas padrão do ModernBB, ou seja você editou o template.

O código basicamente pega o número de usuários online nas estatisticas, veja:


Se quiser que funcione corretamente terá de me fornecer o seu template index_body. É possível ocultar as estatísticas do chatbox via CSS depois, mas para já é preciso que elas estejam lá.

Fico no aguardo. Feliz
avatar

RafaelS.
Membro Entusiasta

Membro desde : 26/04/2014
Mensagens : 5746
Pontos : 7156

http://techmais.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Chat estilo facebook para ModernBB

Mensagem por Luqui 16.07.18 17:54

Li de forma burra, Perdão.

Aqui está o template

Código:
{JAVASCRIPT}
 
<!-- BEGIN switch_user_login_form_header -->
<div class="panel">
  <form action="{S_LOGIN_ACTION}" method="post" name="form_login">
      <div class="user_login_form center">
        <input placeholder="{L_USERNAME}" class="inputbox fl_username" type="text" size="10" name="username" />
        <input placeholder="{L_PASSWORD}" class="inputbox fl_password" type="password" size="10" name="password" />
        <br />
        <label>{L_AUTO_LOGIN}: <input class="radio" type="checkbox" name="autologin" {AUTOLOGIN_CHECKED} /></label>
        {S_HIDDEN_FIELDS}<input class="mainoption button1" type="submit" name="login" value="{L_LOGIN}" />
            <!-- BEGIN switch_social_login -->
            <div class="social_btn">
                <!-- BEGIN fb_connect -->
                <div class="fb-login-button"></div>
                <!-- END fb_connect -->
                <!-- BEGIN topicit_connect -->
                <div class="ti-connect"></div>
                <!-- END topicit_connect -->
            </div>
            <!-- END switch_social_login -->
      </div>
  </form>
</div>
<!-- END switch_user_login_form_header -->
 
<!-- BEGIN message_admin_index -->
  <div class="panel introduction">
      <!-- BEGIN message_admin_titre -->
        <div class="h3">{message_admin_index.message_admin_titre.MES_TITRE}</div>
      <!-- END message_admin_titre -->
 
      <!-- BEGIN message_admin_txt -->
        <div class="mes-txt">{message_admin_index.message_admin_txt.MES_TXT}</div>
      <!-- END message_admin_txt -->
  </div>
<!-- END message_admin_index -->
 
{CHATBOX_TOP}
 
{BOARD_INDEX}
 
<!-- Made and Optimizations by JScript - 2013/07/23 - http://jscript.forumeiros.com/forum -->
<div id="pun-info" class="main" style="display: none;">
 <div class="main-statistics">
 <div id="onlinelist">
 <img src="{L_ONLINE_IMG}" alt="{L_WHO_IS_ONLINE}" />
 <p class="right">
 <!-- BEGIN switch_viewonline_link -->
 <a href="{U_VIEWONLINE}" rel="nofollow">{L_WHO_IS_ONLINE}</a>
 <!-- END switch_viewonline_link -->
 <!-- BEGIN switch_viewonline_nolink -->
 {L_WHO_IS_ONLINE}
 <!-- END switch_viewonline_nolink -->
 </p>
 <p id="total_users_online">{TOTAL_USERS_ONLINE}<br /></p>
            <p id="record_users">{RECORD_USERS}<br /></p>
            <p id="logged_in_user_list">{LOGGED_IN_USER_LIST}</p>
            <p id="l_online_users">{L_ONLINE_USERS}</p>
            <p id="l_connected_members">{L_CONNECTED_MEMBERS}<br /></p>
            <p id="l_whosbirthday_today">{L_WHOSBIRTHDAY_TODAY}</p>
            <p id="l_whosbirthday_week">{L_WHOSBIRTHDAY_WEEK}</p>
 <div class="clear"></div>
 <p id="group_legend">{LEGEND}&nbsp;:&nbsp;{GROUP_LEGEND}</p>  
 </div>
 <!-- BEGIN switch_chatbox_activate -->
 <div id="onlinechat">
 <p class="page-bottom">
 {TOTAL_CHATTERS_ONLINE}&nbsp;:&nbsp;
 {CHATTERS_LIST}
            <br />
 <!-- BEGIN switch_chatbox_popup -->
 <div id="chatbox_popup"></div>
 <script type="text/javascript">
 insertChatBoxPopup('{disable_viewonline.switch_chatbox_activate.switch_chatbox_popup.U_FRAME_CHATBOX}', '{L_CLICK_TO_JOIN_CHAT}');
 </script>
 <!-- END switch_chatbox_popup -->
 </p>
 </div>
 <!-- END switch_chatbox_activate -->
 </div>
</div>
<!-- Ipboard stile -->
<div class="statistics clearfix" id="board_statistics">
    <ul class="ipsList_inline right ipsType_small" id="stat_links">
        <!-- Hook point -->
        <li><a title="Visualizar a equipe de moderação" href="/g2-">Equipe de moderação</a></li>
        <li><a title="Visualizar os maiores postadores de hoje" href="/memberlist?mode=today_posters">Top 20 posters de hoje</a></li>
        <li><a title="Visualizar os maiores postadores do fórum" href="/memberlist?mode=overall_posters">Top posters geral</a></li>
    </ul>
    <h4 class="statistics_head"></h4>
    <p class="statistics_brief desc">
    </p>
    <br>
    <p class="users_online">
    </p>
  <br>
    {L_CONNECTED_MEMBERS}
    <!-- BEGIN switch_chatbox_activate -->
    <div class="ipsSideBlock clearfix" id="active_users">
        <h3><a title="View Main Shoutbox" href="javascript:void(0);">Users in the shoutbox (<span id="shoutbox-active-total"></span>)</a></h3>
        <div>
            <span class="desc"><span id="shoutbox-active-member"></span> membros, <span id="shoutbox-active-anon">0</span> membro(s) anônimo(s)</span>
            <br><br>
            <p id="shoutbox-active-names">
                {CHATTERS_LIST}
            </p>
        </div>
    </div>
    <script type="text/javascript">
        //<![CDATA[
        var total_chatters = $('#onlinechat').find('p.page-bottom > strong').text();
        $('#shoutbox-active-member').text($('#shoutbox-active-total').text(total_chatters));
        //]]>
    </script>
    <!-- END switch_chatbox_activate -->
    <div class="statistics" style="padding: 5px 0 !important; margin: 0 !important"></div>
    <div id="new_group_legend" class=groups></div>
    <script type="text/javascript">
        //<![CDATA[
        /** START Personal forum values
        * Sample: Há 5 usuários online :: 1 usuário cadastrado, Nenhum Invisível e 4 Visitantes :: 1 Motor de busca
        ****/
        var reg_users      = 'Usuários registrados :';
        var search_bots    = 'Robôs (motores de busca) :';
        var nobody_text    = 'Nenhum';
        var and_text        = ' e ';
        var guests_text    = ' visitantes';
        var anonimous_txt  = ' membros anônimos';
        var full_list_txt  = '(lista completa)';
        var active_text    = ' usuários ativos (no momento)';
        /* END Personal forum values */
  
        var target = $('#total_users_online');
        var aSplit = target.text();
  
        /* Usuários online/ativos */
        var users_active = target.find('strong:first').text() + active_text;
        $('#board_statistics').find('h4.statistics_head').text(users_active);
  
        var membros = aSplit.split(' :: ')[1].split(' ')[0];
        if(isNaN(parseInt(membros))) {membros = 0;}
        membros += ' membros, ';
  
        var visitantes = aSplit.split(and_text)[1].split(' ')[0];
        if(isNaN(parseInt(visitantes))) {visitantes = 0;}
  
        var invisivel = aSplit.split(', ')[1].split(' ')[0];
        if(isNaN(parseInt(invisivel))) {invisivel = 0;}
  
        $('#board_statistics').find('h4.statistics_head').text(users_active);
        $('#board_statistics').find('p.statistics_brief.desc')
            .text(membros + visitantes + guests_text + ', ' + invisivel + anonimous_txt)
            .append('&nbsp;&nbsp;<a href="/viewonline">' + full_list_txt + '</a>');
        users_active = $('#logged_in_user_list').html();
        users_active = users_active.replace(reg_users, '');
        users_active = users_active.replace('<br>', '');
        if (users_active.indexOf(nobody_text) !== -1) {
            users_active = users_active.replace(search_bots, '');
        } else {
            users_active = users_active.replace(search_bots, ', ');
        }  
        users_active = users_active.replace(nobody_text,"");
 
        $('#board_statistics').find('p.users_online').html(users_active);
  
        var listHtml = '';
        var target = $('#group_legend').find('b');
        target.each(function(index, value){
            if (listHtml != '') {listHtml += '&nbsp<strong>·</strong>&nbsp';}
            listHtml += $(this).html();
        });
        $('#new_group_legend').html('<img src="" alt="">&nbsp' + listHtml);
  
        var total_chatters = $('#onlinechat').find('p.page-bottom > strong').text();
        $('#shoutbox-active-total').text(total_chatters);
        $('#shoutbox-active-member').text(total_chatters);
        //]]>
    </script>
</div>
<style type="text/css">
<!--
.clearfix:after {
  clear: both;
  content: ".";
  display: block;
  height: 0;
  visibility: hidden;
}
.statistics {
  border-top: 3px solid #D8D8D8 !important;
  line-height: 1.3 !important;
  margin: 20px 0 0 !important;
  overflow: hidden !important;
  padding: 10px 0 !important;
 color: black;
}
.ipsType_small {
  font-size: 12px;
}
.right {
  float: right;
}
.ipsList_inline > li {
  display: inline-block;
}
.statistics_head {
  font-size: 14px !important;
  font-weight: 700 !important;
}
.desc, .desc.blend_links a, p.posted_info {
  color: #777777;
  font-size: 12px;
}
.ipsSideBlock {
  background: none repeat scroll 0 0 #F7FBFC;
  margin-bottom: 10px;
  padding: 10px;
}
.ipsSideBlock h3 {
  background: none repeat scroll 0 0 #DBE2EC;
  color: #204066;
  font-family: helvetica,arial,sans-serif;
  font-size: 14px;
  font-style: normal;
  font-variant: normal;
  font-weight: normal;
  margin: -10px -10px 10px;
  padding: 5px 10px;
}
-->
</style>
 
{CHATBOX_BOTTOM}
 
<!-- BEGIN switch_user_login_form_footer -->
<div class="panel">
  <form action="{S_LOGIN_ACTION}" method="post" name="form_login">
      <div class="user_login_form center">
        <input placeholder="{L_USERNAME}" class="inputbox fl_username" type="text" size="10" name="username" />
        <input placeholder="{L_PASSWORD}" class="inputbox fl_password" type="password" size="10" name="password" />
        <br />
        <label>{L_AUTO_LOGIN}: <input class="radio" type="checkbox" name="autologin" {AUTOLOGIN_CHECKED} /></label>
        {S_HIDDEN_FIELDS}<input class="mainoption button1" type="submit" name="login" value="{L_LOGIN}" />
        <!-- BEGIN switch_social_login -->
            <div class="social_btn">
                <!-- BEGIN fb_connect -->
                <div class="fb-login-button"></div>
                <!-- END fb_connect -->
                <!-- BEGIN topicit_connect -->
                <div class="ti-connect"></div>
                <!-- END topicit_connect -->
            </div>
            <!-- END switch_social_login -->
      </div>
  </form>
</div>
<!-- END switch_user_login_form_footer -->
 
<!-- BEGIN switch_legend -->
<ul id="picture_legend">
  <li><img src="{FORUM_NEW_IMG}" alt="{L_NEW_POSTS}" />{L_NEW_POSTS}</li>
  <li><img src="{FORUM_IMG}" alt="{L_NO_NEW_POSTS}" />{L_NO_NEW_POSTS}</li>
  <li><img src="{FORUM_LOCKED_IMG}" alt="{L_FORUM_LOCKED}" />{L_FORUM_LOCKED}</li>
</ul>
<!-- END switch_legend -->
 
{AUTO_DST}
Luqui

Luqui
***

Membro desde : 14/03/2018
Mensagens : 186
Pontos : 262

http://lostscavenge.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Chat estilo facebook para ModernBB

Mensagem por RafaelS. 16.07.18 18:34

Olá novamente!

Troque o template este:
Código:
{JAVASCRIPT}
 
<!-- BEGIN switch_user_login_form_header -->
<div class="panel">
  <form action="{S_LOGIN_ACTION}" method="post" name="form_login">
      <div class="user_login_form center">
        <input placeholder="{L_USERNAME}" class="inputbox fl_username" type="text" size="10" name="username" />
        <input placeholder="{L_PASSWORD}" class="inputbox fl_password" type="password" size="10" name="password" />
        <br />
        <label>{L_AUTO_LOGIN}: <input class="radio" type="checkbox" name="autologin" {AUTOLOGIN_CHECKED} /></label>
        {S_HIDDEN_FIELDS}<input class="mainoption button1" type="submit" name="login" value="{L_LOGIN}" />
            <!-- BEGIN switch_social_login -->
            <div class="social_btn">
                <!-- BEGIN fb_connect -->
                <div class="fb-login-button"></div>
                <!-- END fb_connect -->
                <!-- BEGIN topicit_connect -->
                <div class="ti-connect"></div>
                <!-- END topicit_connect -->
            </div>
            <!-- END switch_social_login -->
      </div>
  </form>
</div>
<!-- END switch_user_login_form_header -->
 
<!-- BEGIN message_admin_index -->
  <div class="panel introduction">
      <!-- BEGIN message_admin_titre -->
        <div class="h3">{message_admin_index.message_admin_titre.MES_TITRE}</div>
      <!-- END message_admin_titre -->
 
      <!-- BEGIN message_admin_txt -->
        <div class="mes-txt">{message_admin_index.message_admin_txt.MES_TXT}</div>
      <!-- END message_admin_txt -->
  </div>
<!-- END message_admin_index -->
 
{CHATBOX_TOP}
 
{BOARD_INDEX}
 
<!-- Made and Optimizations by JScript - 2013/07/23 - http://jscript.forumeiros.com/forum -->
<div id="pun-info" class="main" style="display: none;">
 <div class="main-statistics">
 <div id="onlinelist">
 <img src="{L_ONLINE_IMG}" alt="{L_WHO_IS_ONLINE}" />
 <p class="right">
 <!-- BEGIN switch_viewonline_link -->
 <a href="{U_VIEWONLINE}" rel="nofollow">{L_WHO_IS_ONLINE}</a>
 <!-- END switch_viewonline_link -->
 <!-- BEGIN switch_viewonline_nolink -->
 {L_WHO_IS_ONLINE}
 <!-- END switch_viewonline_nolink -->
 </p>
 <p id="total_users_online">{TOTAL_USERS_ONLINE}<br /></p>
            <p id="record_users">{RECORD_USERS}<br /></p>
            <p id="logged_in_user_list">{LOGGED_IN_USER_LIST}</p>
            <p id="l_online_users">{L_ONLINE_USERS}</p>
            <p id="l_connected_members">{L_CONNECTED_MEMBERS}<br /></p>
            <p id="l_whosbirthday_today">{L_WHOSBIRTHDAY_TODAY}</p>
            <p id="l_whosbirthday_week">{L_WHOSBIRTHDAY_WEEK}</p>
 <div class="clear"></div>
 <p id="group_legend">{LEGEND}&nbsp;:&nbsp;{GROUP_LEGEND}</p> 
 </div>
      <!-- BEGIN disable_viewonline -->
 <!-- BEGIN switch_chatbox_activate -->
 <div id="onlinechat">
 <p class="page-bottom">
 {TOTAL_CHATTERS_ONLINE}&nbsp;:&nbsp;
 {CHATTERS_LIST}
            <br />
 <!-- BEGIN switch_chatbox_popup -->
      <!-- END disable_viewonline -->
 <div id="chatbox_popup"></div>
 <script type="text/javascript">
 insertChatBoxPopup('{disable_viewonline.switch_chatbox_activate.switch_chatbox_popup.U_FRAME_CHATBOX}', '{L_CLICK_TO_JOIN_CHAT}');
 </script>
 <!-- END switch_chatbox_popup -->
 </p>
 </div>
 <!-- END switch_chatbox_activate -->
 </div>
</div>
<!-- Ipboard stile -->
<div class="statistics clearfix" id="board_statistics">
    <ul class="ipsList_inline right ipsType_small" id="stat_links">
        <!-- Hook point -->
        <li><a title="Visualizar a equipe de moderação" href="/g2-">Equipe de moderação</a></li>
        <li><a title="Visualizar os maiores postadores de hoje" href="/memberlist?mode=today_posters">Top 20 posters de hoje</a></li>
        <li><a title="Visualizar os maiores postadores do fórum" href="/memberlist?mode=overall_posters">Top posters geral</a></li>
    </ul>
    <h4 class="statistics_head"></h4>
    <p class="statistics_brief desc">
    </p>
    <br>
    <p class="users_online">
    </p>
  <br>
    {L_CONNECTED_MEMBERS}
    <!-- BEGIN switch_chatbox_activate -->
    <div class="ipsSideBlock clearfix" id="active_users">
        <h3><a title="View Main Shoutbox" href="javascript:void(0);">Users in the shoutbox (<span id="shoutbox-active-total"></span>)</a></h3>
        <div>
            <span class="desc"><span id="shoutbox-active-member"></span> membros, <span id="shoutbox-active-anon">0</span> membro(s) anônimo(s)</span>
            <br><br>
            <p id="shoutbox-active-names">
                {CHATTERS_LIST}
            </p>
        </div>
    </div>
    <script type="text/javascript">
        //<![CDATA[
        var total_chatters = $('#onlinechat').find('p.page-bottom > strong').text();
        $('#shoutbox-active-member').text($('#shoutbox-active-total').text(total_chatters));
        //]]>
    </script>
    <!-- END switch_chatbox_activate -->
    <div class="statistics" style="padding: 5px 0 !important; margin: 0 !important"></div>
    <div id="new_group_legend" class=groups></div>
    <script type="text/javascript">
        //<![CDATA[
        /** START Personal forum values
        * Sample: Há 5 usuários online :: 1 usuário cadastrado, Nenhum Invisível e 4 Visitantes :: 1 Motor de busca
        ****/
        var reg_users      = 'Usuários registrados :';
        var search_bots    = 'Robôs (motores de busca) :';
        var nobody_text    = 'Nenhum';
        var and_text        = ' e ';
        var guests_text    = ' visitantes';
        var anonimous_txt  = ' membros anônimos';
        var full_list_txt  = '(lista completa)';
        var active_text    = ' usuários ativos (no momento)';
        /* END Personal forum values */
 
        var target = $('#total_users_online');
        var aSplit = target.text();
 
        /* Usuários online/ativos */
        var users_active = target.find('strong:first').text() + active_text;
        $('#board_statistics').find('h4.statistics_head').text(users_active);
 
        var membros = aSplit.split(' :: ')[1].split(' ')[0];
        if(isNaN(parseInt(membros))) {membros = 0;}
        membros += ' membros, ';
 
        var visitantes = aSplit.split(and_text)[1].split(' ')[0];
        if(isNaN(parseInt(visitantes))) {visitantes = 0;}
 
        var invisivel = aSplit.split(', ')[1].split(' ')[0];
        if(isNaN(parseInt(invisivel))) {invisivel = 0;}
 
        $('#board_statistics').find('h4.statistics_head').text(users_active);
        $('#board_statistics').find('p.statistics_brief.desc')
            .text(membros + visitantes + guests_text + ', ' + invisivel + anonimous_txt)
            .append('&nbsp;&nbsp;<a href="/viewonline">' + full_list_txt + '</a>');
        users_active = $('#logged_in_user_list').html();
        users_active = users_active.replace(reg_users, '');
        users_active = users_active.replace('<br>', '');
        if (users_active.indexOf(nobody_text) !== -1) {
            users_active = users_active.replace(search_bots, '');
        } else {
            users_active = users_active.replace(search_bots, ', ');
        } 
        users_active = users_active.replace(nobody_text,"");
 
        $('#board_statistics').find('p.users_online').html(users_active);
 
        var listHtml = '';
        var target = $('#group_legend').find('b');
        target.each(function(index, value){
            if (listHtml != '') {listHtml += '&nbsp<strong>·</strong>&nbsp';}
            listHtml += $(this).html();
        });
        $('#new_group_legend').html('<img src="" alt="">&nbsp' + listHtml);
 
        var total_chatters = $('#onlinechat').find('p.page-bottom > strong').text();
        $('#shoutbox-active-total').text(total_chatters);
        $('#shoutbox-active-member').text(total_chatters);
        //]]>
    </script>
</div>
<style type="text/css">
<!--
.clearfix:after {
  clear: both;
  content: ".";
  display: block;
  height: 0;
  visibility: hidden;
}
.statistics {
  border-top: 3px solid #D8D8D8 !important;
  line-height: 1.3 !important;
  margin: 20px 0 0 !important;
  overflow: hidden !important;
  padding: 10px 0 !important;
 color: black;
}
.ipsType_small {
  font-size: 12px;
}
.right {
  float: right;
}
.ipsList_inline > li {
  display: inline-block;
}
.statistics_head {
  font-size: 14px !important;
  font-weight: 700 !important;
}
.desc, .desc.blend_links a, p.posted_info {
  color: #777777;
  font-size: 12px;
}
.ipsSideBlock {
  background: none repeat scroll 0 0 #F7FBFC;
  margin-bottom: 10px;
  padding: 10px;
}
.ipsSideBlock h3 {
  background: none repeat scroll 0 0 #DBE2EC;
  color: #204066;
  font-family: helvetica,arial,sans-serif;
  font-size: 14px;
  font-style: normal;
  font-variant: normal;
  font-weight: normal;
  margin: -10px -10px 10px;
  padding: 5px 10px;
}
-->
</style>
 
{CHATBOX_BOTTOM}
 
<!-- BEGIN switch_user_login_form_footer -->
<div class="panel">
  <form action="{S_LOGIN_ACTION}" method="post" name="form_login">
      <div class="user_login_form center">
        <input placeholder="{L_USERNAME}" class="inputbox fl_username" type="text" size="10" name="username" />
        <input placeholder="{L_PASSWORD}" class="inputbox fl_password" type="password" size="10" name="password" />
        <br />
        <label>{L_AUTO_LOGIN}: <input class="radio" type="checkbox" name="autologin" {AUTOLOGIN_CHECKED} /></label>
        {S_HIDDEN_FIELDS}<input class="mainoption button1" type="submit" name="login" value="{L_LOGIN}" />
        <!-- BEGIN switch_social_login -->
            <div class="social_btn">
                <!-- BEGIN fb_connect -->
                <div class="fb-login-button"></div>
                <!-- END fb_connect -->
                <!-- BEGIN topicit_connect -->
                <div class="ti-connect"></div>
                <!-- END topicit_connect -->
            </div>
            <!-- END switch_social_login -->
      </div>
  </form>
</div>
<!-- END switch_user_login_form_footer -->
 
<!-- BEGIN switch_legend -->
<ul id="picture_legend">
  <li><img src="{FORUM_NEW_IMG}" alt="{L_NEW_POSTS}" />{L_NEW_POSTS}</li>
  <li><img src="{FORUM_IMG}" alt="{L_NO_NEW_POSTS}" />{L_NO_NEW_POSTS}</li>
  <li><img src="{FORUM_LOCKED_IMG}" alt="{L_FORUM_LOCKED}" />{L_FORUM_LOCKED}</li>
</ul>
<!-- END switch_legend -->
 
{AUTO_DST}

E o código do widget por este:
Código:
<div style="cursor:pointer;" class="button-app">
       <img onclick="document.getElementById('chat-app-fb').style.display=(this.src=='http://i.imgur.com/FMZxNQv.png')?'block':'none';this.src=(this.src=='http://i.imgur.com/FMZxNQv.png')?'http://i.imgur.com/degNOB8.png':'http://i.imgur.com/FMZxNQv.png';" src="http://i.imgur.com/FMZxNQv.png" />   
   <div class="seo-me">
           
      <div class="profile-se">
             <a href="/profile?mode=editprofile"><img title="Opções" src="http://i.imgur.com/xHLwgoA.png" /></a>   
      </div>
           
      <div class="fb-search">
              
         <form method="get" action="/search">
                <input onblur="if (this.value == '') this.value = 'Buscar';" onclick="if (this.value == 'Buscar') this.value = '';" value="Buscar" name="search_keywords" class="inputbox medium" type="text" />   
         </form>
              
      </div>
           
   </div>
        
   <div class="count-user">
          (<span id="chat-user-on">0</span>)   
   </div>
</div>
<div style="display:none;" id="chat-app-fb">
         <iframe frameborder="0" marginheight="0" style="height: 100%;margin-left: -19px;width: 520px;" marginwidth="0" scrolling="no" src="/chatbox/index.forum?page=front&"></iframe>
</div><script>jQuery(document).ready( function() {jQuery("#chat-user-on").load("/ #onlinechat .page-bottom strong:eq(0)");});</script>

Até mais. Feliz
avatar

RafaelS.
Membro Entusiasta

Membro desde : 26/04/2014
Mensagens : 5746
Pontos : 7156

http://techmais.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Chat estilo facebook para ModernBB

Mensagem por Luqui 16.07.18 22:57

Funcionou, Mais um pequeno detalhe teria como deixar ''Chat (0)'' ? http://prntscr.com/k78uqh
Luqui

Luqui
***

Membro desde : 14/03/2018
Mensagens : 186
Pontos : 262

http://lostscavenge.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Chat estilo facebook para ModernBB

Mensagem por RafaelS. 16.07.18 23:46

Olá @Luqui,

Me desculpe, mas atualmente já se encontra assim...
Ou talvez eu entendi errado, poderia explicar novamente o efeito desejado?

Fico no aguardo. Feliz
avatar

RafaelS.
Membro Entusiasta

Membro desde : 26/04/2014
Mensagens : 5746
Pontos : 7156

http://techmais.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Chat estilo facebook para ModernBB

Mensagem por Luqui 16.07.18 23:52

Adicionar um espaçamento entre o texto Chat e o parêntese e deixar junto ao 1, no caso o número de pessoas online

Queria relatar um bug que acontece quando alguém escreve demais as palavras saem do chat, teria como resolver?

http://prntscr.com/k7ho6a
Luqui

Luqui
***

Membro desde : 14/03/2018
Mensagens : 186
Pontos : 262

http://lostscavenge.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Chat estilo facebook para ModernBB

Mensagem por Luqui 19.07.18 18:03

Up...
Luqui

Luqui
***

Membro desde : 14/03/2018
Mensagens : 186
Pontos : 262

http://lostscavenge.forumeiros.com/

Ir para o topo Ir para baixo

  • 0

Tópico resolvido Re: Chat estilo facebook para ModernBB

Mensagem por RafaelS. 20.07.18 12:20

Olá!

Adicione à sua folha de estilos CSS:

Código:
#chatbox p.clearfix {
    max-width: 66%;
}

Até mais. Feliz
avatar

RafaelS.
Membro Entusiasta

Membro desde : 26/04/2014
Mensagens : 5746
Pontos : 7156

http://techmais.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Chat estilo facebook para ModernBB

Mensagem por Luqui 20.07.18 16:27

Sobre mudar o parênteses de lugar, quando você abre o fórum ele fica assim http://prntscr.com/k8xhi0 por 1 segundo e depois fica assim http://prntscr.com/k8xhvn Se tiver como deixar igual a primeira print eu agradeceria muito, mas se não tiver pode fechar o tópico xD
Luqui

Luqui
***

Membro desde : 14/03/2018
Mensagens : 186
Pontos : 262

http://lostscavenge.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Chat estilo facebook para ModernBB

Mensagem por RafaelS. 20.07.18 18:03

Troque por este:

Código:
<div style="cursor:pointer;" class="button-app">
      <img onclick="document.getElementById('chat-app-fb').style.display=(this.src=='http://i.imgur.com/FMZxNQv.png')?'block':'none';this.src=(this.src=='http://i.imgur.com/FMZxNQv.png')?'http://i.imgur.com/degNOB8.png':'http://i.imgur.com/FMZxNQv.png';" src="http://i.imgur.com/FMZxNQv.png" /> 
  <div class="seo-me">
         
      <div class="profile-se">
            <a href="/profile?mode=editprofile"><img title="Opções" src="http://i.imgur.com/xHLwgoA.png" /></a> 
      </div>
         
      <div class="fb-search">
             
        <form method="get" action="/search">
                <input onblur="if (this.value == '') this.value = 'Buscar';" onclick="if (this.value == 'Buscar') this.value = '';" value="Buscar" name="search_keywords" class="inputbox medium" type="text" /> 
        </form>
             
      </div>
         
  </div>
       
  <div class="count-user">
          ( <span id="chat-user-on">0</span>) 
  </div>
</div>
<div style="display:none;" id="chat-app-fb">
        <iframe frameborder="0" marginheight="0" style="height: 100%;margin-left: -19px;width: 520px;" marginwidth="0" scrolling="no" src="/chatbox/index.forum?page=front&"></iframe>
</div><script>jQuery(document).ready( function() {jQuery("#chat-user-on").load("/ #onlinechat .page-bottom strong:eq(0)");
jQuery("#chat-user-on").replace(/\s/g,'');});</script>
avatar

RafaelS.
Membro Entusiasta

Membro desde : 26/04/2014
Mensagens : 5746
Pontos : 7156

http://techmais.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Chat estilo facebook para ModernBB

Mensagem por Luqui 20.07.18 22:54

Luqui

Luqui
***

Membro desde : 14/03/2018
Mensagens : 186
Pontos : 262

http://lostscavenge.forumeiros.com/

Ir para o topo Ir para baixo

  • 0

Tópico resolvido Re: Chat estilo facebook para ModernBB

Mensagem por RafaelS. 21.07.18 0:56

Olá!
Nesse caso, deixe o código que estava e adicione ao seu CSS:

Código:
.count-user span#chat-user-on strong {
    margin-left: -3px;
}

Até mais. Feliz
avatar

RafaelS.
Membro Entusiasta

Membro desde : 26/04/2014
Mensagens : 5746
Pontos : 7156

http://techmais.forumeiros.com/

Ir para o topo Ir para baixo

Ajudeiro

Tópico resolvido Re: Chat estilo facebook para ModernBB

Mensagem por Fraise 21.07.18 1:21

Tópico resolvido

Ícone resolvido accionado .
Movido para "Questões resolvidas".
Fraise

Fraise
Ajudeiro
Ajudeiro

Membro desde : 26/06/2015
Mensagens : 6566
Pontos : 8050

https://ajuda.forumeiros.com/ https://twitter.com/@FraiseFdF

Ir para o topo Ir para baixo

Ver o tópico anterior Ver o tópico seguinte Ir para o topo

- Tópicos semelhantes

Permissões neste sub-fórum
Não podes responder a tópicos