HackerOne users: Testing against this community violates our program's Terms of Service and will result in your bounty being denied.

Keystone Personalization

Hi all!

I would like to personalize the official Keystone theme with my own color set, is this possible? And how?

Thank you!



  • Options

    Are you already Sassy? With an existing workflow that resembles efficient? If the answer is Yes, then forgive the ultra basic step by step tutorial here.... :) Just extract what you need.

    I will avoid every mention of so-called scary words as command line, gulp, compass, local web development environment, git, repo clone etc etc - I am doing so only now just in case you need to step up your game.

    1. Grab http://koala-app.com/
    2. Grab Vanilla Forum theme-boilerplate: https://minhaskamal.github.io/DownGit/#/home?url=https://github.com/vanilla/vanilla/tree/master/themes/theme-boilerplate
    3. Grab Vanilla Forum keystone: https://minhaskamal.github.io/DownGit/#/home?url=https://github.com/vanilla/vanilla/tree/master/themes/keystone
    4. Create a folder structure on your computer: C:\mydocuments\vanillaDev to house the extracted folders above to resemble the structure on the github source or your website
    5. Your main concern will be themes/keystone/src/scss/custom_default.scss
    6. and themes/keystone/src/scss/base/_variables.scss the Brand Colors section.
    7. You may consider renaming the keystone theme to your liking.
    8. After your Sass edits, you compile this stuff with Koala. Drag the C:\mydocuments\vanillaDev\themes\myKeyStone\src\scss\ folder into Koala and boom! It will spit out an uploadable custom_default.css
    9. Note! I would never touch theme-boilerplate. I would keep the edits on my version of keystone as commented and logical and structured as possible using my own @import. I would seek ways to make this workflow more efficient and sustainable especially with future upgrades. Be smart now, to keep away hazards and frustrations later.

    Hope this helps.


  • Options

    Hi @Lorenzo_Prn

    To personalize Keystone (or any other) theme use Css edit plugin or just add your own css instructions to custom_*. css file via @import url

  • Options

    Don't forget to duplicate and own whatever theme you are working on, or else, when you upgrade Vanilla, the changes you made will hit the ether.

  • Options

    To be honest, since I needed just to change colours, I've just modified the custom_default.css in keystone/design via FileZilla replacing the original RGB colours with my set of RGB colours

  • Options

    Yup, I used to do that. in fact I just loaded my own CSS file after the custom_default right in my template file to override what I needed, but then realized I needed much more and I also wanted to now automate all future updates

Sign In or Register to comment.