Custom Theme Logic

lesserfaith

Hello all,

I was trying to understand the logic behind custom theming on Vanilla OS.

I wanted to change some basic html structure and a few css strings based on the Keystone theme. Should I duplicate all Keystone files and edit the ones that I need to edit, or should I only place in my new custom theme folder only edited files, and the rest of unmodified files will be automatically be read from the original Keystone theme folder?

I am wondering what is the best practice here in order to keep the custom parts as lean as possible in order to make it easier to manage software updates in the future.

Thank you

N

R_J

If you want to have the keystone theme with only a few changes, you will have to come the keystone theme. But every future changes will be lost since there is no inheritance in themes.

There are other options, though. Keystone is based on the theme boilerplate. If you know about building tools and sass, you can built the theme from its source which will allow you to keep up to date with the official theme.

If your changes only require css you can use a plugin to inject that.

Vanilla allows altering views in many ways by its event system. You do not always need to override the complete view.

But if you want to use keystone and you really want to completely override one or two views, that should be possible with a plugin so that you keep all the rest from the keystone theme

Kaspar

It will only look in one folder - so all in one folder.

charrondev

I'd highly recommend taking a look at theme boilerplate:

https://docs.vanillaforums.com/developer/theme-boilerplate/

It's what this site's community theme is based off of.

• All of the core CSS is an npm package, so you can pull improvements we make later whenever you're ready without needing to update a bunch of copy/pasted files.
• Built with CSS with many variables exposed. See https://github.com/vanilla/community/blob/master/themes/open-vf-com/src/scss/base/_variables.scss for an example.

Having the variables available to modify can save you a lot of work. Imagine you want to update the primary brand colors and text colors of the theme. If you were to do it just with some special CSS, you would have to write 100s or 1000s of lines of CSS to actually get it showing everywhere and you might miss some spots.

If you go update the variable it will be used everywhere with just 1 line of code changed!

lesserfaith

Thank you all for your detailed answers, community support is truly excellent on Vanilla. I will plan the changes and then decide which is the best method to make my community futureproof.

Brando3023

Hello,

I am trying to apply custom theming to our Vanilla server and every time apply it I see some of the css break. This occurs when I use the our updated variables.json or if I copy the original variables.json from the Foundation theme. I am currently using the 2021.009 version release if that helps.

Thank you for your assistance.