Hey Guys I am a beginner but I'd like to custom design my forum. How do you do this?

NodeForumGod

I found out about NodeBB just yesterday, and I succeeded installing it on cloud!

Now I'd like to change the layout and appearance to my liking.(color, layout etc)

How do you go about that?

alff0x1f

You can create a child theme based on some base theme. http://nodebb.readthedocs.io/en/latest/themes/create.html

Or you can add CSS rules in ACP, if your changes small.

alff0x1f

I answer, but it not work for me. I create folder with new theme (as described in docs), but forum don't see my new theme. Something I missed?

Steps how create theme:

Create dir node_modules/nodebb-theme-test

File theme.json:

@import "./less/bootstrap/bootstrap";
@import "./less/test";

File theme.json:

{
    "id": "nodebb-theme-test",
    "name": "test",
    "description": "The custom test theme for NodeBB. Based on persona.",
    "url": "example.com",
    "screenshot": "screenshot.png",
    "baseTheme": "nodebb-theme-persona"
}

And copy full dir "less" from nodebb-theme-persona and

mv less/persona.less less/test.less

Restart forum, but in ACP not found my theme.

Any tips from @pichalite ?

yariplus

It's not listed in that doc, but a theme needs to have a valid plugin.json and a package.json too, before nodebb will see it.

pichalite

Yes as @yariplus pointed out, themes need package.json and plugin.json similar to nodebb plugins.

Also I think your first file name... you meant to say theme.less

pichalite

also try this quickstart theme repo... it has everything you need to start creating a theme

GitHub - NodeBB/nodebb-theme-quickstart: Quickstart Theming Shell

Quickstart Theming Shell. Contribute to NodeBB/nodebb-theme-quickstart development by creating an account on GitHub.

GitHub (github.com)

julian

for the quickstart theme repo It's by far the best way to get a theme going, just fork and rename!