Developing a child theme vs forking an existing theme

arasbm

I was wondering if someone could provide some insight about developing a child theme versus modifying an existing theme. I really like lavender, and like to use it and add some small changes here and there. Should I fork lavender and make my changes or should I make a child theme? If child theme is the answer can someone point me to an example implementation so I know what is involved.
Looking at ACP I can not see a way to turn on two themes at the same time, but I guess if I install a child theme, that will become possible? Any thoughts would be appreciated.

psychobunny

I would fork lavender. If I'm honest, the child theme concept isn't fully developed as of yet - it only really works if vanilla is the parent theme. It's one of those things that nobody has really looked into yet because our theming community is so small (I can count you guys on my fingers :P) but definitely is a priority that we should be looking at in the coming versions. Any feedback welcome of course

mootzville

@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.

arasbm

@mootzville wow, thank you for the awesome reply, it is very helpful. I will fork lavender as @psychobunny suggested, and follow your tips to customize it.

julian

@arasbm I personally think forking an existing theme is better (for merging of upstream changes).

My latest theme is based off of vanilla (with no parts from lavender), so I actually used our quickstart theme instead. It breaks the link between vanilla/lavender, so I'm not sure whether this is the right way to go.

Here's a sneak preview :shipit:

a_5mith

You stocking up on cooking recipes there @julian Think the meat cleaver might be a bit overkill for preparing that garlic.

julian

Can't go overkill on garlic

a_5mith

@julian I was on holiday in the south of France about 5 years ago, i ordered garlic prawns with a bit of French bread from a local restaurant. What I got was more like a garlic soup with a side of garlic, some bread, and a couple of prawns that had been marinated in garlic for about 6 months. I've not eaten it since.

However to keep this topic on the rails, the theme looks great. I was toying with the idea of releasing a theme with a theme customiser built in, if you conveniently want to beat me to it, I won't be angry.

esiao

I used nodebb-theme-quickstart aswell for deep-space (galaxygraph theme) I think I didn't edit the readme.md
Nice theme Julian, may I suggest to not use transparency on categories since I guess the background can be changed it can cause issues of readability. I dig the idea of the big background photography rather than the content.