Personalizar as estatísticas do fórum

[Stonay]

Detalhes da dúvida

Versão do fórum : PunBB
Nível de acesso : Fundador
Navegador usado : Google Chrome
Membros afetados : Todos os membros do fórum
Endereço do fórum : http://stonecraft.forumeiros.eu

Descrição do problema

Estou precisando arrumar isto:

Como quero deixar:

[Shek]

Olá!

Leia este tutorial: https://ajuda.forumeiros.com/t93958-

Atenciosamente,
Shek

Tópico movido de 'Questões sobre a aparência do fórum' para 'Questões sobre JavaScript & jQuery'

[Stonay]

Como ficou


@EDIT
Mas acho que fiz coisa errada, poderia alterar em meu Index? Aqui está:

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 -->

{CHATBOX_TOP}
{BOARD_INDEX}
<div id="board_stats">
<ul class="ipsType_small">
<li><span class="FORUMCOUNTPOST"></span>&nbsp;Total Posts</li>
<li><span class="FORUMCOUNTUSER"></span>&nbsp;Total Members</li>
<li><span class="FORUMLASTUSER"></span>&nbsp;Newest Member</li>
<li><span class="FORUMONLINEUSER"></span>&nbsp;Most Online</li>
</ul>
</div>
<!-- BEGIN disable_viewonline -->
<div class="board-title-line"><p>{RECORD_USERS}</p><ul><li><a href="/search?search_id=activetopics">Temas activos del día</a></li><li><a href="/memberlist?mode=today_posters">Top 20 posteadores hoy</a></li><li><a href="/memberlist?mode=overall_posters">Top 20 posteadores del foro</a></li></ul></div>
<div id="pun-info-ipb" class="main">
<div class="main-content">
<div id="onlinelist">
<p>{TOTAL_USERS_ONLINE}
<br />
{LOGGED_IN_USER_LIST}

{L_ONLINE_USERS}
{L_CONNECTED_MEMBERS}<br />
{L_WHOSBIRTHDAY_TODAY}{L_WHOSBIRTHDAY_WEEK}</p>
<div class="clear"></div>

<p>{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>
<!-- END disable_viewonline -->

<!-- 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}

