Personalizar estatísticas do fórum

[PrisoN†BreaK]

Detalhes da questão

Endereço do fórum: brasilplayfreedomofc.forumeiros.com/forum
Versão do fórum: PunBB

Descrição

Gostaria de deixa a estática assim:

https://imgur.com/a/FoOJt

Com grupos, usuários nas ultimas 24 horas, e o avatar quadrado.

[while]

Olá autor, troque seu template index_body por este:

Código:

<style>
.tc1, .tcr, .pun table.table td {
  background: none !important;
  border: none !important;
}
 .tc2, .tc3 {
  background: none !important;
  border: none !important;
  color: #737C8D; 
  font-family: Arial, Helvetica, sans-serif;
  font-size: 16px;
  font-weight: 700;
  overflow: hidden;
  position: relative;
  text-align: center;
}
  #onlinelist .legend p {font-size:0;}
#onlinelist .legend p a {font-size: 11px!important;padding:2px;}
  #onlinelist .legend p a {margin:-138px;margin-left:140px;}
        #onlinelist .legend p {margin-top:-7px;}
.tc2:after {
    display: block;
    content: "Tópicos";
    color: #737C8D;
    display: block;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 10px;
        font-weight: normal !important;
    text-align: center;
    text-transform: uppercase;
}
    .tc3:after {
  display: block;
  content: "Mensagens";
    color: #737C8D;
    display: block;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 10px;
    font-weight: normal !important;
    text-align: center;
    text-transform: uppercase;
}

.pun .statused tr {
    background: #f7f7f7;
    border: 1px solid #ddd;
}

.main .main-content {
    background: #FFF;
    border: 1px solid #ddd;
    box-shadow: 0 0 4px rgba(0,0,0,0.1);
    margin: 0;
    padding: 6px;
}
a.forumtitle {color: #666;font-weight: bold;text-decoration: none !important}
</style>
 

{JAVASCRIPT}
<!-- BEGIN switch_user_logged_in -->
<div id="pun-visit" class="clearfix">
 <ul>
 <li><a href="{U_SEARCH_NEW}">{L_SEARCH_NEW}</a></li>
 <li><a href="{U_SEARCH_SELF}">{L_SEARCH_SELF}</a></li>
 <li><a href="{U_SEARCH_UNANSWERED}">{L_SEARCH_UNANSWERED}</a></li>
 <li><a href="{U_MARK_READ}">{L_MARK_FORUMS_READ}</a></li>
 </ul>
 <p>{LOGGED_AS}. {LAST_VISIT_DATE}</p>
</div>
<!-- END switch_user_logged_in -->
<!-- BEGIN switch_user_logged_out -->
<div id="pun-visit">
 <p>{L_NOT_CONNECTED} {L_LOGIN_REGISTER}</p>
</div>
<!-- END switch_user_logged_out -->

<!-- BEGIN message_admin_index -->
<div class="main">
 <!-- BEGIN message_admin_titre -->
 <div class="main-head">
 <h1 class="page-title">{message_admin_index.message_admin_titre.MES_TITRE}</h1>
 </div>
 <!-- END message_admin_titre -->

 <!-- BEGIN message_admin_txt -->
 <div id="pun-announcement">
 <p>{message_admin_index.message_admin_txt.MES_TXT}</p>
 </div>
 <!-- END message_admin_txt -->
</div>
<!-- END message_admin_index -->

<!-- BEGIN switch_user_login_form_header -->
<div class="main">
<form action="{S_LOGIN_ACTION}" method="post" name="form_login">
 <div class="user_login_form main-box center">
 <label><span class="genmed">{L_USERNAME} :</span> <input class="post" type="text" size="10" name="username" /></label> 
 <label><span class="genmed">{L_PASSWORD} :</span> <input class="post" type="password" size="10" name="password" /></label> 
 <label><span class="gensmall">{L_AUTO_LOGIN}</span> <input class="radio" type="checkbox" name="autologin" {AUTOLOGIN_CHECKED} /></label> 
 {S_HIDDEN_FIELDS}<input class="mainoption" type="submit" name="login" value="{L_LOGIN}" />
 <!-- BEGIN switch_fb_connect -->
 <span class="fb_or">{switch_user_login_form_header.switch_fb_connect.L_OR}</span>
 <fb:login-button size="large" onlogin="window.location='/facebook_connect.forum'" v="2" scope="{switch_user_login_form_header.switch_fb_connect.L_FB_PERMISSIONS}">{switch_user_login_form_header.switch_fb_connect.L_FB_LOGIN_BUTTON}</fb:login-button>
 <!-- END switch_fb_connect -->
 </div>
</form>
</div>
<!-- END switch_user_login_form_header -->
{CHATBOX_TOP}
{BOARD_INDEX}



<!-- ESTATÍSTICAS IPB -->

<style>
.ipsWidget.ipsBox:not(.ipsBox_transparent){
    list-style-type:none;
    background-color: #ffffff;
    border: 1px solid #dadada;
    border-radius: 3px;
}
.ipsWidget_title {
    color: #727272 !important;
    background-color: #efefef;
    background-image: linear-gradient(to bottom, rgba(255,255,255,0.4) 0%,rgba(255,255,255,0) 100%);
    padding: 11px 15px;
    font-size: 12px;
    font-weight: bold;
}
.ipsWidget_title a {
    color: #727272 !important;
    font-weight: bold;
}
.ipsPad {
        padding: 15px;
}
</style>
<div class="ipsWidget ipsWidget_horizontal ipsBox">
    <h3 class="ipsType_reset ipsWidget_title">
      <b>Quem Está Online no Best Web?</b>  <span class="ipsType_light ipsType_unbold ipsType_medium">{TOTAL_USERS_ONLINE}</span><span class="ipsType_medium ipsType_light ipsType_unbold ipsType_blendLinks"><a href="/viewonline">(lista completa)</a></span>
</h3>
    <div class="ipsWidget_inner ipsPad">
      {LOGGED_IN_USER_LIST}
      {L_CONNECTED_MEMBERS}
<br>
      </br>
      <span class="legend"></span>
        <span class="legend_group">{GROUP_LEGEND}</span>
    </div>
</div>
<br>

 
<div style="display:none;" id="totalUsers">{TOTAL_USERS}</div>
<div style="display:none;" id="recordUsers">{RECORD_USERS}</div>
<div style="display:none;" id="userNovo">{NEWEST_USER}</div>
 
<div class="ipsWidget ipsWidget_horizontal ipsBox">
    <h3 class="ipsType_reset ipsWidget_title"><b>Estatísticas de Usuários</b></h3>
    <div class="ipsWidget_inner">
        <div class="ipsGrid ipsGrid_collapsePhone ipsWidget_stats">
            <table class="demo">
                <tbody>
                    <tr>
                        <td>
                            <div class="ipsGrid_span4 ipsType_center">
                                <span class="ipsType_large ipsWidget_statsCount" id="numeroMembros">...</span><br>
                                <span class="ipsType_light ipsType_medium">Membros</span>
                            </div>
                        </td>
                        <td>
                            <div class="ipsGrid_span4 ipsType_center">
                                <span class="ipsType_large ipsWidget_statsCount" id="recordOnline">...</span><br>
                                <span class="ipsType_light ipsType_medium">Recorde Online</span>
                            </div>
                        </td>
                        <td>
                            <div class="ipsGrid_span4 ipsType_left ipsPhotoPanel ipsPhotoPanel_mini cNewestMember">
                                    <span style="font-size: 1.2em;"  id="novomembro"></span>
<script type="text/javascript">
//<![CDATA[
    jQuery(function () {
        jQuery('#novomembro').html('<center>' + _userdata["avatar"] + '</center>');
    });
//]]>
</script>
                                <div>
                                    <span class="ipsType_minorHeading" style=" font-size: 10px; color: #666666;">MEMBRO MAIS NOVO</span><br>
                                    <span class="ipsType_normal" id="membroNovo">...</span><br>
                                  <span id="dataReg">Registrado em <span class="ipsType_small ipsType_light" id="dataReg1">...</span></span>
                                </div>
                            </div>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</div>
<style>
.demo td:last-child {
        width: 40% !important;
}
.ipsType_large, ipsType_minorHeading {
        color: #666666 !important;
        font-size: 20px;
}
ipsType_minorHeading {
        font-size: 10px !important;
}
.ipsType_light.ipsType_medium, #dataReg {
        color: #a4a4a4 !important;
}

