Personalizar Estastiticas

• Descrição:

Queria que minha estastitica ficasse assim:

Encontrado em: http://upforum.forumeiros.com/

• Informações:

Código:

#stats {
margin: 0 auto !important;
text-align: center !important;
display: table;
background: none;
}
.statHide{display:none !important;}
.statsPers li span a {
text-decoration: none !important;
}
.statsPers li > span {
padding: 5px 8px;
background: #E1E1E1;
box-shadow: inset rgba(0, 0, 0, 0.3) 0px 1px 2px, rgba(255, 255, 255, 1) 0px 1px 0px;
-moz-box-shadow: inset rgba(0, 0, 0, 0.3) 0px 1px 2px, rgba(255, 255, 255, 1) 0px 1px 0px;
-webkit-box-shadow: inset rgba(0, 0, 0, 0.3) 0px 1px 2px, rgba(255, 255, 255, 1) 0px 1px 0px;
-o-box-shadow: inset rgba(0, 0, 0, 0.3) 0px 1px 2px, rgba(255, 255, 255, 1) 0px 1px 0px;
border: 1px solid #E1E1E1;
margin-bottom: 10px;
border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
-o-border-radius: 3px;
text-shadow: 1px 1px 0 white;
color: #111;
font-weight: 700;
}
.statsPers li {
float: left;
color:#666;
margin: 2px 10px;
}
.statsPers {
list-style: none;
display: block;
margin: 0px auto;
width: 100%;
}
div.Legendasgrupoup {
border: 2px solid #DDD;
border-radius: 6px;
color: transparent;
display: block;
  text-decoration: none!important;
font-size: 14px;
margin: 15px auto 0;
padding: 16px 8px 16px 5px;
text-align: center!important;
}
#onlinelist p {
line-height: 150%;
}
div.Legendasgrupoup a:hover {
background: rgba(7,7,7,0.05);
font-size: 16px;
  text-decoration: none;
padding: 14px 10px 15px;
}
.pun a:link {
text-decoration: none!important;
}
div.totaluseronline {
border: 2px solid #DDD;
border-radius: 6px;
display: block;
font-size: 12px;
margin: 8px auto 0;
padding: 9px 0;
text-align: center!important;
width: 74%!important;
}

div.quemtaconectadolink {
border-radius: 6px;
display: block;
font-size: 12px;
margin: 5px auto 0;
padding: 4px 0;
text-align: center!important;
width: 74%!important;
}
div.listadeusuarioson {
border: 2px solid #DDD;
border-radius: 6px;
display: block;
font-size: 12px;
margin: 5px auto 0;
padding: 9px 0;
text-align: center!important;
width: 74%!important;
}

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}

<!-- BEGIN disable_viewonline -->
<div id="pun-info" class="main">
   <div id="stats">
                  <br />
                  <ul class="statsPers">
                    <li class="statHide rdtOn">Teste1: {RECORD_USERS}</li>
                    <li class="statHide lastUser">Teste2: {NEWEST_USER}</li>
                    <li class="statHide totalUser">Teste3: {TOTAL_USERS}</li>
                    <li class="statHide totalPost">Teste4: {TOTAL_POSTS}</li>
                  </ul>
              <br />
       
          </div>
  <br>
  <div class="Legendasgrupoup">
         <p>&nbsp;:&nbsp;{GROUP_LEGEND}</p>

      </div>
 
      
         <p class="right">
            <!-- BEGIN switch_viewonline_link -->
            
            <!-- END switch_viewonline_link -->
            <!-- BEGIN switch_viewonline_nolink -->
            <!-- END switch_viewonline_nolink -->
         </p>
                  <div class="totaluseronline">{TOTAL_USERS_ONLINE} </div>
                   
   
    <div class="quemtaconectadolink"><a href="{U_VIEWONLINE}" rel="nofollow">{L_WHO_IS_ONLINE}</a></div>
   
          <div class="listadeusuarioson">{L_ONLINE_USERS} {L_CONNECTED_MEMBERS} {LOGGED_IN_USER_LIST}</div>
                         
         <br />
         
         
      <!-- BEGIN switch_chatbox_activate -->
      
         <p class="page-bottom">
         &nbsp;:&nbsp;
         <br />
         <!-- BEGIN switch_chatbox_popup -->
            <div id="chatbox_popup"></div>
            
         <!-- 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}

<!-- BEGIN switch_legend -->
<ul id="pun-legend">
   <li>
      <img src="{FORUM_NEW_IMG}" alt="{L_NEW_POSTS}" />&nbsp;{L_NEW_POSTS}
      <img src="{FORUM_IMG}" alt="{L_NO_NEW_POSTS}" />&nbsp;{L_NO_NEW_POSTS}
      <img src="{FORUM_LOCKED_IMG}" alt="{L_FORUM_LOCKED}" />&nbsp;{L_FORUM_LOCKED}
   </li>
</ul>
<!-- 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 -->

Código:

$(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>
');


});

Código:

#stats {
margin: 0 auto !important;
text-align: center !important;
display: table;
background: none;
}
.statHide{display:none !important;}
.statsPers li span a {
text-decoration: none !important;
}
.statsPers li > span {
padding: 5px 8px;
background: #E1E1E1;
box-shadow: inset rgba(0, 0, 0, 0.3) 0px 1px 2px, rgba(255, 255, 255, 1) 0px 1px 0px;
-moz-box-shadow: inset rgba(0, 0, 0, 0.3) 0px 1px 2px, rgba(255, 255, 255, 1) 0px 1px 0px;
-webkit-box-shadow: inset rgba(0, 0, 0, 0.3) 0px 1px 2px, rgba(255, 255, 255, 1) 0px 1px 0px;
-o-box-shadow: inset rgba(0, 0, 0, 0.3) 0px 1px 2px, rgba(255, 255, 255, 1) 0px 1px 0px;
border: 1px solid #E1E1E1;
margin-bottom: 10px;
border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
-o-border-radius: 3px;
text-shadow: 1px 1px 0 white;
color: #111;
font-weight: 700;
}
.statsPers li {
float: left;
color:#666;
margin: 2px 10px;
}
.statsPers {
list-style: none;
display: block;
margin: 0px auto;
width: 100%;
}
div.Legendasgrupoup {
background-color: white!important;
border: 2px solid #DDD;
border-radius: 6px;
color: transparent;
display: block;
  text-decoration: none!important;
font-size: 14px;
margin: 15px auto 0;
padding: 16px 8px 16px 5px;
text-align: center!important;
}
#onlinelist p {
line-height: 150%;
}
div.Legendasgrupoup a:hover {
background: rgba(7,7,7,0.05);
font-size: 16px;
  text-decoration: none;
padding: 14px 10px 15px;
}
.pun a:link {
text-decoration: none!important;
}
div.totaluseronline {
background-color: white!important;
border: 2px solid #DDD;
border-radius: 6px;
display: block;
font-size: 12px;
margin: 8px auto 0;
padding: 9px 0;
text-align: center!important;
width: 74%!important;
}

div.quemtaconectadolink {
background-color: white!important;
border-radius: 6px;
display: block;
font-size: 12px;
margin: 5px auto 0;
padding: 4px 0;
text-align: center!important;
width: 74%!important;
}
div.listadeusuarioson {
background-color: white!important;
border: 2px solid #DDD;
border-radius: 6px;
display: block;
font-size: 12px;
margin: 5px auto 0;
padding: 9px 0;
text-align: center!important;
width: 74%!important;
}