Estatísticas e grupos no estilo ModernBB

Detalhes da questão

Endereço do fórum: http://www.brasilplayultimate.com.br
Versão do fórum: PunBB

Descrição

Bom, gostaria dessas estatisticas: http://prntscr.com/gld8e5
Só que sem retirar o seguinte marcado: http://prntscr.com/gld8r0

Se possível aparecer também a lista dos membros que farão aniversário no fórum.

Desde já agradeço.
Meu index_body:

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 {
    border: 1px solid #ddd;
    border-left: solid 2px #f5f5f5!important;
}
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>
  .ipsBox,
  .ipsPad {
  padding: 0px;
  }
 
.ipsWidget.ipsBox:not(.ipsBox_transparent){
    list-style-type:none;
    background-color: #ffffff;
    border: 1px solid #dadada;
    border-radius: 3px;
}
.ipsWidget_title {
    background: #2ea3f2 url(http://i.imgur.com/CcLIuMn.png);
    box-shadow: inset 0 0 1px 1px rgba(0,0,0,.1);
    color: #fff;
    line-height: 17px;
    text-indent: -4px;
    text-shadow: 0 1px 1px rgba(0,0,0,0.2);
    padding: 11px 15px;
}
 
.ipsWidget_title a {
    color: #727272 !important;
    font-weight: bold;
}
.ipsPad {
        padding: 16px;
}
.ipsWidget_groups {
    background: #2ea3f2 url(http://i.imgur.com/CcLIuMn.png);
    box-shadow: inset 0 0 1px 1px rgba(0,0,0,.1);
    color: #fff;
    line-height: 17px;
    text-indent: -4px;
    text-shadow: 0 1px 1px rgba(0,0,0,0.2);
    padding: 6px 19px;
    width: 99.7%;
    margin-left: -17px;
}
  .ipsWidget_groups a {
    color: #727272 !important;
    font-weight: bold;
}
</style>
<div class="ipsWidget ipsWidget_horizontal ipsBox">
    <h3 class="ipsType_reset ipsWidget_title">
      <b><i style="font-size: 14px;" class="fa fa-user fa-fw"></i>Usuários 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}
      {L_CONNECTED_MEMBERS}
<br>
      </br>
     
        <div class="ipsWidget ipsWidget_horizontal ipsGroups">
    <h3 class="ipsType_reset ipsWidget_groups">
      <b><i style="font-size: 14px;" class="fa fa-users fa-fw"></i> Grupos do Fórum</b>
          </h3>
          <p class="leyenda_css">{GROUP_LEGEND}</p>
      </div>
    </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><i style="font-size: 14px;" class="fa fa-bar-chart-o fa-fw"></i> 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_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 -->
              <style>table > thead {display: none;}</style>

Acho que seria mais fácil migrar para ModernBB. .-.

---

Troque o template por este para acertarmos os estilos:

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 {
    border: 1px solid #ddd;
    border-left: solid 2px #f5f5f5!important;
}
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>
  .ipsBox,
  .ipsPad {
  padding: 0px;
  }
 
.ipsWidget.ipsBox:not(.ipsBox_transparent){
    list-style-type:none;
    background-color: #ffffff;
    border: 1px solid #dadada;
    border-radius: 3px;
}
.ipsWidget_title {
    background: #2ea3f2 url(http://i.imgur.com/CcLIuMn.png);
    box-shadow: inset 0 0 1px 1px rgba(0,0,0,.1);
    color: #fff;
    line-height: 17px;
    text-indent: -4px;
    text-shadow: 0 1px 1px rgba(0,0,0,0.2);
    padding: 11px 15px;
}
 
.ipsWidget_title a {
    color: #727272 !important;
    font-weight: bold;
}
.ipsPad {
        padding: 16px;
}
.ipsWidget_groups {
    background: #2ea3f2 url('http://i.imgur.com/CcLIuMn.png');
    box-shadow: inset 0 0 1px 1px rgba(0,0,0,.1);
    color: #fff;
    line-height: 17px;
    text-indent: -4px;
    text-shadow: 0 1px 1px rgba(0,0,0,0.2);
    padding: 6px 19px;
    width: 99.7%;
    margin-left: -17px;
}
  .ipsWidget_groups a {
    color: #727272 !important;
    font-weight: bold;
}
</style>

