Custom Theme Development

[crantron]

I installed theme-blank-sass and front tools easily, and created a themes.json

{
  "blank": {
    "src": "vendor/snowdog/theme-blank-sass",
    "dest": "pub/static/frontend/Snowdog/blank",
    "locale": ["en_US"]
  },
  "zymo": {
    "src": "vendor/gigasavvy/theme-frontend-zymo",
    "dest": "pub/static/frontend/Gigasavvy/zymo",
    "locale": ["en_US"],
    "stylesDir": "styles",
    "postcss": ["plugins.autoprefixer()"],
    "parent": "blank"
  }
}

I'm just super confused on how to override blank theme styles.

• Is there a boiler plate file where I easily change colors, borders, etc that I'm missing?

I know this isn't an issue, I'm just not sure where else to ask.

[Igloczek]

Inheritance works as in any other place in Magento. File in the same directory with the same name will overwrite the same file from parent theme.

Rest of the magic is just pure SASS code, so it depends on you how you want to handle this. You can overwrite a file with variables, but also create a new and just overwrite few variables. Same about any other files, you can overwrite them or just add another partial with custom styles (modifying styles.scss imports).

There is an forum "room" for non-issue topics - https://community.magento.com/t5/Less-to-Sass-Community-Project/bd-p/less-to-sass Link to this forum is in the readme, below big "Questions" heading 😉

BTW. You don't have to define stylesDir and postcss in themes.json as long as they are excatly same as default values.

[crantron]

So just to make things clear

+my-theme
+--styles
+----styles.scss <--(what do I put in here)

To override

+theme-blank-sass
+--styles
+----vendor
+------magento-ui
+--------variables
+----------colors.scss <--- (the variables in here)

using your front tools and using your blank theme as a parent. I hope that makes sense, and I'm done fishing for help :P

[Igloczek]

You shouldn't touch code inside vendor directory, especially magento-ui. Threat this as core, with Ben pointing on you with that face

So basically you need to create a new file to override these variables inside your theme, i.e. my-theme/styles/_colors-variables.scss and add this file import to styles.scss (copy paste from blank and customize)

[crantron]

ahhhh! And while you're here, last question, I see that styles.css is not getting linked in the generated pages (I see styles-m.css and styles-l.css in the markup). Do I have to add that declaration via deafult_head_blocks.xml? Or did I miss a configuration step?

[Igloczek]

Sass verion of blank theme use only one style.css and it's already defined.

[crantron]

What I'm saying is styles.css in not getting included by blank theme or my custom theme within the generated html pages. But thanks for all your help!

[Igloczek]

I'm pretty sure that you are checking LESS blank, not SASS blank :wink:

[crantron]

styles.min.css in both my custom theme and snowdog do not have something like <link rel="stylesheet" type="text/css" media="all" href="https://zymo.dev/shop/static/version1485971804/frontend/Gigasavvy/zymo/en_US/css/styles-m.css"> in the html markup. is this getting linked some other way?

[Igloczek]

Check if you set a correct parent in theme.xml file. Looks like you use LESS blank as parent, not our blank.

[crantron]

<theme xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Config/etc/theme.xsd">
    <title>Zymo</title>
    <parent>Snowdog/blank</parent>
    <media>
        <preview_image>media/preview.jpg</preview_image>
    </media>
</theme>

[Igloczek]

Weird... But really, there is no way to have any less files inside theme than extends sass version of blank, b/c everything is defined here https://github.com/SnowdogApps/magento2-theme-blank-sass/blob/master/Magento_Theme/layout/default_head_blocks.xml

[crantron]

Okay, got that working (never forget to disable all cache). Final question, do I copy over everything from blank sass theme to my custom theme that I want to use sass wise?

i.e.

[Igloczek]

Nope, just this one you want to modify, rest of files are automatically inherited in the background. Just remember to re-run gulp styles / gulp dev /gulp watch when you add / remove any files.

[crantron]

cool that seems to be going, lastly.

my-theme/styles/styles.scss

//overrides
@import 'colors-override'; //override here

// Mixins
@import "mixins/media-queries";

// Vendor libs
@import 'vendor/normalize/lib'; // Normalize.css
@import 'vendor/magento-ui/lib'; // Magento UI

// Theme variables
@import 'variables';

// Reset default styles with magento-reset
@include lib-magento-reset();

// Theme blocks
@import 'blocks/extends';
@import 'blocks/typography';
@import 'blocks/layout';
@import 'blocks/tables';
@import 'blocks/messages';
@import 'blocks/navigation';
@import 'blocks/tooltips';
@import 'blocks/loaders';
@import 'blocks/forms';
@import 'blocks/icons';
@import 'blocks/buttons';
@import 'blocks/sections';
@import 'blocks/pages'; // Theme pager
@import 'blocks/actions-toolbar';
@import 'blocks/breadcrumbs';
@import 'blocks/popups';
@import 'blocks/price';

