Make your Forum Statistics Module rock like this:
with these simple HTML and CSS changes. This mod is vBCloud compatible.
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.
2. Edit the following phrases in the Phrase Manager in AdminCP > Language & Phrases. Put these changes in the "English (US) Translation" field.
topics_x
posts_x
members_x
active_members_x
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 style="display:none" in widget-stat-item div like below.
Demo:
See the Forum Statistics module on homepage.
This is a FREE mod. Please consider donating if you find this useful. Thank you!
If you are not comfortable doing these changes on your forum and you want us to do it all for you, you could purchase a product installation service add-on below.
with these simple HTML and CSS changes. This mod is vBCloud compatible.
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.
Code:
/* 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 */
topics_x
HTML Code:
<div class="widget-stat-item"> <div class="widget-stat-number">{1}</div> <div class="widget-stat-label">Topics</div> </div>
HTML Code:
<div class="widget-stat-item"> <div class="widget-stat-number">{1}</div> <div class="widget-stat-label">Posts</div> </div>
HTML Code:
<div class="widget-stat-item"> <div class="widget-stat-number">{1}</div> <div class="widget-stat-label">Members</div> </div>
HTML Code:
<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 style="display:none" in widget-stat-item div like below.
HTML Code:
<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 homepage.
This is a FREE mod. Please consider donating if you find this useful. Thank you!
If you are not comfortable doing these changes on your forum and you want us to do it all for you, you could purchase a product installation service add-on below.
Comment