Hello There, Guest! Login Register
Thread Rating:
  • 1 Vote(s) - 5 Average
  • 1
  • 2
  • 3
  • 4
  • 5
Mini Stats
#1
This tutorial will show you how to incorporate mini stats like the ones used here and on other software like IP.Board.

End result
[Image: uExCl.png]

First of all go to Index templates -> index_boardstats

Find
Code:
<table border="0" cellspacing="{$theme['borderwidth']}" cellpadding="{$theme['tablespace']}" class="tborder">
<thead>
<tr>
<td class="thead">
<div class="expcolimage"><img src="{$theme['imgdir']}/collapse{$collapsedimg['boardstats']}.gif" id="boardstats_img" class="expander" alt="[-]" title="[-]" /></div>
<div><strong>{$lang->boardstats}</strong></div>
</td>
</tr>
</thead>
<tbody style="{$collapsed['boardstats_e']}" id="boardstats_e">
{$whosonline}
{$birthdays}
{$forumstats}
<tr>
    <td class="tfoot" style="text-align: right">
        <span class="smalltext">
            {$logoutlink}
            <a href="misc.php?action=markread{$post_code_string}">{$lang->markread}</a> |
            <a href="showteam.php">{$lang->forumteam}</a> |
            <a href="stats.php">{$lang->forumstats}</a>
        </span>
    </td>
</tr>
</tbody>
</table>
<br />

Replace with
Code:
{$forumstats}
<table border="0" cellspacing="{$theme['borderwidth']}" cellpadding="{$theme['tablespace']}" class="tborder">
<thead>
<tr>
<td class="thead">
<div class="expcolimage"><img src="{$theme['imgdir']}/collapse{$collapsedimg['boardstats']}.gif" id="boardstats_img" class="expander" alt="[-]" title="[-]" /></div>
<div><strong>{$lang->boardstats}</strong></div>
</td>
</tr>
</thead>
<tbody style="{$collapsed['boardstats_e']}" id="boardstats_e">
{$whosonline}
{$birthdays}
<tr>
    <td class="tfoot" style="text-align: right">
        <span class="smalltext">
            {$logoutlink}
            <a href="misc.php?action=markread{$post_code_string}">{$lang->markread}</a> |
            <a href="showteam.php">{$lang->forumteam}</a> |
            <a href="stats.php">{$lang->forumstats}</a>
        </span>
    </td>
</tr>
</tbody>
</table>
<br />

Next go to Index templates -> index_stats

Find
Code:
<tr><td class="tcat"><span class="smalltext"><strong>{$lang->boardstats}</strong></span></td></tr>
<tr>
<td class="trow1"><span class="smalltext">
{$lang->stats_posts_threads}<br />
{$lang->stats_numusers}<br />
{$lang->stats_newestuser}<br />
{$lang->stats_mostonline}
</span>
</td>
</tr>

Replace with
Code:
<div style="text-align: center;">
<span class="statround">{$stats['numposts']}</span> Total Posts
<span class="statround">{$stats['numusers']}</span> Total Members
<span class="statround">$newestmember</span> Newest Member
<span title="{$recorddate}, {$recordtime}"><span class="statround">{$mostonline['numusers']}</span> Most Online</span>
</div>
<br />

Next go to global.css

Add the following code to your stylesheet
Code:
.statround {
    background: #98c22a;
    color: #ffffff;
    padding: 4px 10px;
    margin-left: 20px;
    border-radius: 4px;
}

.statround a:link,
.statround a:visited {
    color: #ffffff;
}

.statround a:hover,
.statround a:active {
    color: #444444;
}

If you would like to display the total amount of threads on your forums add the following code where you would like it to be placed.
Code:
<span class="statround">{$stats['numthreads']}</span> Total Threads

Just adjust the colors to match your current theme and that should be it. Please feel free to make recommendations to improve the code and post your results here.
Reply
#2
Thanks, was very nice.
Reply
#3
THX for tutrial Smile


-----------------------------------------------------------------------

First of all go to Index templates -> index_boardstats
Replaced with, when broken a stats in tutorial, paste this :


PHP Code:
<table border="0" cellspacing="{$theme['borderwidth']}cellpadding="{$theme['tablespace']}class="tborder">
<
thead>
<
tr>
<
td class="thead">
<
div><strong>{$lang->boardstats}</strong></div>
</
td>
</
tr>
</
thead>
{
$whosonline}
{
$birthdays}
</
tbody>
</
table>
<
br />
{
$forumstats


I did not happen correctly and now it Smile
Reply
#4
Thanks for tutorial Wink
Reply
#5
Thanks for the awesome tutorial!

How do I make it match the default mybb theme? at the moment it shows color green.
Reply
#6
(26th Sep, 05:28 pm)BadgeR Wrote:  Thanks for the awesome tutorial!

How do I make it match the default mybb theme? at the moment it shows color green.

change the background color here

Quote:.statround {
background: #98c22a;
color: #ffffff;
padding: 4px 10px;
margin-left: 20px;
border-radius: 4px;
}
Reply
#7
its work .. thx
Reply
#8
Not working in theme reksio Sad((
Reply
#9
Make all tutorials when dont works in the steps

First of all go to Index templates -> index_boardstats
Replaced with, when broken a stats in tutorial, paste this :


<table border="0" cellspacing="{$theme['borderwidth']}" cellpadding="{$theme['tablespace']}" class="tborder">
<thead>
<tr>
<td class="thead">
<div><strong>{$lang->boardstats}</strong></div>
</td>
</tr>
</thead>
{$whosonline}
{$birthdays}
</tbody>


I think fix your stats Smile
Reply
#10
Most of this still applies to mybb 1.8 for those that are curious. The new ThemeFreak theme will be using this type of mini stat look.


We are using the following HTML

Code:
<div style="text-align: center;">
<span class="statround">{$stats['numposts']}</span> Total Posts
<span class="statround">{$stats['numusers']}</span> Total Members
<span class="statround">$newestmember</span> Newest Member
<span title="{$recorddate}, {$recordtime}"><span class="statround">{$mostonline['numusers']}</span> Most Online</span>
</div>
<br />

With this CSS (in the global.css)

Code:
.statround {
    background: #98c22a;
    color: #ffffff;
    padding: 4px 10px;
    margin-left: 20px;
    border-radius: 4px;
}

.statround a:link,
.statround a:visited {
    color: #ffffff;
}

.statround a:hover,
.statround a:active {
    color: #444444;
}
Reply




Users browsing this thread: 1 Guest(s)