For forum sites that are not that active or are just starting, showing the Active Members statistic is not good for members to see.
It would have been easy to hide it via CSS as you normally would but the way the statistics are displayed, it's not possible as they are all inside a <div> tag and doesn't have its own tag. See sample below: I found a way to hide a statistic without editing widget_statistics template or adding some crazy Javascript. So ignore all the code below and head over to this thread.
This prevents you to hide some parts of the div content as that is not possible in CSS. It would have been possible if each statistic is in its own tag like below:
In the code above, you could have targeted the 4th span in CSS and hide it.
Now that you've seen what the problem is, here are possible solutions:
For self-hosted version:
1. Edit widget_statistics template in Style Manager in AdminCP.
2. Find this line:
3. Remove it by commenting it out. You do it by enclosing the code in <vb:comment> </vb:comment> tags:
4. Save.
5. Repeat for every active theme/style you are using.
For vBCloud:
1. Go to homepage or where the Forum Statistics module is.
2. Find out the widget id of the Forum Statistics module by right clicking on it and inspecting the element.
3. Look for id="widget_XXXX" where XXXX is a number. Take note of this widget id.
4. Enable Sitebuilder (Edit Site ON)
5. Click Edit Page.
6. Drag and drop Static HTML module onto the page right BELOW the Forum Statistics module.
7. Edit the Static HTML module configuration.
8. Uncheck all the 3 checkboxes for the "Show module at these screen sizes" option.
9. Copy and paste the code below to the "Module HTML" option.
10. Change the value of the statsWidgetId variable with the value you got from Step 3. Do not remove the quotes around it.
11. Change the value of the activeMembersLabel variable as needed. If you are using non-English language, you need to change this accordingly. If you are using multiple languages, you need to add them like this:
12. Save the module and page as you normally would.
That's it! Enjoy!
It would have been easy to hide it via CSS as you normally would but the way the statistics are displayed, it's not possible as they are all inside a <div> tag and doesn't have its own tag. See sample below: I found a way to hide a statistic without editing widget_statistics template or adding some crazy Javascript. So ignore all the code below and head over to this thread.
HTML Code:
<div class="h-margin-bottom-s"> Topics: 123 Posts: 456 Members: 789 Active Members: 10 </div>
HTML Code:
<div class="h-margin-bottom-s"> <span>Topics: 123 </span> <span>Posts: 456 </span> <span>Members: 789 </span> <span>Active Members: 10</span> </div>
Now that you've seen what the problem is, here are possible solutions:
For self-hosted version:
1. Edit widget_statistics template in Style Manager in AdminCP.
2. Find this line:
Code:
{vb:rawphrase active_members_x, {vb:number {vb:var statistics.activeMembers}}}
Code:
<vb:comment>{vb:rawphrase active_members_x, {vb:number {vb:var statistics.activeMembers}}}</vb:comment>
5. Repeat for every active theme/style you are using.
For vBCloud:
1. Go to homepage or where the Forum Statistics module is.
2. Find out the widget id of the Forum Statistics module by right clicking on it and inspecting the element.
3. Look for id="widget_XXXX" where XXXX is a number. Take note of this widget id.
4. Enable Sitebuilder (Edit Site ON)
5. Click Edit Page.
6. Drag and drop Static HTML module onto the page right BELOW the Forum Statistics module.
7. Edit the Static HTML module configuration.
8. Uncheck all the 3 checkboxes for the "Show module at these screen sizes" option.
9. Copy and paste the code below to the "Module HTML" option.
Code:
<script> (function() { var statsWidgetId = '#widget_5', // change to the id of your Forum Statistics module activeMembersLabel = ['Active Members:'], // change to the appropriate label(s) if translated to something else // DO NOT CHANGE ANYTHING BELOW!!! el = document.querySelector(statsWidgetId + ' .widget-content'), el2 = el && el.firstElementChild, regex; if (el2) { for (var i = 0; i < activeMembersLabel.length; i++) { regex = new RegExp(activeMembersLabel[i] + ' \\d{1,3}(,\\d{3})*(\\.\\d+)?'); if (el2.textContent.match(regex)) { el2.textContent = el2.textContent.replace(regex, ''); break; } } } })(); </script>
11. Change the value of the activeMembersLabel variable as needed. If you are using non-English language, you need to change this accordingly. If you are using multiple languages, you need to add them like this:
Code:
activeMembersLabel = ['Active Members:', 'Membres Actifs:', 'Miembros Activos:'],
That's it! Enjoy!
Comment