.ipsType_center {
        padding-bottom: 10px;
        text-align: center !important;
        padding-top: 30px;
        height: 50px;
        margin-top: 0px;
}
.cNewestMember {
        margin-top: 20px;
        border-left: 1px solid silver;
}
.cNewestMember img {
        margin-top: -10px;
        border-radius: 50px;
        height: 44px;
        width: 44px;
        float: left;
        padding: 10px;
}
    .demo {
        width: 100%;
        height: 55px;
        border: 0px solid;
        border-collapse: separate;
        border-spacing: 1px;
    }
   
    .demo th {
        border: 0px solid;
    }
   
    .demo td {
        border: 0px solid;
    }
  span.legend  {
  width: 70%;
  border: 2px solid #DDD;
  border-radius: 6px;
  text-align: justify;
  padding: 15px 18px 15px 15px!important;
  display: block;
  margin: 0 auto;
  font-size: 0px;
  color: transparent;
}
.legend_group {
  -webkit-transition-duration: .3s;
  text-shadow: 0px 1px 1px #454545;
  font-size: 15px;
    margin-left:110px!important;
    margin-top:-25px!important;
  margin: 0 5px;
  font-style: normal;
  position:absolute;
  font-weight: normal;
} 
.legend_group {
text-align: center !important;
width: 61% !important;
}
</style>
<!-- FIM ESTATÍSTICAS IPB -->
                 
               


<!-- BEGIN switch_user_login_form_footer -->
<form action="{S_LOGIN_ACTION}" method="post" name="form_login">
 <div class="user_login_form main-box center">
 <label><span class="genmed">{L_USERNAME} :</span> <input class="post" type="text" size="10" name="username"/></label> 
 <label><span class="genmed">{L_PASSWORD} :</span> <input class="post" type="password" size="10" name="password"/></label> 
 <label><span class="gensmall">{L_AUTO_LOGIN}</span> <input class="radio" type="checkbox" name="autologin" {AUTOLOGIN_CHECKED} /></label> &nbsp;
 {S_HIDDEN_FIELDS}<input class="mainoption" type="submit" name="login" value="{L_LOGIN}" />
 <!-- BEGIN switch_fb_connect -->
 <span class="genmed fb_or">{switch_user_login_form_footer.switch_fb_connect.L_OR}</span>
 <fb:login-button size="large" onlogin="window.location='/facebook_connect.forum'" v="2" scope="{switch_user_login_form_footer.switch_fb_connect.L_FB_PERMISSIONS}">{switch_user_login_form_footer.switch_fb_connect.L_FB_LOGIN_BUTTON}</fb:login-button>
 <!-- END switch_fb_connect -->
 </div>
</form>
<!-- END switch_user_login_form_footer -->

{CHATBOX_BOTTOM}

<!-- BEGIN switch_legend -->

<!-- END switch_legend -->

{AUTO_DST}

<!-- BEGIN switch_fb_index_login -->
<div id="fb-root"></div>
<script type="text/javascript">
//<![CDATA[
FB.init({
 appId: '{switch_fb_index_login.FACEBOOK_APP_ID}',
 status: true,
 cookie: true,
 xfbml: true,
 oauth: true
});
//]]>
</script>
<!-- END switch_fb_index_login -->

Depois disto, crie um novo javascript com investimento no indice com esse código:

Código:

$(function() {
    var totalUsuarios = $('#totalUsers strong').text();
    var recordeUsuarios = $('#recordUsers strong').text();
    var novoMembro = $('#userNovo strong').html();
    $('#numeroMembros').text(totalUsuarios);
    $('#recordOnline').text(recordeUsuarios);
    $('#membroNovo').html(novoMembro);
 
    var urlMembro = $('#membroNovo a').attr('href');
    $.get(urlMembro, {}, function(data) {
        $('#dataReg1').html($(data).find('#field_id-4 .field_uneditable'));
        var userAvatar = $(data).find('#profile-advanced-right .main-content.clearfix.center img').attr('src');
        $('.cNewestMember img').attr('src', userAvatar);
    }).done(function() {
        $('#dataReg1 div').css('display', 'inline');
        console.log('Membro nas estatísticas carregado com sucesso!');
    }).fail(function() {
        $('#dataReg').hide();
    });
});

