How To: Making a Custom NodeBB Theme

psychobunny

Finally finally finally got around to making this guide. Hope it helps someone, would love to see what comes out of this

NodeBB Hands-On Theming Guide, Part 1 | Burn after compiling

(burnaftercompiling.com)

psychobunny

Don't forget to check out (and contribute to!) our theming section in the NodeBB wiki. So far we have the following

Tanner

Thanks a lot! This was a great guide to get started but definitely looking forward to part 2.

psychobunny

It's been a while since this has been written. You might get better mileage from cloning the quickstart shell and going from there

Tanner

I might just write my own theming guide then!

Haowei

hey，I just updated Chinese translation for your blog. May you like it. http://nodebb.org.cn/topic/9/ @psychobunny

src1988

Sorry guys, I am new to this and a little confused. I can make changes to the tpl and less files in the nodebb-theme-vanilla, but I am unsure of how to actually push those changes to my Heroku repository. Sorry for being a noob, I am learning alot! @psychobunny

psychobunny

So this is a little bit outdated, I do recommend you look at our quick-start theming repo and go for there.

As for your problems with heroku I have replied on the other thread, so let's take it from there

Thanks again @Haowei for the translation

pwFoo

Any howto available to build a simple (frontend) theme without bootstrap?
Just html / css templates with the nodebb template placeholders / variables?

psychobunny

No resources available atm, but it's totally possible to do. Maybe in future we should write a very barebones theme without bootstrap or anything, just a simple table format that utilizes most of the API

pwFoo

@psychobunny said:

No resources available atm, but it's totally possible to do. Maybe in future we should write a very barebones theme without bootstrap or anything, just a simple table format that utilizes most of the API

Would be great to understand nodebb theming and create own themes

h3ku

@psychobunny I try to follow the guide but font work for 0.6.x

Edit im so idiot miss @

divi

how can I edit my theme with live edting?

I edited my code and run ./nodebb restart
everytime.

anybody know this?

pichalite

@divi you can use grunt.

https://docs.nodebb.org/en/latest/running/index.html#grunt-development

divi

@pichalite sadly nodeBB v0.6.x version didn't support grunt
below is my message.

`grunt-cli: The grunt command line interface. (v0.1.13)

Fatal error: Unable to find local grunt.

If you're seeing this message, either a Gruntfile wasn't found or grunt
hasn't been installed locally to your project. For more information about
installing and configuring grunt, please see the Getting Started guide:

http://gruntjs.com/getting-started`

MartinMalinda

I am thinking of creating a new theme for myself as I need a bit specific design to match the rest of my website.
But a lot of the links from above don't work Does anyone have any tips how to get into NodeBB theming at this point?

Ive checked out the quickstart theming repo but it seems quite empty and I'm confused. I would expect to see some template files and less/sass files I could modify.

Thanks for any guidance

btw. I am checking this forum after few months and it looks even more awesome than before. Did not think it could be possible

Wbmstr

This post is deleted!

dge808

@psychobunny Hi, this link doesn't work, can I read somewhere else about creating custome themes for nodebb ?

pichalite

@dge808 check the NodeBB docs

https://docs.nodebb.org/en/latest/themes/create.html

Jam

the http://burnaftercompiling.com/nodebb/nodebb-hands-on-theming-guide-part-1/ can't be opened ~ !