0

I need to update existing email header. There for I have to modify some styles.but doesn't define in specific style in app/design/frontend/{themename}/{namespace}/Magento_Email/email/header.html

app/design/frontend/{themename}/{namespace}/Magento_Email/email/header.html

 <!--
/**
 * Copyright © 2016 Magento. All rights reserved.
 * See COPYING.txt for license details.
 */
-->
<!--@subject Header @-->
<!--@vars {
"var logo_height":"Email Logo Image Height",
"var logo_width":"Email Logo Image Width",
"var template_styles|raw":"Template CSS"
} @-->

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="initial-scale=1.0, width=device-width" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <style type="text/css">
        {{var template_styles|raw}}

        {{css file="css/email.css"}}
    </style>
</head>
<body>
{{inlinecss file="css/email-inline.css"}}

<!-- Begin wrapper table -->
<table class="wrapper" width="100%">
    <tr>
        <td class="wrapper-inner" align="center">
            <table class="main" align="center">
                <tr>
                    <td class="header">
                        <a class="logo" href="{{store url=""}}">
                            <img
                                {{if logo_width}}
                                    width="{{var logo_width}}"
                                {{else}}
                                    width="180"
                                {{/if}}

                                {{if logo_height}}
                                    height="{{var logo_height}}"
                                {{else}}
                                    height="52"
                                {{/if}}

                                src="{{var logo_url}}"
                                alt="{{var logo_alt}}"
                                border="0"
                            />
                        </a>
                    </td>
                </tr>
                <tr>
                    <td class="main-content">
                    <!-- Begin Content -->

but after preview the Email template in admin panel it show as below. Check below image

enter image description here

I need to change background color and padding and width of the highlighted element (<td>)

How change the style in element ?

1

Please add your css in _email.less file. Below is the file path.

app/design/frontend/{themename}/{namespace}/web/css/source/_email.less

If _email.less is not exists on this file then copy it from the parent theme.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.