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