// Components styles (modal/sliding panel)
@import 'blocks/components/modals'; // from lib
@import 'blocks/components/modals_extend'; // local

// Modules
@import '../Magento_AdvancedCheckout/styles/module';
@import '../Magento_AdvancedSearch/styles/module';
@import '../Magento_Braintree/styles/module';
@import '../Magento_BraintreeTwo/styles/module';
@import '../Magento_Bundle/styles/module';
@import '../Magento_Catalog/styles/module';
@import '../Magento_CatalogEvent/styles/module';
@import '../Magento_CatalogSearch/styles/module';
@import '../Magento_Checkout/styles/module';
@import '../Magento_Customer/styles/module';
@import '../Magento_Downloadable/styles/module';
@import '../Magento_GiftCard/styles/module';
@import '../Magento_GiftCardAccount/styles/module';
@import '../Magento_GiftMessage/styles/module';
@import '../Magento_GiftRegistry/styles/module';
@import '../Magento_GiftWrapping/styles/module';
@import '../Magento_GroupedProduct/styles/module';
@import '../Magento_Invitation/styles/module';
@import '../Magento_LayeredNavigation/styles/module';
@import '../Magento_Msrp/styles/module';
@import '../Magento_MultipleWishlist/styles/module';
@import '../Magento_Multishipping/styles/module';
@import '../Magento_Newsletter/styles/module';
@import '../Magento_Paypal/styles/module';
@import '../Magento_ProductVideo/styles/module';
@import '../Magento_Review/styles/module';
@import '../Magento_Reward/styles/module';
@import '../Magento_Rma/styles/module';
@import '../Magento_Sales/styles/module';
@import '../Magento_SalesRule/styles/module';
@import '../Magento_SendFriend/styles/module';
@import '../Magento_Swatches/styles/swatches';
@import '../Magento_Theme/styles/module';
@import '../Magento_Vault/styles/module';
@import '../Magento_Weee/styles/module';
@import '../Magento_Wishlist/styles/module';

// Widgets
@import '../Magento_AdvancedCheckout/styles/widgets';
@import '../Magento_Banner/styles/widgets';
@import '../Magento_Catalog/styles/widgets';
@import '../Magento_CatalogEvent/styles/widgets';
@import '../Magento_Cms/styles/widgets';
@import '../Magento_MultipleWishlist/styles/widgets';
@import '../Magento_VersionsCms/styles/widgets';

my-theme/styles/_colors-override.scss

$color-blue1: #000;
$link__color: $color-blue1;

does not change the link colors they remain #1979c3

[Igloczek]

Don't you think it should be loaded after thing that you try to override 😉 ?

Put this import after @import 'vendor/magento-ui/lib'; // Magento UI or even after @import 'variables'; it will let you made more customizations.

[crantron]

At first I put it at the bottom and no changes were made either. But, followed the latter and you're the best. Thank you for taking time out of your day to help!

[Igloczek]

Remember about execution order, SASS is merging everything together (in imports order) and then compiling. So if you add them at end, will affect only code after this point... so basically nothing :)

You're welcome. See you next time on forum 😉

[saminforca]

@Igloczek ,

I am a newbie to sass. I've installed a vendor/snowdog/theme-blank-sass theme and started to create my custom theme.

I got successfuly custom theme developed and applied from the backend.

/var/www/html/magento/sassmagedemo/app/design/frontend/Klaas/default

1. I've created styles.scss under the /var/www/html/magento/sassmagedemo/app/design/frontend/Klaas/default/styles

and then run sudo gulp styles

I did some code write in styles.scss under my custom theme and code got executed successfully but here I am running into the problem that my parent theme styles.scss overrode.

What I want is that I need a parent style.scss plus my custom them style.scss code should persist.

Here is my themes.json file code

{
  "blank": {
    "src": "vendor/snowdog/theme-blank-sass",
    "dest": "pub/static/frontend/Klaas/default",
    "locale": ["en_US"],
    "ignore": [".test"],
    "localeOverwrites": true,
    "stylesDir": "styles"
  },
  "klaas": {
    "src": "app/design/frontend/Klaas/default",
    "dest": "pub/static/frontend/Klaas/default",
    "locale": ["en_US"],
    "parent": "blank",
    "postcss": ["plugins.autoprefixer()"]
  }
}

Could you please guide me how to avoid code override of parent theme and only override the code that I write actually in my custom theme's styles.scss

Regards, Sam