Até mais.

[PrisoN†BreaK]

Ficou bugado os grupos, e algumas parte bugou, marquei em preto:
https://imgur.com/a/KxfUn

Meu template antes da editação era esse:

Código:

{JAVASCRIPT}
<!-- BEGIN switch_user_logged_in -->
<div id="pun-visit" class="clearfix">
 <ul>
 <li><a href="{U_SEARCH_NEW}">{L_SEARCH_NEW}</a></li>
 <li><a href="{U_SEARCH_SELF}">{L_SEARCH_SELF}</a></li>
 <li><a href="{U_SEARCH_UNANSWERED}">{L_SEARCH_UNANSWERED}</a></li>
 <li><a href="{U_MARK_READ}">{L_MARK_FORUMS_READ}</a></li>
 </ul>
 <p>{LOGGED_AS}. {LAST_VISIT_DATE}</p>
</div>
<!-- END switch_user_logged_in -->
<!-- BEGIN switch_user_logged_out -->
<div id="pun-visit">
 <p>{L_NOT_CONNECTED} {L_LOGIN_REGISTER}</p>
</div>
<!-- END switch_user_logged_out -->

<!-- BEGIN message_admin_index -->
<div class="main">
 <!-- BEGIN message_admin_titre -->
 <div class="main-head">
 <h1 class="page-title">{message_admin_index.message_admin_titre.MES_TITRE}</h1>
 </div>
 <!-- END message_admin_titre -->

 <!-- BEGIN message_admin_txt -->
 <div id="pun-announcement">
 <p>{message_admin_index.message_admin_txt.MES_TXT}</p>
 </div>
 <!-- END message_admin_txt -->
</div>
<!-- END message_admin_index -->

<!-- BEGIN switch_user_login_form_header -->
<div class="main">
<form action="{S_LOGIN_ACTION}" method="post" name="form_login">
 <div class="user_login_form main-box center">
 <label><span class="genmed">{L_USERNAME} :</span> <input class="post" type="text" size="10" name="username" /></label> &nbsp;
 <label><span class="genmed">{L_PASSWORD} :</span> <input class="post" type="password" size="10" name="password" /></label> &nbsp;
 <label><span class="gensmall">{L_AUTO_LOGIN}</span> <input class="radio" type="checkbox" name="autologin" {AUTOLOGIN_CHECKED} /></label> &nbsp;
 {S_HIDDEN_FIELDS}<input class="mainoption" type="submit" name="login" value="{L_LOGIN}" />
 <!-- BEGIN switch_fb_connect -->
 <span class="fb_or">{switch_user_login_form_header.switch_fb_connect.L_OR}</span>
 <fb:login-button size="large" onlogin="window.location='/facebook_connect.forum'" v="2" scope="{switch_user_login_form_header.switch_fb_connect.L_FB_PERMISSIONS}">{switch_user_login_form_header.switch_fb_connect.L_FB_LOGIN_BUTTON}</fb:login-button>
 <!-- END switch_fb_connect -->
 </div>
</form>
</div>
<!-- END switch_user_login_form_header -->
<!-- BEGIN switch_user_logged_in -->
<div class="message">
 <h3>BEM VINDO </h3>
  Você está logado! Seja bem vindo novamente ao fórum, certifique-se que você vê as novas mensagens do fórum clicando <a href="/search?search_id=activetopics">aqui</a>
</div>
<!-- END switch_user_logged_in -->
<!-- BEGIN switch_user_logged_out -->
<div class="message">
 <h3>BEM VINDO VISITANTE</h3>
 Está neste momento a navegar no fórum como um visitante, limitando assim a sua navegação no site. Ao fazer o registo no Contra Ataque passará a ter à sua disponibilidade diversas funcionalidades, como comentar tópicos, criar votações, enviar mensagens privadas entre outras coisas. Faça parte da nossa comunidade, registe-se agora clicando <a href="http://www.contra-ataque.com/forum/index.php?app=core&amp;module=global&amp;section=register" class="bbc_url" title="">aqui</a>!
</div>
<!-- END switch_user_logged_out -->
{CHATBOX_TOP}
{BOARD_INDEX}



<!-- ESTATÍSTICAS IPB - HANCKI -->

<style>
.ipsWidget.ipsBox:not(.ipsBox_transparent){
    list-style-type:none;
    background-color: #ffffff;
    border: 1px solid #dadada;
    border-radius: 3px;
}
.ipsWidget_title {
    color: #FFF !important;
    background-color: #727272;
    background-image: linear-gradient(to bottom, rgba(255,255,255,0.4) 0%,rgba(255,255,255,0) 100%);
    padding: 11px 15px;
    font-size: 12px;
    font-weight: bold;
}
.ipsWidget_title a {
    color: #727272 !important;
    font-weight: bold;
}
.ipsPad {
        padding: 15px;
}
</style>
<div class="ipsWidget ipsWidget_horizontal ipsBox">
    <h3 class="ipsType_reset ipsWidget_title">
      <b>Quem Está Online</b>  <span class="ipsType_light ipsType_unbold ipsType_medium">{TOTAL_USERS_ONLINE}</span><span class="ipsType_medium ipsType_light ipsType_unbold ipsType_blendLinks"><a href="/viewonline">(lista completa)</a></span>
</h3>
    <div class="ipsWidget_inner ipsPad">
      {LOGGED_IN_USER_LIST}
    </div>
</div>
<br>

 
<div style="display:none;" id="totalUsers">{TOTAL_USERS}</div>
<div style="display:none;" id="recordUsers">{RECORD_USERS}</div>
<div style="display:none;" id="userNovo">{NEWEST_USER}</div>
 
