You are here

Home » API reference » Open Social 8

swiftmailer.html.twig in Open Social 8

Same filename and directory in other branches
  1. 8.2 themes/socialbase/templates/swiftmailer.html.twig
  2. 8.3 themes/socialbase/templates/swiftmailer.html.twig
  3. 8.4 themes/socialbase/templates/swiftmailer.html.twig
  4. 8.5 themes/socialbase/templates/swiftmailer.html.twig
  5. 8.6 themes/socialbase/templates/swiftmailer.html.twig
  6. 8.7 themes/socialbase/templates/swiftmailer.html.twig
  7. 8.8 themes/socialbase/templates/swiftmailer.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

themes/socialbase/templates/swiftmailer.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>Open Social</title>

  39.     <style>

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

  41.             GLOBAL RESETS

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

  43.         img {

  44.             border: none;

  45.             -ms-interpolation-mode: bicubic;

  46.             max-width: 100%; }

  47. 

  48.         body {

  49.             background-color: #f6f6f6;

  50.             font-family: sans-serif;

  51.             -webkit-font-smoothing: antialiased;

  52.             font-size: 14px;

  53.             line-height: 1.4;

  54.             margin: 0;

  55.             padding: 0;

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

  57.             -webkit-text-size-adjust: 100%; }

  58. 

  59.         table {

  60.             border-collapse: separate;

  61.             mso-table-lspace: 0pt;

  62.             mso-table-rspace: 0pt;

  63.             width: 100%; }

  64.         table td {

  65.             font-family: sans-serif;

  66.             font-size: 14px;

  67.             vertical-align: top; }

  68.         em {

  69.             font-style: normal;

  70.             font-weight: bold;  }

  71. 

  72.         /* -------------------------------------

  73.             BODY & CONTAINER

  74.         ------------------------------------- */

  75. 

  76.         .body {

  77.             background-color: #f6f6f6;

  78.             width: 100%; }

  79. 

  80.         /* 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 */

  81.         .container {

  82.             display: block;

  83.             margin: 0 auto !important;

  84.             /* makes it centered */

  85.             max-width: 580px;

  86.             padding: 10px;

  87.             width: 580px; }

  88. 

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

  90.         .content {

  91.             box-sizing: border-box;

  92.             display: block;

  93.             margin: 0 auto;

  94.             max-width: 580px;

  95.             padding: 10px; }

  96. 

  97.         /* -------------------------------------

  98.             HEADER, FOOTER, MAIN

  99.         ------------------------------------- */

  100.         .header {

  101.             padding-top: 30px;

  102.             padding-bottom: 30px;

  103.             text-align: center;

  104.         }

  105. 

  106.         .postheader {

  107.             padding-bottom: 30px;

  108.             text-align: center;

  109.             font-size: 18px;

  110.         }

  111. 

  112.         .main {

  113.             background: #fff;

  114.             border-radius: {{ border_radius }}px;

  115.             width: 100%;

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

  117. 

  118.         .wrapper {

  119.             box-sizing: border-box;

  120.             padding: 50px; }

  121. 

  122.         .footer {

  123.             clear: both;

  124.             padding-top: 10px;

  125.             text-align: center;

  126.             width: 100%; }

  127.         .footer td,

  128.         .footer p,

  129.         .footer span,

  130.         .footer a {

  131.             color: #999999;

  132.             font-size: 12px;

  133.             text-align: center; }

  134. 

  135.         .content-block {

  136.             padding-top: 10px;

  137.         }

  138.         .content-block img {

  139.             margin: 10px 0;

  140.         }

  141.         /* -------------------------------------

  142.             TYPOGRAPHY

  143.         ------------------------------------- */

  144.         h1,

  145.         h2,

  146.         h3,

  147.         h4 {

  148.             color: #000000;

  149.             font-family: sans-serif;

  150.             font-weight: 400;

  151.             line-height: 1.4;

  152.             margin: 0;

  153.             margin-bottom: 30px; }

  154. 

  155.         h1 {

  156.             font-size: 35px;

  157.             font-weight: 300;

  158.             text-align: center;

  159.             text-transform: capitalize; }

  160. 

  161.         p,

  162.         ul,

  163.         ol {

  164.             font-family: sans-serif;

  165.             font-size: 14px;

  166.             font-weight: normal;

  167.             margin: 0;

  168.             margin-bottom: 15px; }

  169.         p li,

  170.         ul li,

  171.         ol li {

  172.             list-style-position: inside;

  173.             margin-left: 5px; }

  174. 

  175.         ul {

  176.             padding-left: 1em;

  177.         }

  178. 

  179.         a {

  180.             color: {{ primary }};

  181.             font-weight: bold;

  182.             text-decoration: none; }

  183. 

  184.         /* -------------------------------------

  185.             BUTTONS

  186.         ------------------------------------- */

  187.         .btn {

  188.             box-sizing: border-box;

  189.             width: 100%; }

  190.         .btn > tbody > tr > td {

  191.             padding-bottom: 15px; }

  192.         .btn table {

  193.             width: auto; }

  194.         .btn table td {

  195.             background-color: #ffffff;

  196.             border-radius: 5px;

  197.             text-align: center; }

  198.         .btn a {

  199.             background-color: #ffffff;

  200.             border: solid 1px #784288;

  201.             border-radius: 5px;

  202.             box-sizing: border-box;

  203.             color: #784288;

  204.             cursor: pointer;

  205.             display: inline-block;

  206.             font-size: 14px;

  207.             font-weight: bold;

  208.             margin: 0;

  209.             padding: 12px 25px;

  210.             text-decoration: none;

  211.             text-transform: capitalize; }

  212. 

  213.         .btn-primary table td {

  214.             background-color: #784288; }

  215. 

  216.         .btn-primary a {

  217.             background-color: #784288;

  218.             border-color: #784288;

  219.             color: #ffffff; }

  220. 

  221.         /* -------------------------------------

  222.             OTHER STYLES THAT MIGHT BE USEFUL

  223.         ------------------------------------- */

  224.         .last {

  225.             margin-bottom: 0; }

  226. 

  227.         .first {

  228.             margin-top: 0; }

  229. 

  230.         .align-center {

  231.             text-align: center; }

  232. 

  233.         .align-right {

  234.             text-align: right; }

  235. 

  236.         .align-left {

  237.             text-align: left; }

  238. 

  239.         .clear {

  240.             clear: both; }

  241. 

  242.         .mt0 {

  243.             margin-top: 0; }

  244. 

  245.         .mb0 {

  246.             margin-bottom: 0; }

  247. 

  248.         .preheader {

  249.             color: transparent;

  250.             display: none;

  251.             height: 0;

  252.             max-height: 0;

  253.             max-width: 0;

  254.             opacity: 0;

  255.             overflow: hidden;

  256.             mso-hide: all;

  257.             visibility: hidden;

  258.             width: 0; }

  259. 

  260.         .powered-by a {

  261.             text-decoration: none; }

  262. 

  263.         hr {

  264.             border: 0;

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

  266.             margin: 20px 0; }

  267. 

  268.         /* -------------------------------------

  269.             RESPONSIVE AND MOBILE FRIENDLY STYLES

  270.         ------------------------------------- */

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

  272.             table[class=body] h1 {

  273.                 font-size: 28px !important;

  274.                 margin-bottom: 10px !important; }

  275.             table[class=body] p,

  276.             table[class=body] ul,

  277.             table[class=body] ol,

  278.             table[class=body] td,

  279.             table[class=body] span,

  280.             table[class=body] a {

  281.                 font-size: 16px !important; }

  282.             table[class=body] .wrapper,

  283.             table[class=body] .article {

  284.                 padding: 10px !important; }

  285.             table[class=body] .content {

  286.                 padding: 0 !important; }

  287.             table[class=body] .container {

  288.                 padding: 0 !important;

  289.                 width: 100% !important; }

  290.             table[class=body] .main {

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

  292.                 border-radius: 0 !important;

  293.                 border-right-width: 0 !important; }

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

  295.                 width: 100% !important; }

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

  297.                 width: 100% !important; }

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

  299.                 height: auto !important;

  300.                 max-width: 100% !important;

  301.                 width: auto !important; }}

  302. 

  303.         /* -------------------------------------

  304.             PRESERVE THESE STYLES IN THE HEAD

  305.         ------------------------------------- */

  306.         @media all {

  307.             .ExternalClass {

  308.                 width: 100%; }

  309.             .ExternalClass,

  310.             .ExternalClass p,

  311.             .ExternalClass span,

  312.             .ExternalClass font,

  313.             .ExternalClass td,

  314.             .ExternalClass div {

  315.                 line-height: 100%; }

  316.             .apple-link a {

  317.                 color: inherit !important;

  318.                 font-family: inherit !important;

  319.                 font-size: inherit !important;

  320.                 font-weight: inherit !important;

  321.                 line-height: inherit !important;

  322.                 text-decoration: none !important; }

  323.             .btn-primary table td:hover {

  324.                 background-color: #34495e !important; }

  325.             .btn-primary a:hover {

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

  327.                 border-color: #34495e !important; } }

  328. 

  329.     </style>

  330. </head>

  331. <body class="">

  332. 

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

  334.     <tr>

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

  336.         <td class="container">

  337.             <div class="content">

  338. 

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

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

  341. 

  342.                 <div class="header">

  343.                     <img height="42" src="{{ logo }}" alt="Logo" />

  344.                 </div>

  345. 

  346.                 <div class="postheader">

  347.                     {{ heading }}

  348.                 </div>

  349. 

  350.                 <table class="main">

  351. 

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

  353.                     <tr>

  354.                         <td class="wrapper">

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

  356.                                 <tr>

  357.                                     <td>

  358.                                         {{ body }}

  359.                                     </td>

  360.                                 </tr>

  361.                             </table>

  362.                         </td>

  363.                     </tr>

  364. 

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

  366.                 </table>

  367. 

  368.                 <!-- START FOOTER -->

  369.                 <div class="footer">

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

  371.                         <tr>

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

  373.                                 <img height="42" src="{{ logo }}" alt="Logo" />

  374.                             </td>

  375.                         </tr>

  376.                         <tr>

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

  378.                                 <strong class="brand">Open Social</strong><br />

  379.                                 <span class="tagline">"Make your people bloom"</span>

  380.                             </td>

  381.                         </tr>

  382.                         <tr>

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

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

  385.                             </td>

  386.                         </tr>

  387.                     </table>

  388.                 </div>

  389.                 <!-- END FOOTER -->

  390.             </div>

  391.         </td>

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

  393.     </tr>

  394. </table>

  395. </body>

  396. </html>