Widget layout issue?

kinetix

Hi there,

Running 3.10.2 and am still fairly new to NodeBB admin.

I'm trying to get widgets to layout beside each other similar to community.nodebb.org's Categories page, as well as the layout shown in Harmony theme's Categories example screenshot.

I drag widgets over to the Categories Header area, and no matter what I do they only stack vertically. I haven't found any way for the widgets to go beside each other, and am curious if I've hit a weird issue, or if I'm just missing something obvious.

eeeee

What code are you putting in the Widgets? What do they do?
Widgets will stack unless you put code in to alter that.

The categories page you refer to as example, those are recent posts in boxes that come with that particular theme

<baris>

@kinetix this is the widget setup of this forum for the categories.tpl page. The cards at the top are from the plugin nodebb-plugin-recent-cards. The others come with nodebb-widget-essentials which is included with core.

kinetix

@baris Interesting - so I've added the plugin in and can see how it operates, thanks for that. I'm curious then - shouldn't the example screenshots for the theme not include something that the theme doesn't do by itself? It really wasn't obvious to me that you couldn't get the look of the example without having to install a plugin to make it happen. (Categories example screenshot at https://github.com/nodebb/nodebb-theme-harmony )

<baris>

@kinetix yeah I am going to update the readme for harmony to mention the cards are from the recent cards plugin.

kinetix

Awesome!

TapuzH

I wonder how I am supposed to create gaps between widgets? They now just sort of......cram up with each other up and down, with no space between. I am newbie to HTML and stuff so : ( It would be nice if anyone can teach me how

<baris>

You can use bootstrap5 spacing classes to give them bottom margins. See below for a sample html widget with a bottom margin.

<baris>

If it is another widget like latest users, which doesn't have custom html you can use a container and give the container bottom margin. In this case the {{body}} is replaced by the html of the latest users widget during rendering.

TapuzH

thanks!!