<div class="ipsWidget ipsWidget_horizontal ipsBox">
    <h3 class="ipsType_reset ipsWidget_title"><b>Estatísticas de Usuários</b></h3>
    <div class="ipsWidget_inner">
        <div class="ipsGrid ipsGrid_collapsePhone ipsWidget_stats">
            <table class="demo">
                <tbody>
                    <tr>
                        <td>
                            <div class="ipsGrid_span4 ipsType_center">
                                <span class="ipsType_large ipsWidget_statsCount" id="numeroMembros">...</span><br>
                                <span class="ipsType_light ipsType_medium">Membros</span>
                            </div>
                        </td>
                        <td>
                            <div class="ipsGrid_span4 ipsType_center">
                                <span class="ipsType_large ipsWidget_statsCount" id="recordOnline">...</span><br>
                                <span class="ipsType_light ipsType_medium">Recorde Online</span>
                            </div>
                        </td>
                        <td>
                            <div class="ipsGrid_span4 ipsType_left ipsPhotoPanel ipsPhotoPanel_mini cNewestMember">
                                    <img src="http://i.imgur.com/Mpnxwg1.png">
                                <div>
                                    <span class="ipsType_minorHeading" style=" font-size: 10px; color: #666666;">MEMBRO MAIS NOVO</span><br>
                                    <span class="ipsType_normal" id="membroNovo">...</span><br>
                                  <span id="dataReg">Registro: <span class="ipsType_small ipsType_light" id="dataReg1">...</span></span>
                                </div>
                            </div>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</div>

<style>
.demo td:last-child {
        width: 40% !important;
}
.ipsType_large, ipsType_minorHeading {
        color: #666666 !important;
        font-size: 20px;
}
ipsType_minorHeading {
        font-size: 10px !important;
}
.ipsType_light.ipsType_medium, #dataReg {
        color: #000 !important;
}

.ipsType_center {
        padding-bottom: 10px;
        text-align: center !important;
        padding-top: 30px;
        height: 50px;
        margin-top: 0px;
}
.cNewestMember {
        margin-top: 20px;
        border-left: 1px solid silver;
}
.cNewestMember img {
        margin-top: -10px;
        border-radius: 50px;
        height: 44px;
        width: 44px;
        float: left;
        padding: 10px;
}
    .demo {
        width: 100%;
        height: 55px;
        border: 0px solid;
        border-collapse: separate;
        border-spacing: 1px;
    }
   
    .demo th {
        border: 0px solid;
    }
   
    .demo td {
        border: 0px solid;
    }
</style>
<!-- FIM ESTATÍSTICAS IPB - HANCKI -->
                 
               


<!-- BEGIN switch_user_login_form_footer -->
<form action="{S_LOGIN_ACTION}" method="post" name="form_login">
 <div class="user_login_form main-box center">
 <label><span class="genmed">{L_USERNAME} :</span> <input class="post" type="text" size="10" name="username"/></label> &nbsp;
 <label><span class="genmed">{L_PASSWORD} :</span> <input class="post" type="password" size="10" name="password"/></label> &nbsp;
 <label><span class="gensmall">{L_AUTO_LOGIN}</span> <input class="radio" type="checkbox" name="autologin" {AUTOLOGIN_CHECKED} /></label> &nbsp;
 {S_HIDDEN_FIELDS}<input class="mainoption" type="submit" name="login" value="{L_LOGIN}" />
 <!-- BEGIN switch_fb_connect -->
 <span class="genmed fb_or">{switch_user_login_form_footer.switch_fb_connect.L_OR}</span>
 <fb:login-button size="large" onlogin="window.location='/facebook_connect.forum'" v="2" scope="{switch_user_login_form_footer.switch_fb_connect.L_FB_PERMISSIONS}">{switch_user_login_form_footer.switch_fb_connect.L_FB_LOGIN_BUTTON}</fb:login-button>
 <!-- END switch_fb_connect -->
 </div>
</form>
<!-- END switch_user_login_form_footer -->

{CHATBOX_BOTTOM}

<!-- BEGIN switch_legend -->

<!-- END switch_legend -->

{AUTO_DST}

<!-- BEGIN switch_fb_index_login -->
<div id="fb-root"></div>
<script type="text/javascript">
//<![CDATA[
FB.init({
 appId: '{switch_fb_index_login.FACEBOOK_APP_ID}',
 status: true,
 cookie: true,
 xfbml: true,
 oauth: true
});
//]]>
</script>
<!-- END switch_fb_index_login -->
<style>td.tcl > img {
    margin-left: 0px!important;
}
</style>
                 
