I am trying to style my custom email template. I am using Hyva theme and have copied magent2-email-moduleviewfrontendwebcssemail.less file in my own theme to apply my own styles. It does work. However, there are some components where inline css is getting applied and my own custom css is being overridden by those styles. The inline css part is defined in header.html file that is below
<!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}}"
{{/if}}
src="{{var logo_url}}"
alt="{{var logo_alt}}"
border="0"
/>
</a>
</td>
</tr>
<tr>
<td class="main-content">
<!-- Begin Content -->
The {{inlinecss file=”css/email-inline.css”}} part is where all the inline styles are coming from and checking that file, There are only some import statements. I cannot find the styles in this file. The email-inline.less file is below.
/**
* Copyright © Magento, Inc. All rights reserved.
* See COPYING.txt for license details.
*/
//
// Styles for emails
// _____________________________________________
// See comments in source/_email-base.less for explanation of email styles
@import 'source/lib/_lib.less'; // Global lib
@import 'source/lib/variables/_email.less'; // Global email variables
@import 'source/_theme.less'; // Global variables override
@import 'source/_variables.less'; // Local theme variables
@import 'source/_email-variables.less'; // Theme variables for emails
//
// Styles for emails
// ---------------------------------------------
@import 'source/_email-base.less'; // Contains primary email styles
@import 'source/_email-extend.less'; // Contains theme-specific adjustments to email styles
//
// Module-specific styles for emails
// ---------------------------------------------
//@magento_import 'source/_email.less';
How do I override the styles that are coming from this file? I cannot remove it because removing this file messes up all of the styles that even my custom styles are messed up.
An example of inline css styles is below.
I have an <h1> component and my custom styles for this component are
<h1 class="section-heading order-number-heading">{{trans 'Your Invoice <span class="number">#%invoice_id</span> for Order <span class="number">#%order_id</span>' invoice_id=$invoice.increment_id order_id=$order.increment_id|raw}}</h1>
.order-number-heading span {
color: @primary-color;
font-size: 26px;
font-weight: 400;
}
but, the email-inine.less file overrides my custom styles with
<h1 class="section-heading order-number-heading" style="font-weight: 300; line-height: 1.1; font-size: 26px; margin-top: 0; margin-bottom: 20px;">Your Invoice <span class="number">#000000060</span> for Order <span class="number">#000000160</span>
</h1>
I do not need those inline styles. I need my custom styles.
Please guide me through the process. Thanks.