<div class="fa-stats">
  <h3 class="fa-stats-header">
    <i class="fa fa-bar-chart"></i> Quem está conectado?
  </h3>
  <main class="fa-stats-content">
    {TOTAL_USERS_ONLINE}<br />
      {RECORD_USERS}

      {LOGGED_IN_USER_LIST}

      {L_ONLINE_USERS}
      {L_CONNECTED_MEMBERS}<br />

      {L_WHOSBIRTHDAY_TODAY}{L_WHOSBIRTHDAY_WEEK}

      <div class="block-footer">
      <strong>{LEGEND}:</strong>&nbsp;{GROUP_LEGEND}
    </div>
  </main>
</div>

<div class="ipsWidget ipsWidget_horizontal ipsBox">
    <h3 class="ipsType_reset ipsWidget_title"><b><i style="font-size: 14px;" class="fa fa-bar-chart-o fa-fw"></i> 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_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 -->
              <style>table > thead {display: none;}</style>

o/

Luiz escreveu:Acho que seria mais fácil migrar para ModernBB. .-.

---

Troque o template por este para acertarmos os estilos:

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 {
    border: 1px solid #ddd;
    border-left: solid 2px #f5f5f5!important;
}
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>
  .ipsBox,
  .ipsPad {
  padding: 0px;
  }
 
.ipsWidget.ipsBox:not(.ipsBox_transparent){
    list-style-type:none;
    background-color: #ffffff;
    border: 1px solid #dadada;
    border-radius: 3px;
}
.ipsWidget_title {
    background: #2ea3f2 url(http://i.imgur.com/CcLIuMn.png);
    box-shadow: inset 0 0 1px 1px rgba(0,0,0,.1);
    color: #fff;
    line-height: 17px;
    text-indent: -4px;
    text-shadow: 0 1px 1px rgba(0,0,0,0.2);
    padding: 11px 15px;
}
 
.ipsWidget_title a {
    color: #727272 !important;
    font-weight: bold;
}
.ipsPad {
        padding: 16px;
}
.ipsWidget_groups {
    background: #2ea3f2 url('http://i.imgur.com/CcLIuMn.png');
    box-shadow: inset 0 0 1px 1px rgba(0,0,0,.1);
    color: #fff;
    line-height: 17px;
    text-indent: -4px;
    text-shadow: 0 1px 1px rgba(0,0,0,0.2);
    padding: 6px 19px;
    width: 99.7%;
    margin-left: -17px;
}
  .ipsWidget_groups a {
    color: #727272 !important;
    font-weight: bold;
}
</style>

<div class="fa-stats">
  <h3 class="fa-stats-header">
    <i class="fa fa-bar-chart"></i> Quem está conectado?
  </h3>
  <main class="fa-stats-content">
    {TOTAL_USERS_ONLINE}<br />
      {RECORD_USERS}

      {LOGGED_IN_USER_LIST}

      {L_ONLINE_USERS}
      {L_CONNECTED_MEMBERS}<br />

      {L_WHOSBIRTHDAY_TODAY}{L_WHOSBIRTHDAY_WEEK}

      <div class="block-footer">
      <strong>{LEGEND}:</strong>&nbsp;{GROUP_LEGEND}
    </div>
  </main>
</div>

<div class="ipsWidget ipsWidget_horizontal ipsBox">
    <h3 class="ipsType_reset ipsWidget_title"><b><i style="font-size: 14px;" class="fa fa-bar-chart-o fa-fw"></i> 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_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 -->
              <style>table > thead {display: none;}</style>

o/

