NodeBB Sidebar & Header
-
I'm new to NodeBB and really enjoying it so far! I’ve previously used the MyBB forum system, but I’m excited to transition to NodeBB.
I attempted to recreate the header from NodeBB.org, and while I managed to get a similar look, it’s causing an issue with my layout—the header seems to push the sidebars down, disrupting the overall appearance.
Is there a guide or any tips on setting up the header to look like this forum's layout? I really like its design, but I can’t seem to prevent the sidebars from shifting down. Any help would be greatly appreciated!
Here is nodebb sidebar and header
Here is what happens when I replicate it (I have removed my logo for trust reasons)
I would like to setup my header & sidebar the same way as nodebb as it's professional, and looks great.
Regards.
-
Hi @Drunken-Cheetah! Welcome!
The section at the top is actually a widget area called the "brand header". You can get to it via ACP > Extend > Widgets
We put it under the global widget namespace, so it appears on every page, but you can customize this as you wish.
-
Thanks for your fast reply.
I tried both methods. Custom header & widget header. When I use the widget header, the sidebars are not pushed, but the header is placed under the category name.
If i use the custom, the sidebars are pushed but is placed in the correct place where I want it to be shown, as per my image in OP.
Regards
EDIT: I apoligize. I have been using Global Header not Brand Header. I will try brand header now.
-
I used my same code I used in the original, and added it to the Brand Header but it doesnt show up at all. I should mention seeing as I am new, to get the actual code required for placement etc. I inspected element of nodebb to get the structure. Would you mind (if possible) you would share how you done it in your brand header?
-
@Drunken-Cheetah Can you show us a screenshot of the widget?
-
@julian said in NodeBB Sidebar & Header:
@Drunken-Cheetah Can you show us a screenshot of the widget?
Gyazo Screen Video
Gyazo is the easiest way to record screenshots & videos you can share instantly. Save time with async visual communication that's effortless and engaging.
Gyazo (gyazo.com)
The Brand Header only shows up if I have the sites title set to "Show".
Edit: I was able to replicate it, if I entered a blank site title. It is now showing the same way
-
@Drunken-Cheetah yeah that could be an issue, if you don't have a logo or show site title is off then that area isn't rendered. https://github.com/NodeBB/nodebb-theme-harmony/blob/main/templates/partials/header/brand.tpl#L1
I think we can change that around so the widget shows up even if logo and site title is missing.
-
@baris That would be cool.
So far, I do have a logo yes. However, if I made the site title empty, but turned on the "show site title" it shows nodebb. However, if I enter a couple spaces for empty space. It shows exactly like the header on this website. No extra text, and no invisible element there to identify its whitespace.
Thanks for your reply.
-
@baris I appreciate that, and quick fix. Thank you again.
Aside from that. I am actually really enjoying nodebb. I am running it alongside plesk, with 4 other websites which run php, no interferenance with anything and runs a dream.
Definitely way easier to use and understand then mybb
-
D Drunken Cheetah has marked this topic as solved
