Custom Board Stats Widget

[phenomlab]

I had someone mention to me yesterday that they liked the footer widget present on the Categories page, which looks like the below

This isn’t custom code at all, but in fact the “Board Stats” widget which is added when nodebb-widget-board-stats is installed. However, there were various elements I didn’t like - particularly, the layout, which by default (on here) would have looked like this

There’s nothing “wrong” with it (apart from the fact that the calculations seem a little off with actual users vs guests - not a show stopper for me), but I didn’t want some elements to be displayed, and so I used the below CSS to hide them, and then modify the alignment so it looks like the first image

.widget-board-stats {
    display: flex;
    flex-direction: row-reverse;
    justify-content: space-around;
}
.widget-board-stats h3 {
    display: none;
}

This basically hides anything in that widget that uses h3 as the header, and then arranges the widget itself so that flex-direction and justify-content are included which lines up everything nicely.

If you’d like the widget to look like a card, you can set that in the widget itself by adding the below code into the widget container

<div class="card"><h5 class="card-header">{{title}}</h5><div class="card-body">{{body}}</div></div>

Effectively, the below.

Or, you can drag the card element into the container area like the below, and drop it

Enjoy.

[crazycells]

@phenomlab , thanks for the explanation. it looks great!
a quite traditional stats box, just like how it has been in old forums

[cagatay]

@phenomlab how can i add board statics?

[phenomlab]

@cagatay once you’ve installed the plugin, you’ll need to add it as a widget.

[cagatay]

i can not find this plugin in plugins search

[phenomlab]

@cagatay install it via CLI

[cagatay]

This post is deleted!

[cagatay]

Mark hi i istalled and added the stats but in english language. How can i change it in turkish one?

[phenomlab]

@cagatay that’s a question for the NodeBB devs I think. You could perhaps use the nodebb-plugin-customize to do the translations.

Not sure if they exist in Transiflex either, so you may need to add these manually.

[crazycells]

@cagatay if you can share the github page of the plugin, I can send Turkish translation as “pull request” …

[phenomlab]

@crazycells that would be very useful

[cagatay]

@crazycells here

GitHub - psychobunny/nodebb-widget-board-stats: Widget listing active users and other board stats in a classical forum look but shown in real-time.

Widget listing active users and other board stats in a classical forum look but shown in real-time. - psychobunny/nodebb-widget-board-stats

GitHub

[crazycells]

I asked @barisusakli to add multi-language support to this plugin… I will send an update after him…

As an alternative (but more laborious) method, you can fork the plugin to your github profile and change the translation here on this page:

nodebb-widget-board-stats/public/templates/widgets/board-stats.tpl at master · psychobunny/nodebb-widget-board-stats

Widget listing active users and other board stats in a classical forum look but shown in real-time. - psychobunny/nodebb-widget-board-stats

GitHub

and then, install the plugin from your github page to the forum instead of the regular plugin…

[cagatay]

if i can found where is this plugin saved in my files of nodebb, i can edit byself but cant found in modules files or plugin files …

[phenomlab]

@cagatay is it’s installed, it’ll be there. Sometimes they aren’t necessarily in the order you’d expect.

[crazycells]

@cagatay yes, that is also good idea, but I do not know if it stays overwritten all the time (does doing “plugin reset” reset the files? I do not know)

[phenomlab]

@crazycells it’ll be overwritten. My recommendation here in the absence of Transiflex would be to use the customize plugin

[cagatay]

@phenomlab @barisusakli updated the plugin but with another name.
so could you please update your edit code also on it?

new plugin name;

 @nodebb/nodebb-widget-board-stats@2.0.0

[phenomlab]

@cagatay there’s no chages needed?

[DownPW]

No just css maybe @phenomlab

I have installed the plugin and ask modification to @barisusakli

see here, here and [here](https://community.nodebb.org/post/97623

With no bugs, i can use it, and even combined with the other plugin