Hi,
I'm making use of the Snowdog/blank SASS theme with Frontools. For the custom theme I want to apply on my shop I extend from the Snowdog/blank theme, using the following themes.json:
{ "snow-blank": { "src": "vendor/snowdog/theme-blank-sass", "dest": "pub/static/frontend/Snowdog/blank", "locale": ["nl_NL"] }, "klaas-default": { "src": "app/design/frontend/Klaas/default", "dest": "pub/static/frontend/Klaas/default", "locale": ["nl_NL"], "localeOverwrites": true, "parent": "snow-blank", "postcss": ["plugins.autoprefixer()"] } }
When I select the appropriate theme in the Magento configuration (Klaas/default) and run:
gulp styles
.. all is sweet. There's the blank SASS theme.
My current approach (this doesn't seem right):
I copy:
vendor/snowdog/theme-blank-sass/styles/styles.scss
.. to my own theme:
app/design/frontend/Klaas/default/styles/styles.scss
.. and add some 'hooks' to apply customization, such as:
... // Theme variables @import 'variables';
// >> HOOK FOR VARIABLES @import "custom-variables"; // Reset default styles with magento-reset @include lib-magento-reset(); ... @import '../Magento_MultipleWishlist/styles/widgets'; @import '../Magento_VersionsCms/styles/widgets';
// >> HOOK FOR CUSTOM THEMING @import 'extend';
This sorta works, I get to override/add variables and add surplus SASS in:
app/design/frontend/Klaas/default/styles/_extend.scss
However, also when I have to apply custom styling on a certain module I have to copy (for example the Magento_Review module):
vendor/snowdog/theme-blank-sass/Magento_Review/styles/_module.scss
.. to my own theme and edit/extend this file.
My problem:
What is the recommended way to extend the Snowdog/blank theme and apply custom styling?
Am I doing it correctly already or is there a way to copy less code/styling directly from the Snowdog/blank theme?
I stand in front of the same problem.
Can you please provide a simple step by step solution for creating new theme which extends from snowdog/blank theme.
That would be nice
Thanks in advance
bambamboole
Thanks for raising this.
I am doing something similar, as well as creating blank `_child-extend-var.scss` and `_child-extend-patterns.scss' files so that my themes child (or the snowdog/blank grandchild theme if you like) can add styles.
But it just doesn't feel right.
An example child theme that follows best practices would be great.
Also, it seems it is not possible to simply change the default button color by changing a (theme-)variable. This is because the variables used in "styles\vendor\magento-ui\_buttons.scss" don't have the "!default" suffix on declaration as such:
$button__background: $color-gray-darken0 !default;
I suppose this needs to be added to all the variable declarations in "styles\vendor\magento-ui".
Yes, I found this too.
There is a pull request to do just that - https://github.com/SnowdogApps/magento2-theme-blank-sass/pull/142
I've merged it in to my fork.
I saw that one a tad late, and got working on the same thing. I've however made all settings available as variables in my pull-request and cleanup the internals of the _buttons.scss in magento-library and in "blocks". Please consider:
https://github.com/SnowdogApps/magento2-theme-blank-sass/pull/151
I'm going to look into the whole "_navigation.scss" as well ...
Whole Magento UI looks the same, so it's complex problem.
The navigation vars would be good too.
It might be worth looking at this github issue - https://github.com/SnowdogApps/magento2-theme-blank-sass/issues/143
@Bartek Igielski - if there are many more of this variables that need doing, how do you feel about raising each one as a github issue and creating a 'milestone' to get them all done. Hopefully we will be able to reduce the amount of people duplicating fixes, and spread the work out a bit.
I think that, in order to have full control over most of the design using just theme-variables, first all magento-ui variables need to be separated from the magento-ui lib mixins.
I realize just now that this should exactly follow the current Less implementation, e.g: /lib/web/css/source/lib/variables/_buttons.less (something I failed to do on my pull-request for the button variables). This could be performed quite generically, starting from the less files. Do you agree that that is a good way to regenerate and improve the current implementation of the content of the magento-ui directory?