templates/layout_email.html.twig line 1

Open in your IDE?
  1. {# email general layout #}
  2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml">
  4. <head>
  5.     <meta charset="utf-8"> <!-- utf-8 works for most cases -->
  6.     <meta name="viewport" content="width=device-width"> <!-- Forcing initial-scale shouldn't be necessary -->
  7.     <meta http-equiv="X-UA-Compatible" content="IE=edge"> <!-- Use the latest (edge) version of IE rendering engine -->
  9.         
  10.     <title>Premium Beauty Media</title> <!-- The title tag shows in email notifications, like Android 4.4. -->
  12.     <!-- Web Font / @font-face : BEGIN -->
  13.     <!-- NOTE: If web fonts are not required, lines 9 - 26 can be safely removed. -->
  14.     
  15.     <!-- Desktop Outlook chokes on web font references and defaults to Times New Roman, so we force a safe fallback font. -->
  16.     <!--[if mso]>
  17.         <style>
  18.             * {
  19.                 font-family: sans-serif !important;
  20.             }
  21.         </style>
  22.     <![endif]-->
  23.     
  25.     <!--[if !mso]><!-->
  26.         <!-- insert web font reference -->
  27.                 <link href='https://fonts.googleapis.com/css?family=Roboto:400,700' rel='stylesheet' type='text/css'>
  28.     <!--<![endif]-->
  30.     <!-- Web Font / @font-face : END -->
  31.     
  32.     <!-- CSS Reset -->
  33.     <style type="text/css">
  35.         /* What it does: Remove spaces around the email design added by some email clients. */
  36.         /* Beware: It can remove the padding / margin and add a background color to the compose a reply window. */
  37.         html,
  38.         body {
  39.             margin: 0 auto !important;
  40.             padding: 0 !important;
  41.             height: 100% !important;
  42.             width: 100% !important;
  43.         }
  44.         
  45.         /* What it does: Stops email clients resizing small text. */
  46.         * {
  47.             -ms-text-size-adjust: 100%;
  48.             -webkit-text-size-adjust: 100%;
  49.         }
  50.         
  51.         /* What it does: Centers email on Android 4.4 */
  52.         div[style*="margin: 16px 0"] {
  53.             margin:0 !important;
  54.         }
  55.         
  56.         /* What it does: Stops Outlook from adding extra spacing to tables. */
  57.         table,
  58.         td {
  59.             mso-table-lspace: 0pt !important;
  60.             mso-table-rspace: 0pt !important;
  61.         }
  62.                 
  63.         /* What it does: Fixes webkit padding issue. Fix for Yahoo mail table alignment bug. Applies table-layout to the first 2 tables then removes for anything nested deeper. */
  64.         table {
  65.             border-spacing: 0 !important;
  66.             border-collapse: collapse !important;
  67.             table-layout: fixed !important;
  68.             Margin: 0 auto !important;
  69.         }
  70.         table table table {
  71.             table-layout: auto; 
  72.         }
  73.         
  74.         /* What it does: Uses a better rendering method when resizing images in IE. */
  75.         img {
  76.             -ms-interpolation-mode:bicubic;
  77.         }
  78.         
  79.         /* What it does: A work-around for iOS meddling in triggered links. */
  80.         .mobile-link--footer a,
  81.         a[x-apple-data-detectors] {
  82.             color:inherit !important;
  83.             text-decoration: underline !important;
  84.         }
  85.       
  86.     </style>
  87.     
  88.     <!-- Progressive Enhancements -->
  89.     <style>
  90.         
  91.         /* What it does: Hover styles for buttons */
  92.         .button-td,
  93.         .button-a {
  94.             transition: all 100ms ease-in;
  95.         }
  96.         .button-td:hover,
  97.         .button-a:hover {
  98.             background: #5294ce !important;
  99.             border-color: #5294ce !important;
  100.         }
  102.         /* Media Queries */
  103.         @media screen and (max-width: 480px) {
  105.             /* What it does: Forces elements to resize to the full width of their container. Useful for resizing images beyond their max-width. */
  106.             .fluid,
  107.             .fluid-centered {
  108.                 width: 100% !important;
  109.                 max-width: 100% !important;
  110.                 height: auto !important;
  111.                 Margin-left: auto !important;
  112.                 Margin-right: auto !important;
  113.             }
  114.             /* And center justify these ones. */
  115.             .fluid-centered {
  116.                 Margin-left: auto !important;
  117.                 Margin-right: auto !important;
  118.             }
  120.             /* What it does: Forces table cells into full-width rows. */
  121.             .stack-column,
  122.             .stack-column-center {
  123.                 display: block !important;
  124.                 width: 100% !important;
  125.                 max-width: 100% !important;
  126.                 direction: ltr !important;
  127.             }
  128.             /* And center justify these ones. */
  129.             .stack-column-center {
  130.                 text-align: center !important;
  131.             }
  132.         
  133.             /* What it does: Generic utility class for centering. Useful for images, buttons, and nested tables. */
  134.             .center-on-narrow {
  135.                 text-align: center !important;
  136.                 display: block !important;
  137.                 Margin-left: auto !important;
  138.                 Margin-right: auto !important;
  139.                 float: none !important;
  140.             }
  141.             table.center-on-narrow {
  142.                 display: inline-block !important;
  143.             }
  144.                 
  145.         }
  147.     </style>
  149. </head>
  150. <body width="100%" bgcolor="#FFFFFF" style="margin: 0;">
  151.     <center style="width: 100%; background: #FFFFFF;">
  153.         <!-- Visually Hidden Preheader Text : BEGIN -->
  154.         <div style="display:none;font-size:1px;line-height:1px;max-height:0px;max-width:0px;opacity:0;overflow:hidden;mso-hide:all;font-family: sans-serif;">
  155.             {{appname}}
  156.         </div>
  157.         <!-- Visually Hidden Preheader Text : END -->
  159.         <!--    
  160.             Set the email width. Defined in two places:
  161.             1. max-width for all clients except Desktop Windows Outlook, allowing the email to squish on narrow but never go wider than 680px.
  162.             2. MSO tags for Desktop Windows Outlook enforce a 680px width.
  163.         -->
  164.         <div style="max-width: 680px; margin: auto;">
  165.             <!--[if (gte mso 9)|(IE)]>
  166.             <table cellspacing="0" cellpadding="0" border="0" width="680" align="center">
  167.             <tr>
  168.             <td>
  169.             <![endif]-->
  171.             <!-- Email Header : BEGIN -->
  172.             <table cellspacing="0" cellpadding="0" border="0" align="center" width="100%" style="max-width: 680px;">
  173.                 <tr>
  174.                     <td style="padding: 20px 0; text-align: center">
  175.                     <h2 style="font-family: Roboto, sans-serif; font-size:16px; margin-top: 1em; margin-bottom: 1em;">{{appname}}</h2>
  176.                     </td>
  177.                 </tr>
  178.             </table>
  179.             <!-- Email Header : END -->
  180.             
  181.             <!-- Email Body : BEGIN -->
  182.             <table cellspacing="0" cellpadding="0" border="0" align="center" bgcolor="#ffffff" width="100%" style="max-width: 680px;  border: 1px solid #CCCCCC">
  183.                 
  185.                 <!-- 1 Column : BEGIN -->
  186.                 <tr>
  187.                     <td>
  188.                         <table cellspacing="0" cellpadding="0" border="0" width="100%">
  189.                             <tr>
  190.                                 <td style="padding: 5px 40px 10px 40px; text-align: center; font-family: Roboto, sans-serif; font-size: 15px; mso-height-rule: exactly; line-height: 20px; color: #555555;">
  192. {% block content %} {% endblock %}
  193.     
  194.                                 </td>
  195.                             </tr>
  196.                         </table>
  197.                     </td>
  198.                 </tr>
  199.                 <!-- 1 Column : END -->
  200.                 
  201.                
  202.             </table>
  203.             <!-- Email Body : END -->
  204.           
  205.             <!-- Email Footer : BEGIN -->
  206.             <table cellspacing="0" cellpadding="0" border="0" align="center" width="100%" style="max-width: 680px;">
  207.                 <tr>
  208.                     <td style="padding: 30px 10px;width: 100%;font-size: 12px; font-family: sans-serif; mso-height-rule: exactly; line-height:18px; text-align: center; color: #888888;">
  209.                         PREMIUM BEAUTY MEDIA SAS - 9/11 rue du Mail - 75002 Paris - France
  210.                     </td>
  211.                 </tr>
  212.             </table>
  213.             <!-- Email Footer : END -->
  215.             <!--[if (gte mso 9)|(IE)]>
  216.             </td>
  217.             </tr>
  218.             </table>
  219.             <![endif]-->
  220.         </div>
  221.     </center>
  222. </body>
  223. </html>