Created
May 9, 2017 07:15
-
-
Save jeroenalewijns/d989d9e9fa5d0a2fcf2c07b8dabfcee3 to your computer and use it in GitHub Desktop.
Magento2 - email header
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
## Template Content | |
<!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="600" align="center"> | |
<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> </td></tr> | |
<tr> | |
<td class="main-content"> | |
<!-- Begin Content --> | |
## Template Styles | |
/* @START HEADER */ | |
body{ | |
font-size: 14px; | |
line-height: 21px; | |
margin: 0px; | |
padding: 50px 0px; | |
} | |
h1{ | |
font-size: 28px; | |
line-height: 42px; | |
} | |
h2{ | |
font-size: 26px; | |
line-height: 40px; | |
} | |
h3{ | |
font-size: 22px; | |
line-height: 33px; | |
} | |
h4{ | |
font-size: 20px; | |
line-height: 30px; | |
} | |
h5{ | |
font-size: 18px; | |
line-height: 27px; | |
} | |
h6{ | |
font-size: 16px; | |
line-height: 24px; | |
} | |
p, | |
p a, | |
a { | |
margin: 0px; | |
padding: 0px; | |
} | |
dd{ | |
margin: 0px; | |
} | |
table{ | |
background-color: #FFFFFF; | |
width: 100%; | |
} | |
table tr td{ | |
vertical-align: top; | |
} | |
table th{ | |
text-align: left; | |
} | |
table tfoot.order-totals tr.subtotal th, | |
table tfoot.order-totals tr.subtotal td{ | |
border-top: 20px solid #FFFFFF; | |
} | |
table.wrapper{ | |
width: 600px; | |
} | |
/* @END HEADER */ | |
/* @START ORDER_NEW */ | |
table.email-items{ | |
border-top: 20px solid #FFFFFF; | |
} | |
table.order-details{ | |
border-bottom: 1px solid #005575; | |
border-top: 1px solid #005575; | |
} | |
/* @END ORDER_NEW */ | |
/* @START BUTTON */ | |
table.button table.inner-wrapper tr td{ | |
border-top: 20px solid #FFFFFF; | |
border-bottom: 20px solid #FFFFFF; | |
} | |
table.button table.inner-wrapper tr td a{ | |
background-color: #32BCE1; | |
border: 10px solid #32BCE1; | |
color: #FFFFFF; | |
text-decoration: none; | |
} | |
/* @END BUTTON */ | |
/* @START FOOTER */ | |
.footer table tr td{ | |
vertical-align: top; | |
} | |
/* @END FOOTER */ | |
/* @CUSTOM TEMPLATE SETTINGS */ | |
body{ | |
background-color: #EBF1ED; | |
color: #005575; | |
font-family: 'Verdana'; | |
} | |
h1, h2, h3, h4, h5, h6{ | |
color: #32BCE1; | |
} | |
p, | |
p a, | |
a { | |
color: #005575; | |
} | |
.footer{ | |
background-color: #006590; | |
border: 20px solid #006590; | |
} | |
.footer table{ | |
background-color: #006590; | |
} | |
.footer table tr td p, | |
.footer table tr td p a, | |
.footer table tr td a { | |
color: #FFFFFF; | |
} | |
/* @CUSTOM TEMPLATE SETTINGS */ |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment