2

I have a very frustrating issue with the Magento 2 sales order emails. Through experimentation, I worked out the locations of the many files that are used to comprise these emails.

At some point, I edited what I believe was

/app/design/frontend/themefolders/web/source/_email-extend.less

to alter the CSS there to check if that makes a difference to the resulting sales emails.

The confusion I have is that sometimes editing this seems to influence the resulting emails, sometimes not.

My question is, how do I clarify for sure what .less / .css files are being used as the source for the CSS that I believe is embedded into emails. I'm not sure if the normal css that is in the pub/static folders of magento comes into this or not. Clarification about the exact source files for email css would be great.

  • where you able to read this devdocs.magento.com/guides/v2.3/frontend-dev-guide/css-topics/… ? – fmsthird Oct 15 at 5:07
  • Yes I had @fmsthird, what I'd like is for someone to clarify in summary how the css is compiled into emails. I understand the basic idea of how .less files are compiled into the public static folders to produce final css but for emails I am less clear what files are being referenced in the generation of the emails and if the static folder actually has anything to do with this. – AdamJones Oct 17 at 19:36
0

Confusingly looks like a mixture of places

Have you tried viewing the source of one of your emails

A forgotten password email I generated using Luma US theme from the admin pulled this via import statement

@import url("http://magento2.docker/static/version1571346637/frontend/Magento/luma/en_US/css/email-fonts.css");

So pub/static

But then I spotted blockquote cite{font-style:normal} which is a bit unusual and easy to search for.

I found this inside

var/view_preprocessed/pub/static/frontend/Magento/luma/en_US/css/email-inline.css

which is built from

vendor/magento/theme-frontend-blank/web/css/email-inline.less

I've read you can override these

Add your custom styles here for common emails: 
app/design/frontend/Vendor/Theme/web/css/source/_email-extend.less

Add your custom less variables here for common emails : 
app/design/frontend/Vendor/Theme/web/css/source/_email-variables.less

Add your custom styles here for sales emails : 
app/design/frontend/Vendor/Theme/Magento_Sales/web/css/source/_email.less

Note: I'm a backend dev. I won't be able to confirm this for you but logically makes sense.

0

Found this in Magento Documentation this might be a good read. This explains at least How to Style Email Templates and how email styles are organized.

0

You need to override below two css files from Magento default blank theme to you custom theme and editing those files.

Magento_Blank_theme_dir/web/css/source/_email-extend.less

Magento_Blank_theme_dir/web/css/source/_email-variables.less

Your custom theme css path will be below

app/design/frontend/Vendor/Theme/web/css/source/_email-extend.less

and

app/design/frontend/Vendor/Theme/web/css/source/_email-variables.less

and for sales email

app/design/frontend/Vendor/Theme/Magento_Sales/web/css/source/_email.less

you can check this magento devdoc link for reference.

https://devdocs.magento.com/guides/v2.3/frontend-dev-guide/templates/template-email.html

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.