• Home
  • Categories
  • Recent
  • Popular
  • Top
  • Tags
  • Users
  • Groups
  • Documentation
    • Home
    • Read API
    • Write API
    • Plugin Development
Skins
  • Light
  • Cerulean
  • Cosmo
  • Flatly
  • Journal
  • Litera
  • Lumen
  • Lux
  • Materia
  • Minty
  • Morph
  • Pulse
  • Sandstone
  • Simplex
  • Sketchy
  • Spacelab
  • United
  • Yeti
  • Zephyr
  • Dark
  • Cyborg
  • Darkly
  • Quartz
  • Slate
  • Solar
  • Superhero
  • Vapor

  • Default (No Skin)
  • No Skin
Collapse
v3.5.2 Latest
Buy Hosting

Developing a child theme vs forking an existing theme

Scheduled Pinned Locked Moved Technical Support
child themetheme
9 Posts 6 Posters 4.8k Views
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
Reply
  • Reply as topic
Log in to reply
This topic has been deleted. Only users with topic management privileges can see it.
  • A Offline
    A Offline
    arasbm
    wrote on last edited by
    #1

    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.

    1 Reply Last reply
    0
  • psychobunnyP Offline
    psychobunnyP Offline
    psychobunny
    wrote on last edited by
    #2

    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 🙂

    1 Reply Last reply
    1
  • mootzvilleM Offline
    mootzvilleM Offline
    mootzville
    wrote on last edited by mootzville
    #3

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

    1. Add a widget location object to the theme.js file. <-- Look at the theme.js file and you'll see what I mean.
    2. 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:

    1. Append your .less to the end of the theme.less file.
    2. Backup .tpl files as .backup before changing.
    3. 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.

    1 Reply Last reply
    3
  • A Offline
    A Offline
    arasbm
    wrote on last edited by
    #4

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

    1 Reply Last reply
    0
  • julianJ Offline
    julianJ Offline
    julian GNU/Linux
    wrote on last edited by
    #5

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

    Selection_020.png

    A 1 Reply Last reply
    1
  • A Offline
    A Offline
    a_5mith
    replied to julian on last edited by
    #6

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

    1 Reply Last reply
    1
  • julianJ Offline
    julianJ Offline
    julian GNU/Linux
    wrote on last edited by
    #7

    Can't go overkill on garlic

    A 1 Reply Last reply
    1
  • A Offline
    A Offline
    a_5mith
    replied to julian on last edited by a_5mith
    #8

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

    1 Reply Last reply
    2
  • esiaoE Offline
    esiaoE Offline
    esiao
    wrote on last edited by
    #9

    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.

    1 Reply Last reply
    0

Copyright © 2023 NodeBB | Contributors
  • Login

  • Don't have an account? Register

  • Login or register to search.
Powered by NodeBB Contributors
  • First post
    Last post
0
  • Home
  • Categories
  • Recent
  • Popular
  • Top
  • Tags
  • Users
  • Groups
  • Documentation
    • Home
    • Read API
    • Write API
    • Plugin Development