@arasbm I clone vanilla and was building a theme at one point, but after a version update, some of the routes changed and I didn't feel like tracing them, so instead I opted to just piggyback on the stock themes.
What I do is pretty basic, but probably not the most performant...though, I haven't noticed any lag yet...
In vanilla -- and probably lavender too -- there is a file called theme.less. For vanilla, it has 3 imports:
@import "./less/bootstrap/bootstrap";
@import "./less/vanilla";
@import "modules";
I just add my additional less file(s) there and make my mods, so theme.less looks like this:
@import "./less/bootstrap/bootstrap";
@import "./less/vanilla";
@import "modules";
@import "custom";
@import "sbox";
Here I adding a custom.less file and sbox.less. The custom.less is for the general theme and sbox is for customizations to the shoutbox plugin widget. These will be the last two less files imported, so they'll overwrite an other css they collide with, so long as the prior css is not marked !important
That's how I modify my css -- for now anyway. For the html, I make backup copies of the .tpl file I want to change. So, if I want to change footer.tpl I just cp footer.tpl footer.backup and now I can mod the html without worry...and if something breaks, then I just cp footer.backup footer.tpl and all is well...
Lastly, there is also the theme.js file located in the nodebb-theme-vanilla/lib folder. This is where the widget areas are defined for the theme. If you've noticed, the widget areas are different for vanilla and lavender. To add widget areas you have to kind of know what you're doing, but it basically works like this:
- Add a widget location object to the theme.js file. <-- Look at the theme.js file and you'll see what I mean.
- Edit the .tpl file and add the widget location html
I suggest as an experiment try adding a sidebar widget location to the topic.tpl for the vanilla theme. It's easy because you can basically just look at lavenders theme.js and topic.tpl as a reference.
That's pretty much it for how involved I get with it. You can go much deeper into it, but I try to keep the front end dev to a minimum because it can be very tedious...
So, to summarize:
- Append your .less to the end of the theme.less file.
- Backup .tpl files as .backup before changing.
- Add widget areas as needed.
Now when changes/updates break the theme it's really easy to migrate...
EDIT: Also, to be clear, I am not saying this is the best way...I know it isn't, but it is an easy way and you don't have to get your hands too dirty. It's also easy to re-init after upgrades...
Also, I had never really messed with bootstrap until I began messing with nodebb, but the variables.less file is a good reference for variables you may want to set in your custom less files.
-- done right. I've realized I'm approaching things more from a functional perspective, so this has been an eye opener for me.