WINTXCODERS

Hola comunidad de WTX, En esta oportunidad les enseñare a como personalizar las estadísticas de vuestro foro [SMF].

Resultado a conseguir

Spoiler

(https://i.imgur.com/ROXgaE2.png)

[close]

En vuestro BoardIndex.template.php deben buscar el respectivo apartado donde quieren añadir las estadísticas, el código a pegar es el siguiente:

Show some statistics if stat info is off.
echo '
<div id="index_common_stats">
<div class="posts">
<i class="fa fa-comments"></i>
<h2>', $txt['posts_made'], '</h2>
<span class="stat">
', $context['common_stats']['total_posts'], '
</span>
</div>
<div class="topics">
<i class="fa fa-comment"></i>
<h2>', $txt['topics'], '</h2>
<span class="stat">
', $context['common_stats']['total_topics'], '
</span>
</div>
<div class="members">
<i class="fa fa-users"></i>
<h2>', $txt['members'], '</h2>
<span class="stat">
', $context['common_stats']['total_members'], '
</span>
</div>
<div class="last_member">
<i class="fa fa-user"></i>
<h2>', $txt['welcome_member'], '</h2>
<span class="stat">
', $context['common_stats']['latest_member']['link'], '
</span>
</div>
</div>';


En vuestro index.css deben pegar el siguiente codigo:
/* Custom Stats */
#index_common_stats {
float: none;
position: static;
text-align: inherit;
display: flex;
justify-content: center;
margin: 10px 0;
}
#index_common_stats div {
flex-basis: 20%;
text-align: left;
background-color: #fff;
border-radius: 4px;
box-shadow: 2px 3px 0px 1px rgba(0, 0, 0, 0.2);
border: 1px solid rgba(0, 0, 0, 0.05);
margin: 0 5px;
padding: 20px 15px 15px;
color: #646464;
}
#index_common_stats div i {
position: absolute;
margin-top: -36px;
font-size: 10pt;
display: block;
padding: 10px;
border-radius: 100%;
background-color: #F75353;
color: #fff;
}
#index_common_stats div h2 {
text-transform: uppercase;
font-size: 10pt;
display: block;
margin: 5px 0 2px;
}
#index_common_stats div span {
font-size: 18pt;
line-height: 25px;
}
#index_common_stats div.topics i {
background-color: #51D466;
}
#index_common_stats div.members i {
background-color: #32C8DE;
}
#index_common_stats div.last_member i {
background-color: #F78153;
}