@JAC You know you want toโฆ I challenge you to resist!
Custom Board Stats Widget
-
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 thisThereโ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 thatflex-direction
andjustify-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.
-
undefined phenomlab moved this topic from Code Respository on
-
@phenomlab , thanks for the explanation. it looks great!
a quite traditional stats box, just like how it has been in old forums
-
-
-
-
-
Rotating Star Effect
Solved Let's Build It17 -
-
About this category
Pinned Let's Build It5 -