How to Style Email Template in Magento2

emailmagento2

How to style email template? I want to override email variable value and change style according without element inline style used. Is there possible to complie email's less files with grunt.

How to compile email style?

Best Answer

Please follow below step to compile email.less

copy _email-extend.less folder from vendor/magento/theme-frontend-blank/web/css/source/_email-extend.less and put under app/design/frontend/vendor(packagename)/your-theme(custom theme)/web/css/source/

open root/dev/tools/grunt/configs/theme.js and put following code in it (configure your theme in theme.js)

    theme: {
    area: 'frontend',
    name: 'vendor/your-theme',
    locale: 'en_US',
    files: [
        'css/styles-m',
        'css/styles-l',
        'css/email',
        'css/email-inline',            

    ],
    dsl: 'less'

Clean root/var/ and pub/static folder.
Run grunt exec:theme (your-theme)
Run php bin/magento setup:static-content:deploy
Run grunt watch:theme (your-theme)
Modify "_email-extend.less", now it is compile through grunt.

Related Solutions

Magento – Email template and custom variables acting very strange

In your template you could use a custom block like this

{{block type='fooman_example/email' config_var='SOCIALBUTTONS'}}

and then in your block based on Mage_Core_Model_Email_Template_Filter

<?php
class Fooman_Example_Block_Email extends Mage_Core_Block_Template
{

    protected function _toHtml()
    {
        $customVarValue = '';
        $variable = Mage::getModel('core/variable')
            ->setStoreId(Mage::app()->getStore()->getStoreId())
            ->loadByCode($this->getConfigVar());
        if ($value = $variable->getValue(Mage_Core_Model_Variable::TYPE_HTML)) {
            $customVarValue = $value;
        }
        return $customVarValue;
    }
}

Override Gallery.css in Magento 2

We can override the less file lib in our custom theme. Put this file under web folder:

app/design/frontend/{Vendor}/{Theme}/web/mage/gallery/gallery.less

and add mage/gallery/gallery in PROJECT/dev/tools/grunt/configs/themes.js (or PROJECT/dev/tools/grunt/configs/local-themes/themes.js for magento 2.2) to make grunt compiling it as well.

Best Answer

Related Solutions

Magento – Email template and custom variables acting very strange

Override Gallery.css in Magento 2

Related Topic