Hi,
I made a child theme based on Vantage. This works fine when I place my style customizations in my child’s style.css (I looked at https://siteorigin.com/thread/child-theme/). But I would prefer to use less, just like vantage itself.
This is what I did:
I created style.less in my child theme, in it:
/* Theme Name: Vantage Child Author: SiteOrigin Template: vantage Version: 1.0.0 */ @import "../vantage/less/mixins"; @import "../vantage/less/reset"; @import "../vantage/style"; @import "../vantage/less/slider"; @import "../vantage/less/widgets"; @import "../vantage/less/loops"; @import "../vantage/less/woocommerce"; @import "../vantage/less/jetpack-infinite-scroll"; @import "../vantage/less/yoast"; @import "../vantage/less/icons";
But to start with, the looking glass in the header is missing and margins are different than in the original theme.
Is there a best practice for what I want? I guess it is a bit of a general question, not completely related to Vantage…
Thnx for your thoughts,
Inge
Hi Inge
Thanks for reaching out.
Do you have a local Less compiler running? Less is a pre-processor, it needs to be processed locally and compiled, in this case, into the child style.css file.
You’re welcome to use a style.less file which compiles into a style.css file for the child theme. I wouldn’t use all of the parent theme Less files in the child theme. If you compile all of the parent theme Less into the child theme style.css file you’d have a repeat of most of the CSS in theme. Your child theme only needs to contain the CSS rules you want to edit and any new CSS rules.
Above reply was edited. If you’re reading via email, please, check the reply on the forum. Thanks.
Thnx, Andrew! In the meantime I bought Vantage Premium and played with the Customizer. What I thought is not true: I thought there would be a definition of colors and font, etc in less, which would then be overridden programmatically with the customizer, but it’s not. What I change in the customizer, is put directly in the document as styles with id=”customizer-css”.
So yes, it’s easiest to make a style.less in my child theme and override existing styles, add new styles and combine all that with the Customizer settings.
Great product! Thanks again!
Thanks for your support, it’s most appreciated.
The way the Customizer functions is the standard WordPress method. Your thinking is spot on though. We hope to develop a framework to dynamically output CSS using Less or Sass in the future.
All the best with your site :)