You are here

Home » API reference » Varbase Email 9.0.x

varbase_emails.html.twig in Varbase Email 9.0.x

Same filename and directory in other branches
  1. 8.6 templates/varbase_emails.html.twig

The default template file for e-mails.

Available variables:

  • subject: The subject.
  • body: The message content.
  • message: The $message array created and used in the mail building procedure. Its content varies between cases, but typically contains at least the following elements:

    • id: The message identifier.
    • module: The module that handles the building of the message.
    • key: The key of the message.
    • to: The recipient email address.
    • from: The email address of the sender.
    • langcode: The langcode to use to compose the e-mail.
    • params: The message parameters.

This template may be overriden by module and/or mail key, using any of the following template names:

  • swiftmailer.html.twig: global, used by default.
  • swiftmailer--mymodule.html.twig: only emails sent by the module "mymodule".
  • swiftmailer--mymodule--test.html.twig: only emails by the module "mymodule" with key "test".

See also

template_preprocess()

template_preprocess_swiftmailer()

File

templates/varbase_emails.html.twig
View source 
  1. {#

  2. /**

  3.  * @file

  4.  * The default template file for e-mails.

  5.  *

  6.  * Available variables:

  7.  * - subject: The subject.

  8.  * - body: The message content.

  9.  * - message: The $message array created and used in the mail building

  10.  *   procedure. Its content varies between cases, but typically contains at

  11.  *   least the following elements:

  12.  *   - id: The message identifier.

  13.  *   - module: The module that handles the building of the message.

  14.  *   - key: The key of the message.

  15.  *   - to: The recipient email address.

  16.  *   - from: The email address of the sender.

  17.  *   - langcode: The langcode to use to compose the e-mail.

  18.  *   - params: The message parameters.

  19.  *

  20.  * This template may be overriden by module and/or mail key, using any of the

  21.  * following template names:

  22.  * - swiftmailer.html.twig: global, used by default.

  23.  * - swiftmailer--mymodule.html.twig: only emails sent by the module "mymodule".

  24.  * - swiftmailer--mymodule--test.html.twig: only emails by the module

  25.  *   "mymodule" with key "test".

  26.  *

  27.  * @see template_preprocess()

  28.  * @see template_preprocess_swiftmailer()

  29.  *

  30.  * @ingroup themeable

  31.  */

  32. #}

  33. <!doctype html>

  34. <html>

  35. <head>

  36.     <meta name="viewport" content="width=device-width" />

  37.     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

  38.     <title>{{ heading }}</title>

  39.     <style>

  40.         /* -------------------------------------

  41.             GLOBAL RESETS

  42.         ------------------------------------- */

  43.         img {

  44.           border: none;

  45.           -ms-interpolation-mode: bicubic;

  46.           max-width: 100%;

  47.         }

  48. 

  49.         body {

  50.           background-color: #f6f6f6;

  51.           font-family: sans-serif;

  52.           -webkit-font-smoothing: antialiased;

  53.           font-size: 14px;

  54.           line-height: 1.4;

  55.           margin: 0;

  56.           padding: 0;

  57.           -ms-text-size-adjust: 100%;

  58.           -webkit-text-size-adjust: 100%;

  59.           direction: {{ dir }};

  60.         }

  61. 

  62.         table {

  63.           border-collapse: separate;

  64.           mso-table-lspace: 0pt;

  65.           mso-table-rspace: 0pt;

  66.           width: 100%;

  67.           direction: {{ dir }};

  68.         }

  69.         table td {

  70.           font-family: sans-serif;

  71.           font-size: 14px;

  72.           vertical-align: top;

  73.         }

  74.         em {

  75.           font-style: normal;

  76.           font-weight: bold;

  77.         }

  78. 

  79.         /* -------------------------------------

  80.             BODY & CONTAINER

  81.         ------------------------------------- */

  82. 

  83.         .body {

  84.           background-color: #f6f6f6;

  85.           width: 100%;

  86.         }

  87. 

  88.         /* Set a max-width, and make it display as block so it will automatically stretch to that width, but will also shrink down on a phone or something */

  89.         .container {

  90.           display: block;

  91.           margin: 0 auto !important;

  92.           /* makes it centered */

  93.           max-width: 580px;

  94.           padding: 10px;

  95.           width: 580px;

  96.         }

  97. 

  98.         /* This should also be a block element, so that it will fill 100% of the .container */

  99.         .content {

  100.           box-sizing: border-box;

  101.           display: block;

  102.           margin: 0 auto;

  103.           max-width: 580px;

  104.           padding: 10px;

  105.         }

  106. 

  107.         /* -------------------------------------

  108.             HEADER, FOOTER, MAIN

  109.         ------------------------------------- */

  110.         .header {

  111.           padding-top: 30px;

  112.           padding-bottom: 30px;

  113.           text-align: center;

  114.         }

  115. 

  116.         .postheader {

  117.           padding-bottom: 30px;

  118.           text-align: center;

  119.           font-size: 18px;

  120.         }

  121. 

  122.         .main {

  123.           background: #fff;

  124.           border-radius: 3px;

  125.           width: 100%;

  126.           box-shadow: 0 -1px 0 #e0e0e0, 0 0 2px rgba(0,0,0,0.12), 0 2px 4px rgba(0,0,0,0.24);

  127.         }

  128. 

  129.         .wrapper {

  130.           box-sizing: border-box;

  131.           padding: 50px;

  132.         }

  133. 

  134.         .footer {

  135.           clear: both;

  136.           padding-top: 10px;

  137.           text-align: center;

  138.           width: 100%;

  139.         }

  140.         .footer td,

  141.         .footer p,

  142.         .footer span,

  143.         .footer a {

  144.           color: #999999;

  145.           font-size: 12px;

  146.           text-align: center;

  147.         }

  148. 

  149.         .content-block {

  150.           padding-top: 10px;

  151.         }

  152.         .content-block img {

  153.           margin: 10px 0;

  154.         }

  155.         /* -------------------------------------

  156.             TYPOGRAPHY

  157.         ------------------------------------- */

  158.         h1,

  159.         h2,

  160.         h3,

  161.         h4 {

  162.           color: #000000;

  163.           font-family: sans-serif;

  164.           font-weight: 400;

  165.           line-height: 1.4;

  166.           margin: 0;

  167.           margin-bottom: 30px;

  168.         }

  169. 

  170.         h1 {

  171.           font-size: 35px;

  172.           font-weight: 300;

  173.           text-align: center;

  174.           text-transform: capitalize;

  175.         }

  176. 

  177.         p,

  178.         ul,

  179.         ol {

  180.           font-family: sans-serif;

  181.           font-size: 14px;

  182.           font-weight: normal;

  183.           margin: 0;

  184.           margin-bottom: 15px;

  185.         }

  186.         p li,

  187.         ul li,

  188.         ol li {

  189.           list-style-position: inside;

  190.           margin-left: 5px;

  191.         }

  192. 

  193.         ul {

  194.           padding-left: 1em;

  195.         }

  196. 

  197.         a {

  198.           color: #328EC7;

  199.           font-weight: bold;

  200.           text-decoration: none;

  201.         }

  202. 

  203.         a:hover, a:visited {

  204.           text-decoration: underline;

  205.         }

  206. 

  207.         /* -------------------------------------

  208.             BUTTONS

  209.         ------------------------------------- */

  210.         .btn {

  211.           box-sizing: border-box;

  212.           width: 100%;

  213.         }

  214.         .btn > tbody > tr > td {

  215.           padding-bottom: 15px;

  216.         }

  217.         .btn table {

  218.           width: auto;

  219.         }

  220.         .btn table td {

  221.           background-color: #ffffff;

  222.           border-radius: 5px;

  223.           text-align: center;

  224.         }

  225.         .btn a {

  226.           background-color: #ffffff;

  227.           border: solid 1px #784288;

  228.           border-radius: 5px;

  229.           box-sizing: border-box;

  230.           color: #784288;

  231.           cursor: pointer;

  232.           display: inline-block;

  233.           font-size: 14px;

  234.           font-weight: bold;

  235.           margin: 0;

  236.           padding: 12px 25px;

  237.           text-decoration: none;

  238.           text-transform: capitalize;

  239.         }

  240. 

  241.         .btn-primary table td {

  242.           background-color: #784288;

  243.         }

  244. 

  245.         .btn-primary a {

  246.           background-color: #784288;

  247.           border-color: #784288;

  248.           color: #ffffff;

  249.         }

  250. 

  251.         /* -------------------------------------

  252.             OTHER STYLES THAT MIGHT BE USEFUL

  253.         ------------------------------------- */

  254.         .last {

  255.           margin-bottom: 0;

  256.         }

  257. 

  258.         .first {

  259.           margin-top: 0;

  260.         }

  261. 

  262.         .align-center {

  263.           text-align: center;

  264.         }

  265. 

  266.         .align-right {

  267.           text-align: right;

  268.         }

  269. 

  270.         .align-left {

  271.           text-align: left;

  272.         }

  273. 

  274.         .clear {

  275.           clear: both;

  276.         }

  277. 

  278.         .mt0 {

  279.           margin-top: 0;

  280.         }

  281. 

  282.         .mb0 {

  283.           margin-bottom: 0;

  284.         }

  285. 

  286.         .logo {

  287.           max-height: 80px;

  288.           max-width: 160px;

  289.         }

  290. 

  291.         .preheader {

  292.           color: transparent;

  293.           display: none;

  294.           height: 0;

  295.           max-height: 0;

  296.           max-width: 0;

  297.           opacity: 0;

  298.           overflow: hidden;

  299.           mso-hide: all;

  300.           visibility: hidden;

  301.           width: 0;

  302.         }

  303. 

  304.         .powered-by a {

  305.           text-decoration: none;

  306.         }

  307. 

  308.         hr {

  309.           border: 0;

  310.           border-bottom: 1px solid #f6f6f6;

  311.           margin: 20px 0;

  312.         }

  313. 

  314.         /* -------------------------------------

  315.             RESPONSIVE AND MOBILE FRIENDLY STYLES

  316.         ------------------------------------- */

  317.         @media only screen and (max-width: 620px) {

  318.             table[class=body] h1 {

  319.               font-size: 28px !important;

  320.               margin-bottom: 10px !important;

  321.             }

  322.             table[class=body] p,

  323.             table[class=body] ul,

  324.             table[class=body] ol,

  325.             table[class=body] td,

  326.             table[class=body] span,

  327.             table[class=body] a {

  328.               font-size: 16px !important;

  329.             }

  330.             table[class=body] .wrapper,

  331.             table[class=body] .article {

  332.               padding: 10px !important;

  333.             }

  334.             table[class=body] .content {

  335.               padding: 0 !important;

  336.             }

  337.             table[class=body] .container {

  338.               padding: 0 !important;

  339.               width: 100% !important;

  340.             }

  341.             table[class=body] .main {

  342.               border-left-width: 0 !important;

  343.               border-radius: 0 !important;

  344.               border-right-width: 0 !important;

  345.             }

  346.             table[class=body] .btn table {

  347.               width: 100% !important;

  348.             }

  349.             table[class=body] .btn a {

  350.               width: 100% !important;

  351.             }

  352.             table[class=body] .img-responsive {

  353.               height: auto !important;

  354.               max-width: 100% !important;

  355.               width: auto !important;

  356.             }

  357.         }

  358. 

  359.         /* -------------------------------------

  360.             PRESERVE THESE STYLES IN THE HEAD

  361.         ------------------------------------- */

  362.         @media all {

  363.           .ExternalClass {

  364.             width: 100%;

  365.           }

  366.           .ExternalClass,

  367.           .ExternalClass p,

  368.           .ExternalClass span,

  369.           .ExternalClass font,

  370.           .ExternalClass td,

  371.           .ExternalClass div {

  372.             line-height: 100%;

  373.           }

  374.           .apple-link a {

  375.             color: inherit !important;

  376.             font-family: inherit !important;

  377.             font-size: inherit !important;

  378.             font-weight: inherit !important;

  379.             line-height: inherit !important;

  380.             text-decoration: none !important;

  381.           }

  382.           .btn-primary table td:hover {

  383.             background-color: #34495e !important;

  384.           }

  385.           .btn-primary a:hover {

  386.             background-color: #34495e !important;

  387.             border-color: #34495e !important;

  388.           }

  389.         }

  390. 

  391.     </style>

  392. </head>

  393. <body class="">

  394. 

  395. <table border="0" cellpadding="0" cellspacing="0" class="body">

  396.     <tr>

  397.         <td>&nbsp;</td>

  398.         <td class="container">

  399.             <div class="content">

  400. 

  401.                 <!-- START CENTERED WHITE CONTAINER -->

  402.                 <span class="preheader"></span>

  403. 

  404.                 {% if logo %}

  405.                     <div class="header">

  406.                         <img src="{{ logo }}" alt="Logo" class="logo" />

  407.                     </div>

  408.                 {% endif %}

  409. 

  410.                 <div class="postheader">

  411.                     {{ heading }}

  412.                 </div>

  413. 

  414.                 <table class="main" style="background: #fff;border-radius: 3px;width: 100%;box-shadow: 0 -1px 0 #e0e0e0, 0 0 2px rgba(0,0,0,0.12), 0 2px 4px rgba(0,0,0,0.24);">

  415. 

  416.                     <!-- START MAIN CONTENT AREA -->

  417.                     <tr>

  418.                         <td class="wrapper">

  419.                             <table border="0" cellpadding="0" cellspacing="0">

  420.                                 <tr>

  421.                                     <td>

  422.                                         {{ body }}

  423.                                     </td>

  424.                                 </tr>

  425.                             </table>

  426.                         </td>

  427.                     </tr>

  428. 

  429.                     <!-- END MAIN CONTENT AREA -->

  430.                 </table>

  431. 

  432.                 <!-- START FOOTER -->

  433.                 <div class="footer">

  434.                     <table border="0" cellpadding="0" cellspacing="0">

  435.                         <tr>

  436.                             <td class="content-block">

  437.                                 <strong class="brand">

  438.                                     {% if site_link %}

  439.                                         <a href="{{ base_url }}">{{ site_name }}</a>

  440.                                     {% else %}

  441.                                         {{ site_name }}

  442.                                     {% endif %}

  443.                                 </strong>

  444.                                 {% if site_slogan %}

  445.                                     <br />

  446.                                     <span class="tagline">{{ site_slogan }}</span>

  447.                                 {% endif %}

  448.                             </td>

  449.                         </tr>

  450.                         <tr>

  451.                             <td class="content-block powered-by">

  452.                                 Copyright &copy;{{ "now"|date("Y") }}.

  453.                             </td>

  454.                         </tr>

  455.                     </table>

  456.                 </div>

  457.                 <!-- END FOOTER -->

  458.             </div>

  459.         </td>

  460.         <td>&nbsp;</td>

  461.     </tr>

  462. </table>

  463. </body>

  464. </html>