Copying Vanilla Theme

[sdnyco]

Hey everyone,

despite being a noob in general I installed NodeBB yesterday. I already have a design ready I want to implement, now I just have to do it.

I've been meddling with the Vanilla theme (just to get a feel for how everything works), as it seems to contain all the components that I need for my theme. While I don't want to create a Vanilla child theme, I want to start off with the Vanilla files, then strip away code layer by layer just to get an idea how everything behaves and fits together.

Since I don't generally use the command line, my question is this: How can I easily copy the Vanilla theme (to not mess up the original one) to start fuc*ing it up?

I've tried copying the theme in the node_modules folder, but I can't seem to select the theme in the ACP later (despite changing the theme.json). Is there any other/better way?

Thanks!

[Tanner]

I copy the theme folder in node_modules and then edit the theme.json file, then reupload and select the new theme. Not sure why you can't select it.

I either do that or make all my changes to the Vanilla theme first then copy it over and change the theme.json file.

[sdnyco]

@Tanner said:

I copy the theme folder in node_modules and then edit the theme.json file, then reupload and select the new theme. Not sure why you can't select it.

I either do that or make all my changes to the Vanilla theme first then copy it over and change the theme.json file.

Bizarre. Maybe I'll give it another try (5th time's a charm... as they say). Really want to get started on theming.

[Tanner]

If in doubt, just make all of your changes to the Vanilla theme first and then you'll have the theme already done - then you can copy the folder once it's done and then you can edit the theme.json file.

Have you tried restarting NodeBB after you've uploaded/copied the new theme with the edited theme.json file?

[sdnyco]

Alright, this is about to drive me crazy. I guess there are other ways I'll try theming but this bugs me:

1. Successfully duplicated the theme.
2. Renamed it to "NodeBB Banana".
3. Replaced the info in theme.json / package.json / plugin.json
4. Successfully selected the theme in the ACP.
5. Restarted nodeBB.

... I edited the header.tpl of the Vanilla theme, and after all these steps it only shows me the header.tpl of the Vanilla theme (instead of Banana)! What am I overlooking?

[Tanner]

@sdnyco Did you restart NodeBB after you made the changes?

[sdnyco]

I wrongly used the term reboot instead of restart before–but yes: I did restart nodeBB.

[Tanner]

@sdnyco message me so we can chat on Skype because this is going to drive me nuts

[sdnyco]

I'd be more than happy too. I'll message you in a sec.

[mootzville]

@sdnyco & @Tanner

I had the same problem, but after looking through the code I found the solution...maybe you have as well, but I thought I'd put it up here for others.

When you clone the nodebb-theme-vanilla folder you also have to add this line to your theme.json file:

"templates": "templates"

Should work fine after that. Basically, what happens is when nodebb loads it looks for that line in your theme.json file and if it doesn't find it it defaults to using the vanilla theme templates. So, even though it might be telling you your theme is loaded, it's not...kind of confusing.

[sdnyco]

@mootzville You are my hero. That did the trick! Hats off to you, Sir.

Now on to actual theming!

[mootzville]

No worries @sdnyco. Enjoy!

[Tanner]

@mootzville Thanks a lot for that, I'll keep this in mind for future issues!

[julian]

Thanks for reporting the bug @mootzville, the templates property is no longer required in a custom theme's theme.json in v0.5.1 (but since we haven't even launched v0.5.0 yet, don't worry about a thing, the fix is backwards compatible)