[vBMods.rocks] Make Forum Statistics Module Rock! (vBCloud compatible)

[noypiscripter]

Make your Forum Statistics Module rock with these simple HTML (in the Phrase Manager) and CSS changes. This mod is vBCloud compatible. Please see the attachment to see how it looks like.

1. Paste the below CSS code in css_additional template in AdminCP or in Sitebuilder > Style > CSS Editor. Repeat for every active style/theme your forum is using. This code is based off the vB5 Default Style. You may need to tweak some values to suit your theme.

/* Statistics Module - START */
.widget-stat-item {
display: inline-block;
margin: 10px 10px 20px;
width: 39%; /* adjust as needed, may need to increase/decrease it */
box-sizing: border-box;
}
.widget-stat-number {
text-align: center;
font-weight: bold;
font-size: 20px;
color: #001f68; /* adjust color as needed or remove if you want the default color */
}
.widget-stat-label {
text-align: center;
}
.l-xsmall .widget-stat-item {
width: 40%;
}
@media (max-width:320px) {
.l-xsmall .widget-stat-item {
width: 38%;
}
}
/* Statistics Module - END */

2. Edit the following phrases in the Phrase Manager in AdminCP > Language & Phrases. Put these changes in the "English (US) Translation" field.

topics_x
<div class="widget-stat-item">
<div class="widget-stat-number">{1}</div>
<div class="widget-stat-label">Topics</div>
</div>

posts_x
<div class="widget-stat-item">
<div class="widget-stat-number">{1}</div>
<div class="widget-stat-label">Posts</div>
</div>

members_x
<div class="widget-stat-item">
<div class="widget-stat-number">{1}</div>
<div class="widget-stat-label">Members</div>
</div>

active_members_x
<div class="widget-stat-item">
<div class="widget-stat-number">{1}</div>
<div class="widget-stat-label">Active Members</div>
</div>

NOTE: If you want to hide a statistic (e.g. Active Members if your forum is just starting and you don't want users to see a low number), then insert the code in red below.
<div class="widget-stat-item" style="display:none;">
<div class="widget-stat-number">{1}</div>
<div class="widget-stat-label">Active Members</div>
</div>

Demo:
See the Forum Statistics module on https://vbmods.rocks

This mod is also posted at https://vbmods.rocks/forum/vbulletin-5-modifications/vbulletin-5-template-only-modifications/11408-make-forum-statistics-module-rock-vbcloud-compatible

[goxy63]

Looking very nice, thank you

[In Omnibus]

This could easily have been a paid modification. Nice of you to release it free.

[tattotattoo]

wow thanks bro!

[ywwz]

Work on 5.6.3?

[Blackhorse]

Work on 5.6.3?

Yes

[Mike1995]

5.6.4?

[leha]

5.6.4?
Yes

[Mboora]

Works perfect in 5.6.4.

Thank you!

It would look better with padding around the wording such as Topics, Posts, Members etc...

[TheDigitalCouch]

This did not center the "Welcome to our newest member."

I've added this at the bottom css_additional.css:
.center-newest-member {
text-align: center;
}

Then search for welcome_to_our_newest_member_x in Languages & Phrases and use:
<div class="center-newest-member">
Welcome to our newest member, <a href="{1}" data-vbnamecard="{3}">{2}</a>.
</div>

I've also edited 39% to 30% and it allowed it to be 3 on one row.