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.
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
Your main concern will be themes/keystone/src/scss/custom_default.scss
and themes/keystone/src/scss/base/_variables.scss the Brand Colors section.
You may consider renaming the keystone theme to your liking.
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
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.
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
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
Comments
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.
C:\mydocuments\vanillaDevto house the extracted folders above to resemble the structure on the github source or your websitethemes/keystone/src/scss/custom_default.scssthemes/keystone/src/scss/base/_variables.scssthe Brand Colors section.C:\mydocuments\vanillaDev\themes\myKeyStone\src\scss\folder into Koala and boom! It will spit out an uploadable custom_default.css@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.
Cheers
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
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.
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
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