You are here

Home » API reference » Open Social 8.9

swiftmailer.html.twig in Open Social 8.9

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/email/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.             color: #4a4a4a;

  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. 

  60.         table {

  61.             border-collapse: separate;

  62.             mso-table-lspace: 0pt;

  63.             mso-table-rspace: 0pt;

  64.             width: 100%; }

  65.         table td {

  66.             font-family: sans-serif;

  67.             font-size: 14px;

  68.             vertical-align: top; }

  69. 

  70.         /* -------------------------------------

  71.             BODY & CONTAINER

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

  73. 

  74.         .body {

  75.             background-color: #f6f6f6;

  76.             width: 100%; }

  77. 

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

  79.         .container {

  80.             display: block;

  81.             margin: 0 auto !important;

  82.             /* makes it centered */

  83.             max-width: 580px;

  84.             padding: 10px;

  85.             width: 580px; }

  86. 

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

  88.         .content {

  89.             box-sizing: border-box;

  90.             display: block;

  91.             margin: 0 auto;

  92.             max-width: 580px;

  93.             padding: 10px; }

  94. 

  95.         /* -------------------------------------

  96.             HEADER, FOOTER, MAIN

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

  98.         .header {

  99.             padding-top: 30px;

  100.             padding-bottom: 30px;

  101.             text-align: center;

  102.         }

  103. 

  104.         .postheader {

  105.             padding-bottom: 30px;

  106.             text-align: center;

  107.             font-size: 18px;

  108.         }

  109. 

  110.         .main {

  111.             background: #fff;

  112.             width: 100%;

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

  114. 

  115.         .wrapper {

  116.             box-sizing: border-box;

  117.             padding: 50px 35px 15px; }

  118. 

  119.         .footer {

  120.             clear: both;

  121.             padding-top: 10px;

  122.             text-align: center;

  123.             width: 100%; }

  124.         .footer td,

  125.         .footer p,

  126.         .footer span,

  127.         .footer a {

  128.             color: #999999;

  129.             font-size: 12px;

  130.             text-align: center; }

  131. 

  132.         .content-block {

  133.             padding-top: 10px;

  134.         }

  135.         .content-block img {

  136.             margin: 10px 0;

  137.         }

  138.         /* -------------------------------------

  139.             TYPOGRAPHY

  140.         ------------------------------------- */

  141.         h1,

  142.         h2,

  143.         h3,

  144.         h4 {

  145.             color: #000000;

  146.             font-family: sans-serif;

  147.             font-weight: 400;

  148.             line-height: 1.4;

  149.             margin: 0;

  150.             margin-bottom: 30px; }

  151. 

  152.         h1 {

  153.             font-size: 35px;

  154.             font-weight: 300;

  155.             text-align: center;

  156.             text-transform: capitalize; }

  157. 

  158.         p,

  159.         ul,

  160.         ol {

  161.             font-family: sans-serif;

  162.             font-size: 14px;

  163.             font-weight: normal;

  164.             margin: 0;

  165.             margin-bottom: 15px; }

  166.         p li,

  167.         ul li,

  168.         ol li {

  169.             list-style-position: inside;

  170.             margin-left: 5px; }

  171. 

  172.         ul {

  173.             padding-left: 1em;

  174.         }

  175. 

  176.         a {

  177.             color: {{ primary }};

  178.             text-decoration: none;

  179.             font-weight: 700; }

  180. 

  181.         .first-paragraph {

  182.             font-size: 16px;

  183.             margin-bottom: 20px; }

  184. 

  185.         .bottom-space {

  186.             margin-bottom: 40px; }

  187. 

  188.         .notification {

  189.             font-size: 18px;

  190.             margin-bottom: 20px; }

  191. 

  192.         /* -------------------------------------

  193.             BUTTONS

  194.         ------------------------------------- */

  195.         .btn {

  196.             box-sizing: border-box;

  197.             width: 100%; }

  198.         .btn > tbody > tr > td {

  199.             padding-bottom: 15px; }

  200.         .btn table {

  201.             width: auto; }

  202.         .btn table td {

  203.             background-color: #ffffff;

  204.             border-radius: 5px;

  205.             text-align: center; }

  206.         .btn a {

  207.             background-color: #ffffff;

  208.             border: solid 1px #784288;

  209.             border-radius: 5px;

  210.             box-sizing: border-box;

  211.             color: #784288;

  212.             cursor: pointer;

  213.             display: inline-block;

  214.             font-size: 14px;

  215.             font-weight: bold;

  216.             margin: 0;

  217.             padding: 12px 25px;

  218.             text-decoration: none;

  219.             text-transform: capitalize; }

  220. 

  221.         .btn-primary table td {

  222.             background-color: #784288; }

  223. 

  224.         .btn-primary a {

  225.             background-color: #784288;

  226.             border-color: #784288;

  227.             color: #ffffff; }

  228. 

  229.         .btn-wrapp {

  230.             margin-bottom: 30px; }

  231. 

  232.         .btn-wrapp td {

  233.             padding: 0 10px; }

  234. 

  235.         .btn-wrapp td:nth-child(odd) {

  236.             padding-left: 0; }

  237. 

  238.         .btn-wrapp td:nth-child(even) {

  239.             padding-right: 0; }

  240. 

  241.         .btn-link {

  242.             display: block;

  243.             position: relative;

  244.             margin-bottom: 15px;

  245.             border-radius: 5px;

  246.             border: 1px solid {{ primary }};

  247.             color: {{ primary }};

  248.             padding: 9px 25px 7px;

  249.             text-align: center; }

  250. 

  251.         .btn-link-one {

  252.             display: inline-block;

  253.             min-width: 230px; }

  254. 

  255.         .btn-link img {

  256.             position: absolute;

  257.             top: 10px;

  258.             left: 11px; }

  259. 

  260.         .btn-link-bg {

  261.             background-color: {{ primary }};

  262.             color: #ffffff; }

  263. 

  264.         /* -------------------------------------

  265.             COMMENTS, POST, MESSAGE STYLES

  266.         ------------------------------------- */

  267.         .comments {

  268.             padding: 5px 0 0;

  269.             border-radius: 5px;

  270.             border: 2px solid #e0e0e0;

  271.             margin-bottom: 20px; }

  272. 

  273.         .comment {

  274.             padding: 15px 20px 0;

  275.             border-radius: 5px; }

  276. 

  277.         .reply {

  278.             padding-bottom: 20px;

  279.             margin: 20px 15px;

  280.             background: #f3f3f3; }

  281. 

  282.         .post {

  283.             padding: 15px 20px 20px; }

  284. 

  285.         .message {

  286.             padding: 5px 20px; }

  287. 

  288.         .author-msg {

  289.             margin-bottom: 10px; }

  290. 

  291.         .post p,

  292.         .comment p {

  293.             margin: 10px 0; }

  294. 

  295.         .post-answer {

  296.             background-color: #f3f3f3; }

  297. 

  298.         .middle-block {

  299.             padding: 45px 0 0;

  300.             margin-bottom: 30px;

  301.             border-bottom: 2px solid #e0e0e0;

  302.             border-top: 2px solid #e0e0e0; }

  303. 

  304.         /* -------------------------------------

  305.             OTHER STYLES THAT MIGHT BE USEFUL

  306.         ------------------------------------- */

  307.         .last {

  308.             margin-bottom: 0; }

  309. 

  310.         .first {

  311.             margin-top: 0; }

  312. 

  313.         .align-center {

  314.             text-align: center; }

  315. 

  316.         .align-right {

  317.             text-align: right; }

  318. 

  319.         .align-left {

  320.             text-align: left; }

  321. 

  322.         .clear {

  323.             clear: both; }

  324. 

  325.         .mt0 {

  326.             margin-top: 0; }

  327. 

  328.         .mb0 {

  329.             margin-bottom: 0; }

  330. 

  331.         .logo {

  332.             max-height: 80px;

  333.             max-width: 160px; }

  334. 

  335.         .preheader {

  336.             color: transparent;

  337.             display: none;

  338.             height: 0;

  339.             max-height: 0;

  340.             max-width: 0;

  341.             opacity: 0;

  342.             overflow: hidden;

  343.             mso-hide: all;

  344.             visibility: hidden;

  345.             width: 0; }

  346. 

  347.         .powered-by a {

  348.             text-decoration: none; }

  349. 

  350.         hr {

  351.             border: 0;

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

  353.             margin: 20px 0; }

  354. 

  355.         /* -------------------------------------

  356.             RESPONSIVE AND MOBILE FRIENDLY STYLES

  357.         ------------------------------------- */

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

  359.             table[class=body] h1 {

  360.                 font-size: 28px !important;

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

  362.             table[class=body] p,

  363.             table[class=body] ul,

  364.             table[class=body] ol,

  365.             table[class=body] td,

  366.             table[class=body] span,

  367.             table[class=body] a {

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

  369.             table[class=body] .wrapper,

  370.             table[class=body] .article {

  371.                 padding: 10px !important; }

  372.             table[class=body] .content {

  373.                 padding: 0 !important; }

  374.             table[class=body] .container {

  375.                 padding: 0 !important;

  376.                 width: 100% !important; }

  377.             table[class=body] .main {

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

  379.                 border-radius: 0 !important;

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

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

  382.                 width: 100% !important; }

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

  384.                 width: 100% !important; }

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

  386.                 height: auto !important;

  387.                 max-width: 100% !important;

  388.                 width: auto !important; }}

  389. 

  390.         /* -------------------------------------

  391.             PRESERVE THESE STYLES IN THE HEAD

  392.         ------------------------------------- */

  393.         @media all {

  394.             .ExternalClass {

  395.                 width: 100%; }

  396.             .ExternalClass,

  397.             .ExternalClass p,

  398.             .ExternalClass span,

  399.             .ExternalClass font,

  400.             .ExternalClass td,

  401.             .ExternalClass div {

  402.                 line-height: 100%; }

  403.             .apple-link a {

  404.                 color: inherit !important;

  405.                 font-family: inherit !important;

  406.                 font-size: inherit !important;

  407.                 font-weight: inherit !important;

  408.                 line-height: inherit !important;

  409.                 text-decoration: none !important; }

  410.             .btn-primary table td:hover {

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

  412.             .btn-primary a:hover {

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

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

  415. 

  416.     </style>

  417. </head>

  418. <body class="">

  419. 

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

  421.     <tr>

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

  423.         <td class="container">

  424.             <div class="content">

  425. 

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

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

  428. 

  429.                 <div class="header">

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

  431.                 </div>

  432. 

  433.                 <div class="postheader">

  434.                     {{ heading }}

  435.                 </div>

  436. 

  437.                 <table class="main">

  438. 

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

  440.                     <tr>

  441.                         <td class="wrapper">

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

  443.                                 {% if header %}

  444.                                 <tr>

  445.                                     <td>

  446.                                        {{ header }}

  447.                                     </td>

  448.                                 </tr>

  449.                                 {% endif %}

  450.                                 <tr>

  451.                                     <td>

  452.                                         {{ body }}

  453.                                     </td>

  454.                                 </tr>

  455.                                 {% if footer %}

  456.                                     <tr>

  457.                                         <td>

  458.                                             {{ footer }}

  459.                                         </td>

  460.                                     </tr>

  461.                                 {% endif %}

  462. 

  463.                             </table>

  464.                         </td>

  465.                     </tr>

  466. 

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

  468.                 </table>

  469. 

  470.                 <!-- START FOOTER -->

  471.                 <div class="footer">

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

  473.                         <tr>

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

  475.                                 <strong class="brand">

  476.                                     {% if site_link %}

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

  478.                                     {% else %}

  479.                                         {{ site_name }}

  480.                                     {% endif %}

  481.                                 </strong>

  482.                                 {% if site_slogan %}

  483.                                     <br />

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

  485.                                 {% endif %}

  486.                             </td>

  487.                         </tr>

  488.                         <tr>

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

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

  491.                             </td>

  492.                         </tr>

  493.                     </table>

  494.                 </div>

  495.                 <!-- END FOOTER -->

  496.             </div>

  497.         </td>

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

  499.     </tr>

  500. </table>

  501. </body>

  502. </html>