Até pensei, mas em fase beta, algumas coisas não me agradaram lá e alguns códigos não são compatíveis com tal tema, ai acaba se debatendo, fica difícil de mudar por agora, deixarei pra pensar isso mais pra frente.
Enfim, adicionei, mas lembrando que bugou:
http://prntscr.com/glktlc

---
Edit:
Pode deixar, o CSS já resolvi kkk, deixei ele igual ao do modernbb, só precisava do template.
Agora dá pra resolver o meu caso das estatisticas?

Apaguei coisa que não devia.
Troque por:

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 {
    border: 1px solid #ddd;
    border-left: solid 2px #f5f5f5!important;
}
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>
  .ipsBox,
  .ipsPad {
  padding: 0px;
  }
 
.ipsWidget.ipsBox:not(.ipsBox_transparent){
    list-style-type:none;
    background-color: #ffffff;
    border: 1px solid #dadada;
    border-radius: 3px;
}
.ipsWidget_title {
    background: #2ea3f2 url(http://i.imgur.com/CcLIuMn.png);
    box-shadow: inset 0 0 1px 1px rgba(0,0,0,.1);
    color: #fff;
    line-height: 17px;
    text-indent: -4px;
    text-shadow: 0 1px 1px rgba(0,0,0,0.2);
    padding: 11px 15px;
}
 
.ipsWidget_title a {
    color: #727272 !important;
    font-weight: bold;
}
.ipsPad {
        padding: 16px;
}
.ipsWidget_groups {
    background: #2ea3f2 url('http://i.imgur.com/CcLIuMn.png');
    box-shadow: inset 0 0 1px 1px rgba(0,0,0,.1);
    color: #fff;
    line-height: 17px;
    text-indent: -4px;
    text-shadow: 0 1px 1px rgba(0,0,0,0.2);
    padding: 6px 19px;
    width: 99.7%;
    margin-left: -17px;
}
  .ipsWidget_groups a {
    color: #727272 !important;
    font-weight: bold;
}
</style>

<div class="fa-stats">
  <h3 class="fa-stats-header">
    <i class="fa fa-bar-chart"></i> Quem está conectado?
  </h3>
  <main class="fa-stats-content">
    {TOTAL_USERS_ONLINE}<br />
      {RECORD_USERS}

      {LOGGED_IN_USER_LIST}

      {L_ONLINE_USERS}
      {L_CONNECTED_MEMBERS}<br />

      {L_WHOSBIRTHDAY_TODAY}{L_WHOSBIRTHDAY_WEEK}

      <div class="block-footer">
      <strong>{LEGEND}:</strong>&nbsp;{GROUP_LEGEND}
    </div>
  </main>
</div>

<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><i style="font-size: 14px;" class="fa fa-bar-chart-o fa-fw"></i> 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_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 -->
              <style>table > thead {display: none;}</style>

o/

Certo, mais uma coisa. Seria possível substituir os "[ e ]" por virgulas?
http://prntscr.com/glkzaa

Adicione ao final de sua CSS:

Código:

.fa-stats .block-footer {
  font-size: 0;
}

.fa-stats .block-footer::before {
  content: "Grupos :";
  font-size: 13px;
  margin-right: 7px;
}

.fa-stats .block-footer b > a {
  font-size: 13px;
}

.fa-stats .block-footer b > a::after {
  content: ",";
  margin-right: 7px;
  font-weight: 500;
  color: #555;
}

.fa-stats .block-footer b:last-child > a::after {
  content: "";
}

o/

Luiz escreveu:Adicione ao final de sua CSS:

Código:

.fa-stats .block-footer {
  font-size: 0;
}

.fa-stats .block-footer::before {
  content: "Grupos :";
  font-size: 13px;
  margin-right: 7px;
}

.fa-stats .block-footer b > a {
  font-size: 13px;
}

.fa-stats .block-footer b > a::after {
  content: ",";
  margin-right: 7px;
  font-weight: 500;
  color: #555;
}

.fa-stats .block-footer b:last-child > a::after {
  content: "";
}

o/

Dilmais sô kkk
Valeu Luiz <3

Às ordens.