<script>
$(document).ready(function(){function tagprefixo(){jQuery('input[name=subject]').val(jQuery('select[name=tags4]').val()+jQuery('input[name=subject]').val())};jQuery(document).ready(function(){var sHtmlPrefx='<select name="tags4" onchange="tagprefixo()">'+'<option value="">'+'(sem prefixo)'+'</option>'+'<option value="[Aprovado]">'+'Aprovado'+'</option>'+'<option value="[Negado]">'+'Negado'+'</option>'+'<option value="[Doação]">'+'Doação'+'</option>'+'<option value="[Pedido]">'+'Pedido'+'</option>'+'<option value="[Concluído]">'+'Concluído'+'</option>'+'<option value="[Review]">'+'Review'+'</option>'+'<option value="[Notícia]">'+'Notícia'+'</option>'+'<option value="[Arquivado]">'+'Arquivado'+'</option>'+'<option value="[Importante]">'+'Importante'+'</option>'+'<option value="[Discussão]">'+'Discussão'+'</option>'+'<option value="[Rifa]">'+'Rifa'+'</option>'+'<option value="[Sugestão]">'+'Sugestão'+'</option>'+'<option value="[Dúvida]">'+'Dúvida'+'</option>'+'<option value="[Tutorial]">'+'Tutorial'+'</option>'+'</select> <img src="http://2img.net/i/fa/wysiwyg/separator.png" style="vertical-align:middle"> ';try{jQuery('input[name=subject]').after(sHtmlPrefx);var mode=jQuery('input[value=reply]').val();if(mode=='reply'){jQuery('select[name=tags4]').css('display','none')}else if(mode=='quote'){jQuery('select[name=tags4]').css('display','none')}}catch(e){if(typeof(console)!='undefined'){console.error(e)}}});
</script>
 

[while]

Ah sim, troque por este:

Código:

<style>
.tc1, .tcr, .pun table.table td {
  background: none !important;
  border: none !important;
}
 .tc2, .tc3 {
  background: none !important;
  border: none !important;
  color: #737C8D; 
  font-family: Arial, Helvetica, sans-serif;
  font-size: 16px;
  font-weight: 700;
  overflow: hidden;
  position: relative;
  text-align: center;
}
  #onlinelist .legend p {font-size:0;}
#onlinelist .legend p a {font-size: 11px!important;padding:2px;}
  #onlinelist .legend p a {margin:-138px;margin-left:140px;}
        #onlinelist .legend p {margin-top:-7px;}

.pun .statused tr {
    background: #f7f7f7;
    border: 1px solid #ddd;
}

.main .main-content {
    background: #FFF;
    border: 1px solid #ddd;
    box-shadow: 0 0 4px rgba(0,0,0,0.1);
    margin: 0;
    padding: 6px;
}
a.forumtitle {color: #666;font-weight: bold;text-decoration: none !important}
</style>
 

{JAVASCRIPT}
<!-- BEGIN switch_user_logged_in -->
<div id="pun-visit" class="clearfix">
 <ul>
 <li><a href="{U_SEARCH_NEW}">{L_SEARCH_NEW}</a></li>
 <li><a href="{U_SEARCH_SELF}">{L_SEARCH_SELF}</a></li>
 <li><a href="{U_SEARCH_UNANSWERED}">{L_SEARCH_UNANSWERED}</a></li>
 <li><a href="{U_MARK_READ}">{L_MARK_FORUMS_READ}</a></li>
 </ul>
 <p>{LOGGED_AS}. {LAST_VISIT_DATE}</p>
</div>
<!-- END switch_user_logged_in -->
<!-- BEGIN switch_user_logged_out -->
<div id="pun-visit">
 <p>{L_NOT_CONNECTED} {L_LOGIN_REGISTER}</p>
</div>
<!-- END switch_user_logged_out -->

<!-- BEGIN message_admin_index -->
<div class="main">
 <!-- BEGIN message_admin_titre -->
 <div class="main-head">
 <h1 class="page-title">{message_admin_index.message_admin_titre.MES_TITRE}</h1>
 </div>
 <!-- END message_admin_titre -->

 <!-- BEGIN message_admin_txt -->
 <div id="pun-announcement">
 <p>{message_admin_index.message_admin_txt.MES_TXT}</p>
 </div>
 <!-- END message_admin_txt -->
</div>
<!-- END message_admin_index -->

<!-- BEGIN switch_user_login_form_header -->
<div class="main">
<form action="{S_LOGIN_ACTION}" method="post" name="form_login">
 <div class="user_login_form main-box center">
 <label><span class="genmed">{L_USERNAME} :</span> <input class="post" type="text" size="10" name="username" /></label> 
 <label><span class="genmed">{L_PASSWORD} :</span> <input class="post" type="password" size="10" name="password" /></label> 
 <label><span class="gensmall">{L_AUTO_LOGIN}</span> <input class="radio" type="checkbox" name="autologin" {AUTOLOGIN_CHECKED} /></label> 
 {S_HIDDEN_FIELDS}<input class="mainoption" type="submit" name="login" value="{L_LOGIN}" />
 <!-- BEGIN switch_fb_connect -->
 <span class="fb_or">{switch_user_login_form_header.switch_fb_connect.L_OR}</span>
 <fb:login-button size="large" onlogin="window.location='/facebook_connect.forum'" v="2" scope="{switch_user_login_form_header.switch_fb_connect.L_FB_PERMISSIONS}">{switch_user_login_form_header.switch_fb_connect.L_FB_LOGIN_BUTTON}</fb:login-button>
 <!-- END switch_fb_connect -->
 </div>
</form>
</div>
<!-- END switch_user_login_form_header -->
{CHATBOX_TOP}
{BOARD_INDEX}



<!-- ESTATÍSTICAS IPB -->

<style>
.ipsWidget.ipsBox:not(.ipsBox_transparent){
    list-style-type:none;
    background-color: #ffffff;
    border: 1px solid #dadada;
    border-radius: 3px;
}
.ipsWidget_title {
    color: #727272 !important;
    background-color: #efefef;
    background-image: linear-gradient(to bottom, rgba(255,255,255,0.4) 0%,rgba(255,255,255,0) 100%);
    padding: 11px 15px;
    font-size: 12px;
    font-weight: bold;
}
.ipsWidget_title a {
    color: #727272 !important;
    font-weight: bold;
}
.ipsPad {
        padding: 15px;
}
</style>
<div class="ipsWidget ipsWidget_horizontal ipsBox">
    <h3 class="ipsType_reset ipsWidget_title">
      <b>Quem Está Online no Best Web?</b>  <span class="ipsType_light ipsType_unbold ipsType_medium">{TOTAL_USERS_ONLINE}</span><span class="ipsType_medium ipsType_light ipsType_unbold ipsType_blendLinks"><a href="/viewonline">(lista completa)</a></span>
</h3>
    <div class="ipsWidget_inner ipsPad">
      {LOGGED_IN_USER_LIST}
      {L_CONNECTED_MEMBERS}
<br>
      </br>
      <span class="legend"></span>
        <span class="legend_group">{GROUP_LEGEND}</span>
    </div>
</div>
<br>

 
<div style="display:none;" id="totalUsers">{TOTAL_USERS}</div>
<div style="display:none;" id="recordUsers">{RECORD_USERS}</div>
<div style="display:none;" id="userNovo">{NEWEST_USER}</div>
 
<div class="ipsWidget ipsWidget_horizontal ipsBox">
    <h3 class="ipsType_reset ipsWidget_title"><b>Estatísticas de Usuários</b></h3>
    <div class="ipsWidget_inner">
        <div class="ipsGrid ipsGrid_collapsePhone ipsWidget_stats">
            <table class="demo">
                <tbody>
                    <tr>
                        <td>
                            <div class="ipsGrid_span4 ipsType_center">
                                <span class="ipsType_large ipsWidget_statsCount" id="numeroMembros">...</span><br>
                                <span class="ipsType_light ipsType_medium">Membros</span>
                            </div>
                        </td>
                        <td>
                            <div class="ipsGrid_span4 ipsType_center">
                                <span class="ipsType_large ipsWidget_statsCount" id="recordOnline">...</span><br>
                                <span class="ipsType_light ipsType_medium">Recorde Online</span>
                            </div>
                        </td>
                        <td>
                            <div class="ipsGrid_span4 ipsType_left ipsPhotoPanel ipsPhotoPanel_mini cNewestMember">
                                    <span style="font-size: 1.2em;"  id="novomembro"></span>
<script type="text/javascript">
//<![CDATA[
    jQuery(function () {
        jQuery('#novomembro').html('<center>' + _userdata["avatar"] + '</center>');
    });
//]]>
</script>
                                <div>
                                    <span class="ipsType_minorHeading" style=" font-size: 10px; color: #666666;">MEMBRO MAIS NOVO</span><br>
                                    <span class="ipsType_normal" id="membroNovo">...</span><br>
                                  <span id="dataReg">Registrado em <span class="ipsType_small ipsType_light" id="dataReg1">...</span></span>
                                </div>
                            </div>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</div>
<style>
.demo td:last-child {
        width: 40% !important;
}
.ipsType_large, ipsType_minorHeading {
        color: #666666 !important;
        font-size: 20px;
}
ipsType_minorHeading {
        font-size: 10px !important;
}
.ipsType_light.ipsType_medium, #dataReg {
        color: #a4a4a4 !important;
}

.ipsType_center {
        padding-bottom: 10px;
        text-align: center !important;
        padding-top: 30px;
        height: 50px;
        margin-top: 0px;
}
.cNewestMember {
        margin-top: 20px;
        border-left: 1px solid silver;
}
.cNewestMember img {
        margin-top: -10px;
        border-radius: 50px;
        height: 44px;
        width: 44px;
        float: left;
        padding: 10px;
}
    .demo {
        width: 100%;
        height: 55px;
        border: 0px solid;
        border-collapse: separate;
        border-spacing: 1px;
    }
   
    .demo th {
        border: 0px solid;
    }
   
    .demo td {
        border: 0px solid;
    }
  span.legend  {
  width: 92%;
  border: 2px solid #DDD;
  border-radius: 6px;
  text-align: justify;
  padding: 15px 18px 15px 15px!important;
  display: block;
  margin: 0 auto;
  font-size: 0px;
  color: transparent;
}
.legend_group {
  -webkit-transition-duration: .3s;
  text-shadow: 0px 1px 1px #454545;
    font-size: 12px!important;
    margin-left:60px!important;
    margin-top:-25px!important;
  margin: 0 5px;
  font-style: normal;
  position:absolute;
  font-weight: normal;
} 
</style>
<!-- FIM ESTATÍSTICAS IPB -->
                 
               


<!-- BEGIN switch_user_login_form_footer -->
<form action="{S_LOGIN_ACTION}" method="post" name="form_login">
 <div class="user_login_form main-box center">
 <label><span class="genmed">{L_USERNAME} :</span> <input class="post" type="text" size="10" name="username"/></label> 
 <label><span class="genmed">{L_PASSWORD} :</span> <input class="post" type="password" size="10" name="password"/></label> 
 <label><span class="gensmall">{L_AUTO_LOGIN}</span> <input class="radio" type="checkbox" name="autologin" {AUTOLOGIN_CHECKED} /></label> &nbsp;
 {S_HIDDEN_FIELDS}<input class="mainoption" type="submit" name="login" value="{L_LOGIN}" />
 <!-- BEGIN switch_fb_connect -->
 <span class="genmed fb_or">{switch_user_login_form_footer.switch_fb_connect.L_OR}</span>
 <fb:login-button size="large" onlogin="window.location='/facebook_connect.forum'" v="2" scope="{switch_user_login_form_footer.switch_fb_connect.L_FB_PERMISSIONS}">{switch_user_login_form_footer.switch_fb_connect.L_FB_LOGIN_BUTTON}</fb:login-button>
 <!-- END switch_fb_connect -->
 </div>
</form>
<!-- END switch_user_login_form_footer -->

{CHATBOX_BOTTOM}

<!-- BEGIN switch_legend -->

<!-- END switch_legend -->

{AUTO_DST}

<!-- BEGIN switch_fb_index_login -->
<div id="fb-root"></div>
<script type="text/javascript">
//<![CDATA[
FB.init({
 appId: '{switch_fb_index_login.FACEBOOK_APP_ID}',
 status: true,
 cookie: true,
 xfbml: true,
 oauth: true
});
//]]>
</script>
<!-- END switch_fb_index_login -->
<script>
$(document).ready(function(){function tagprefixo(){jQuery('input[name=subject]').val(jQuery('select[name=tags4]').val()+jQuery('input[name=subject]').val())};jQuery(document).ready(function(){var sHtmlPrefx='<select name="tags4" onchange="tagprefixo()">'+'<option value="">'+'(sem prefixo)'+'</option>'+'<option value="[Aprovado]">'+'Aprovado'+'</option>'+'<option value="[Negado]">'+'Negado'+'</option>'+'<option value="[Doação]">'+'Doação'+'</option>'+'<option value="[Pedido]">'+'Pedido'+'</option>'+'<option value="[Concluído]">'+'Concluído'+'</option>'+'<option value="[Review]">'+'Review'+'</option>'+'<option value="[Notícia]">'+'Notícia'+'</option>'+'<option value="[Arquivado]">'+'Arquivado'+'</option>'+'<option value="[Importante]">'+'Importante'+'</option>'+'<option value="[Discussão]">'+'Discussão'+'</option>'+'<option value="[Rifa]">'+'Rifa'+'</option>'+'<option value="[Sugestão]">'+'Sugestão'+'</option>'+'<option value="[Dúvida]">'+'Dúvida'+'</option>'+'<option value="[Tutorial]">'+'Tutorial'+'</option>'+'</select> <img src="http://2img.net/i/fa/wysiwyg/separator.png" style="vertical-align:middle"> ';try{jQuery('input[name=subject]').after(sHtmlPrefx);var mode=jQuery('input[value=reply]').val();if(mode=='reply'){jQuery('select[name=tags4]').css('display','none')}else if(mode=='quote'){jQuery('select[name=tags4]').css('display','none')}}catch(e){if(typeof(console)!='undefined'){console.error(e)}}});
</script>

Seria assim?
Até mais.

[PrisoN†BreaK]

Meio que ainda ta bugado, e causou um bug nas categorias, que ficou colado na barra:

Como você pode ver, antes:

https://imgur.com/zt7W9pY

Depois do bug:

https://imgur.com/v9lWKD4

O Avatar ficou bugado e os grupos também, se você poder tira ''[]'' que separa os grupos e coloca ''•'' entre cada um deles, eu agradeço.

[while]

Ah só, troque por este:

Código:

<style>
  #onlinelist .legend p {font-size:0;}
#onlinelist .legend p a {font-size: 11px!important;padding:2px;}
  #onlinelist .legend p a {margin:-138px;margin-left:140px;}
        #onlinelist .legend p {margin-top:-7px;}
</style>
 

{JAVASCRIPT}
<!-- BEGIN switch_user_logged_in -->
<div id="pun-visit" class="clearfix">
 <ul>
 <li><a href="{U_SEARCH_NEW}">{L_SEARCH_NEW}</a></li>
 <li><a href="{U_SEARCH_SELF}">{L_SEARCH_SELF}</a></li>
 <li><a href="{U_SEARCH_UNANSWERED}">{L_SEARCH_UNANSWERED}</a></li>
 <li><a href="{U_MARK_READ}">{L_MARK_FORUMS_READ}</a></li>
 </ul>
 <p>{LOGGED_AS}. {LAST_VISIT_DATE}</p>
</div>
<!-- END switch_user_logged_in -->
<!-- BEGIN switch_user_logged_out -->
<div id="pun-visit">
 <p>{L_NOT_CONNECTED} {L_LOGIN_REGISTER}</p>
</div>
<!-- END switch_user_logged_out -->

<!-- BEGIN message_admin_index -->
<div class="main">
 <!-- BEGIN message_admin_titre -->
 <div class="main-head">
 <h1 class="page-title">{message_admin_index.message_admin_titre.MES_TITRE}</h1>
 </div>
 <!-- END message_admin_titre -->

 <!-- BEGIN message_admin_txt -->
 <div id="pun-announcement">
 <p>{message_admin_index.message_admin_txt.MES_TXT}</p>
 </div>
 <!-- END message_admin_txt -->
</div>
<!-- END message_admin_index -->

<!-- BEGIN switch_user_login_form_header -->
<div class="main">
<form action="{S_LOGIN_ACTION}" method="post" name="form_login">
 <div class="user_login_form main-box center">
 <label><span class="genmed">{L_USERNAME} :</span> <input class="post" type="text" size="10" name="username" /></label> 
 <label><span class="genmed">{L_PASSWORD} :</span> <input class="post" type="password" size="10" name="password" /></label> 
 <label><span class="gensmall">{L_AUTO_LOGIN}</span> <input class="radio" type="checkbox" name="autologin" {AUTOLOGIN_CHECKED} /></label> 
 {S_HIDDEN_FIELDS}<input class="mainoption" type="submit" name="login" value="{L_LOGIN}" />
 <!-- BEGIN switch_fb_connect -->
 <span class="fb_or">{switch_user_login_form_header.switch_fb_connect.L_OR}</span>
 <fb:login-button size="large" onlogin="window.location='/facebook_connect.forum'" v="2" scope="{switch_user_login_form_header.switch_fb_connect.L_FB_PERMISSIONS}">{switch_user_login_form_header.switch_fb_connect.L_FB_LOGIN_BUTTON}</fb:login-button>
 <!-- END switch_fb_connect -->
 </div>
</form>
</div>
<!-- END switch_user_login_form_header -->
{CHATBOX_TOP}
{BOARD_INDEX}



<!-- ESTATÍSTICAS IPB -->

<style>
.ipsWidget.ipsBox:not(.ipsBox_transparent){
    list-style-type:none;
    background-color: #ffffff;
    border: 1px solid #dadada;
    border-radius: 3px;
}
.ipsWidget_title {
    color: #727272 !important;
    background-color: #efefef;
    background-image: linear-gradient(to bottom, rgba(255,255,255,0.4) 0%,rgba(255,255,255,0) 100%);
    padding: 11px 15px;
    font-size: 12px;
    font-weight: bold;
}
.ipsWidget_title a {
    color: #727272 !important;
    font-weight: bold;
}
.ipsPad {
        padding: 15px;
}
</style>
<div class="ipsWidget ipsWidget_horizontal ipsBox">
    <h3 class="ipsType_reset ipsWidget_title">
      <b>Quem Está Online no Best Web?</b>  <span class="ipsType_light ipsType_unbold ipsType_medium">{TOTAL_USERS_ONLINE}</span><span class="ipsType_medium ipsType_light ipsType_unbold ipsType_blendLinks"><a href="/viewonline">(lista completa)</a></span>
</h3>
    <div class="ipsWidget_inner ipsPad">
      {LOGGED_IN_USER_LIST}
      {L_CONNECTED_MEMBERS}
<br>
      </br>
      <span class="legend"></span>
        <span class="legend_group">{GROUP_LEGEND}</span>
    </div>
</div>
<br>

 
<div style="display:none;" id="totalUsers">{TOTAL_USERS}</div>
<div style="display:none;" id="recordUsers">{RECORD_USERS}</div>
<div style="display:none;" id="userNovo">{NEWEST_USER}</div>
 
<div class="ipsWidget ipsWidget_horizontal ipsBox">
    <h3 class="ipsType_reset ipsWidget_title"><b>Estatísticas de Usuários</b></h3>
    <div class="ipsWidget_inner">
        <div class="ipsGrid ipsGrid_collapsePhone ipsWidget_stats">
            <table class="demo">
                <tbody>
                    <tr>
                        <td>
                            <div class="ipsGrid_span4 ipsType_center">
                                <span class="ipsType_large ipsWidget_statsCount" id="numeroMembros">...</span><br>
                                <span class="ipsType_light ipsType_medium">Membros</span>
                            </div>
                        </td>
                        <td>
                            <div class="ipsGrid_span4 ipsType_center">
                                <span class="ipsType_large ipsWidget_statsCount" id="recordOnline">...</span><br>
                                <span class="ipsType_light ipsType_medium">Recorde Online</span>
                            </div>
                        </td>
                        <td>
                            <div class="ipsGrid_span4 ipsType_left ipsPhotoPanel ipsPhotoPanel_mini cNewestMember">
                                    <img src="http://i.imgur.com/Mpnxwg1.png">
                                <div>
                                    <span class="ipsType_minorHeading" style=" font-size: 10px; color: #666666;">MEMBRO MAIS NOVO</span><br>
                                    <span class="ipsType_normal" id="membroNovo">...</span><br>
                                  <span id="dataReg">Registro: <span class="ipsType_small ipsType_light" id="dataReg1">...</span></span>
                                </div>
                            </div>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</div>
<style>
.demo td:last-child {
        width: 40% !important;
}
.ipsType_large, ipsType_minorHeading {
        color: #666666 !important;
        font-size: 20px;
}
ipsType_minorHeading {
        font-size: 10px !important;
}
.ipsType_light.ipsType_medium, #dataReg {
        color: #a4a4a4 !important;
}

.ipsType_center {
        padding-bottom: 10px;
        text-align: center !important;
        padding-top: 30px;
        height: 50px;
        margin-top: 0px;
}
.cNewestMember {
        margin-top: 20px;
        border-left: 1px solid silver;
}
.cNewestMember img {
        margin-top: -10px;
        border-radius: 50px;
        height: 44px;
        width: 44px;
        float: left;
        padding: 10px;
}
    .demo {
        width: 100%;
        height: 55px;
        border: 0px solid;
        border-collapse: separate;
        border-spacing: 1px;
    }
   
    .demo th {
        border: 0px solid;
    }
   
    .demo td {
        border: 0px solid;
    }
  span.legend  {
    width: 98%;
    margin-left: -9px!important;
  border: 2px solid #DDD;
  border-radius: 6px;
  text-align: justify;
  padding: 15px 18px 15px 15px!important;
  display: block;
  margin: 0 auto;
  font-size: 0px;
  color: transparent;
}
.legend_group {
  -webkit-transition-duration: .3s;
  text-shadow: 0px 1px 1px #454545;
    font-size: 12px!important;
    margin-left:30px!important;
    margin-top:-25px!important;
  margin: 0 5px;
  font-style: normal;
  position:absolute;
  font-weight: normal;
} 
</style>
<!-- FIM ESTATÍSTICAS IPB -->
                 
               


<!-- BEGIN switch_user_login_form_footer -->
<form action="{S_LOGIN_ACTION}" method="post" name="form_login">
 <div class="user_login_form main-box center">
 <label><span class="genmed">{L_USERNAME} :</span> <input class="post" type="text" size="10" name="username"/></label> 
 <label><span class="genmed">{L_PASSWORD} :</span> <input class="post" type="password" size="10" name="password"/></label> 
 <label><span class="gensmall">{L_AUTO_LOGIN}</span> <input class="radio" type="checkbox" name="autologin" {AUTOLOGIN_CHECKED} /></label> &nbsp;
 {S_HIDDEN_FIELDS}<input class="mainoption" type="submit" name="login" value="{L_LOGIN}" />
 <!-- BEGIN switch_fb_connect -->
 <span class="genmed fb_or">{switch_user_login_form_footer.switch_fb_connect.L_OR}</span>
 <fb:login-button size="large" onlogin="window.location='/facebook_connect.forum'" v="2" scope="{switch_user_login_form_footer.switch_fb_connect.L_FB_PERMISSIONS}">{switch_user_login_form_footer.switch_fb_connect.L_FB_LOGIN_BUTTON}</fb:login-button>
 <!-- END switch_fb_connect -->
 </div>
</form>
<!-- END switch_user_login_form_footer -->

{CHATBOX_BOTTOM}

<!-- BEGIN switch_legend -->

<!-- END switch_legend -->

{AUTO_DST}

<!-- BEGIN switch_fb_index_login -->
<div id="fb-root"></div>
<script type="text/javascript">
//<![CDATA[
FB.init({
 appId: '{switch_fb_index_login.FACEBOOK_APP_ID}',
 status: true,
 cookie: true,
 xfbml: true,
 oauth: true
});
//]]>
</script>
<!-- END switch_fb_index_login -->
<script>
$(document).ready(function(){function tagprefixo(){jQuery('input[name=subject]').val(jQuery('select[name=tags4]').val()+jQuery('input[name=subject]').val())};jQuery(document).ready(function(){var sHtmlPrefx='<select name="tags4" onchange="tagprefixo()">'+'<option value="">'+'(sem prefixo)'+'</option>'+'<option value="[Aprovado]">'+'Aprovado'+'</option>'+'<option value="[Negado]">'+'Negado'+'</option>'+'<option value="[Doação]">'+'Doação'+'</option>'+'<option value="[Pedido]">'+'Pedido'+'</option>'+'<option value="[Concluído]">'+'Concluído'+'</option>'+'<option value="[Review]">'+'Review'+'</option>'+'<option value="[Notícia]">'+'Notícia'+'</option>'+'<option value="[Arquivado]">'+'Arquivado'+'</option>'+'<option value="[Importante]">'+'Importante'+'</option>'+'<option value="[Discussão]">'+'Discussão'+'</option>'+'<option value="[Rifa]">'+'Rifa'+'</option>'+'<option value="[Sugestão]">'+'Sugestão'+'</option>'+'<option value="[Dúvida]">'+'Dúvida'+'</option>'+'<option value="[Tutorial]">'+'Tutorial'+'</option>'+'</select> <img src="http://2img.net/i/fa/wysiwyg/separator.png" style="vertical-align:middle"> ';try{jQuery('input[name=subject]').after(sHtmlPrefx);var mode=jQuery('input[value=reply]').val();if(mode=='reply'){jQuery('select[name=tags4]').css('display','none')}else if(mode=='quote'){jQuery('select[name=tags4]').css('display','none')}}catch(e){if(typeof(console)!='undefined'){console.error(e)}}});
</script>

Agora acredito que ficou certo, no meu monitor está diferente do que o seu :/

Até mais.

[PrisoN†BreaK]

Agora ficou certo, só um porém, as cores do grupo, como faço? E o avatar quadrado, da pra coloca?

[while]

Sobre as cores do grupo procure em sua folha de estilo css por:

.pun a, .pun a:link, .pun a:visited, a

E tará assim:

.pun a, .pun a:link, .pun a:visited, a {
color: #00569C!important;
}

Só retira o !important
ou seja, deve ficar assim:

.pun a, .pun a:link, .pun a:visited, a {
color: #00569C;
}

Sobre o avatar estar em formato de circulo, adicione esse código em sua folha de estilo css:

.cNewestMember img {border-radius: 0px!important;}

Até mais.

[PrisoN†BreaK]

Resolvido, obrigado.

[while]

Questão marcada como Resolvida ou o Autor solicitou que ela fosse arquivada. Tópico marcado como Resolvido e movido para "Questões resolvidas".