Chat estilo facebook para ModernBB

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

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.

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

Retirado.

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.

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

Continua bugado

Colocou o código que lhe passei no widget?

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.

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.

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}

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.

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

Olá @Luqui,

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

Fico no aguardo.

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

Up...

Olá!

Adicione à sua folha de estilos CSS:

Código:

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

Até mais.

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

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>

Continuou igual http://prntscr.com/k91ykl

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.