{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 -->

[Shek]

Você aplicou o CSS?

[Stonay]

Sim.

[Stonay]

UP

[Stonay]

Alguém?...

[Stonay]

up

[iPlay]

Olá amigo, troque seu Index_body por este e diga-nos se resulta.

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 -->

{CHATBOX_TOP}
{BOARD_INDEX}
<script>
  $(document).ready(function(){
var rdtOn = $('.rdtOn strong').html();
var lastUser = $('.lastUser strong').html();
var totalUser = $('.totalUser strong').html();
var totalPost = $('.totalPost strong').html();
 
 
$('ul.statsPers').prepend('
<li><span>'+totalPost+'</span> Total de posts</li>
<li><span>'+totalUser+'</span> Total de membros</li>
<li><span>'+lastUser+'</span> Membro mais novo</li>
<li><span>'+rdtOn+'</span> Recorde de usuários online</li>
');
 

});
</script>
 <div id="statistics">
                  <br />
                  <ul class="statsPers">
                    <li class="statHide rdtOn">Recorde de Usuários Online: {RECORD_USERS}</li>
                    <li class="statHide lastUser">Membro Mais Novo: {NEWEST_USER}</li>
                    <li class="statHide totalUser">Membros: {TOTAL_USERS}</li>
                    <li class="statHide totalPost">Posts: {TOTAL_POSTS}</li>
                  </ul>
              <br />
        
          </div>
<!-- BEGIN disable_viewonline -->
<div class="board-title-line"><p>{RECORD_USERS}</p><ul><li><a href="/search?search_id=activetopics">Temas activos del día</a></li><li><a href="/memberlist?mode=today_posters">Top 20 posteadores hoy</a></li><li><a href="/memberlist?mode=overall_posters">Top 20 posteadores del foro</a></li></ul></div>
<div id="pun-info-ipb" class="main">
<div class="main-content">
<div id="onlinelist">
<p>{TOTAL_USERS_ONLINE}
<br />
{LOGGED_IN_USER_LIST}

{L_ONLINE_USERS}
{L_CONNECTED_MEMBERS}<br />
{L_WHOSBIRTHDAY_TODAY}{L_WHOSBIRTHDAY_WEEK}</p>
<div class="clear"></div>

<p>{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>
<!-- END disable_viewonline -->

<!-- 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}

{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 -->

Em seguida, adicione este CSS:

Código:

.statsPers li > span { -moz-border-radius: 3px; -webkit-border-radius: 3px; background: rgba(0,0,0,0.1); border-radius: 3px; color: #222; display: inline-block; font-weight: 700; margin-right: 3px; padding: 3px 7px; text-shadow: rgba(255,255,255,0.6) 0 1px 0; }
.statsPers li {
  color: #666;
  float: left;
  margin: 2px 10px;
}
.statsPers { display: block; list-style: none; margin: 0 auto; width: 100%; }
#statistics { background: none; display: table; margin: 0 auto!important; text-align: center!important; }


Lhe agrada?

[Stonay]

Como ficou:

Bom, não gostei muito mas caso você não consiga me ajudar neste, posso ficar com esse mesmo.
É possível deixar como eu quero? Ou não?

[iPlay]

Você adicionou o CSS que lhe passei?
Poderia deixar o código ativo em seu fórum? Pois o mesmo está quase pronto basta utilizar o CSS.
Caso tenha adicionado e não tenha resultados, veja o @Edit abaixo.

@Edit: Troque seu index_body por este:

index_body:

Resulta no desejado?

[Stonay]

Bom, eu alterei o Index_body e resultou. Mas não coloquei o CSS. É necessário colocar ele?

[iPlay]

Sim amigo, pois o CSS é o que dá a aparência ao efeito ao qual desejas.
Adicione o CSS e diga-nos se resolveste teu problema.

[Stonay]

Bom, coloquei o código e não alterou em nada..

[iPlay]

Certeza que não alterou em nada amigo? Aqui o efeito aplicou-se corretamente, porém com pequenas falhas no visual, por isso substitua o CSS passado anteriormente por este aqui:

Código:

.statsPers li > span {
  padding: 1px 2px;
  background: #3C3C3C;
  border-top: 1px solid #5C5C5C;
  margin-bottom: 10px;
  border-radius: 3px;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  -o-border-radius: 3px;
  color: #F7F7F7;
  font-weight: 100;
}
.statsPers li {
  color: #666;
  float: left;
  margin: 2px 10px;
}
.statsPers { display: block; list-style: none; margin: 0 auto; width: 100%; }
#statistics { background: none; display: table; margin: 0 auto!important; text-align: center!important; }
#stats { background-color: rgb(18, 18, 18)!important; border: none; height: 13px; padding: 0px 0px 13px; }

Com esse código o resultado obtido será:

Resolvido amigo?

[Stonay]

Desculpe meu amigo, mas estou colocando este código e não resulta em nada!!

@EDIT
Vou deixar o código CSS ativo em meu fórum para você ver que não está resultando.

[iPlay]

Olá, como não resulta o CSS que lhe foi passado, provavelmente é algum bug da opção de melhorar CSS que vem acontecendo em alguns fóruns. Poderia me enviar por MP uma conta com acesso ao seu painel do fórum.

---

Lembre-se! Faça um backup de todos os seus códigos antes de me enviar a conta assim, evitamos quaisquer problemas em relação a bugs ou suspeitas.

[Stonay]

Mas do jeito que está, tá ótimo. Obrigado cara

[Shaman]

Olá amigo, troque o CSS acima por este:

Código:

.statsPers li > span {
  padding: 5px 8px;
  background: #2C2C2C;
  border: 1px solid #252525;
  -webkit-border-radius: 3px;
  color: #F7F7F7;
  font-weight: 700;
}

Até mais!

[Stonay]

Este código também não alterou em nada.
Mas já pode fechar o tópico. Resolvido!

[Shaman]

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