You are here

Home » API reference » Open Social 8.6

swiftmailer.html.twig in Open Social 8.6

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

  70.             font-style: normal;

  71.             font-weight: bold;  }

  72. 

  73.         /* -------------------------------------

  74.             BODY & CONTAINER

  75.         ------------------------------------- */

  76. 

  77.         .body {

  78.             background-color: #f6f6f6;

  79.             width: 100%; }

  80. 

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

  82.         .container {

  83.             display: block;

  84.             margin: 0 auto !important;

  85.             /* makes it centered */

  86.             max-width: 580px;

  87.             padding: 10px;

  88.             width: 580px; }

  89. 

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

  91.         .content {

  92.             box-sizing: border-box;

  93.             display: block;

  94.             margin: 0 auto;

  95.             max-width: 580px;

  96.             padding: 10px; }

  97. 

  98.         /* -------------------------------------

  99.             HEADER, FOOTER, MAIN

  100.         ------------------------------------- */

  101.         .header {

  102.             padding-top: 30px;

  103.             padding-bottom: 30px;

  104.             text-align: center;

  105.         }

  106. 

  107.         .postheader {

  108.             padding-bottom: 30px;

  109.             text-align: center;

  110.             font-size: 18px;

  111.         }

  112. 

  113.         .main {

  114.             background: #fff;

  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 35px 15px; }

  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.             text-decoration: none;

  182.             font-weight: 700; }

  183. 

  184.         .first-paragraph {

  185.             font-size: 16px;

  186.             margin-bottom: 20px; }

  187. 

  188.         .bottom-space {

  189.             margin-bottom: 40px; }

  190. 

  191.         .notification {

  192.             font-size: 18px;

  193.             margin-bottom: 20px; }

  194. 

  195.         /* -------------------------------------

  196.             BUTTONS

  197.         ------------------------------------- */

  198.         .btn {

  199.             box-sizing: border-box;

  200.             width: 100%; }

  201.         .btn > tbody > tr > td {

  202.             padding-bottom: 15px; }

  203.         .btn table {

  204.             width: auto; }

  205.         .btn table td {

  206.             background-color: #ffffff;

  207.             border-radius: 5px;

  208.             text-align: center; }

  209.         .btn a {

  210.             background-color: #ffffff;

  211.             border: solid 1px #784288;

  212.             border-radius: 5px;

  213.             box-sizing: border-box;

  214.             color: #784288;

  215.             cursor: pointer;

  216.             display: inline-block;

  217.             font-size: 14px;

  218.             font-weight: bold;

  219.             margin: 0;

  220.             padding: 12px 25px;

  221.             text-decoration: none;

  222.             text-transform: capitalize; }

  223. 

  224.         .btn-primary table td {

  225.             background-color: #784288; }

  226. 

  227.         .btn-primary a {

  228.             background-color: #784288;

  229.             border-color: #784288;

  230.             color: #ffffff; }

  231. 

  232.         .btn-wrapp {

  233.             margin-bottom: 30px; }

  234. 

  235.         .btn-wrapp td {

  236.             padding: 0 10px; }

  237. 

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

  239.             padding-left: 0; }

  240. 

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

  242.             padding-right: 0; }

  243. 

  244.         .btn-link {

  245.             display: block;

  246.             position: relative;

  247.             margin-bottom: 15px;

  248.             border-radius: 5px;

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

  250.             color: {{ primary }};

  251.             padding: 9px 25px 7px;

  252.             text-align: center; }

  253. 

  254.         .btn-link-one {

  255.             display: inline-block;

  256.             min-width: 230px; }

  257. 

  258.         .btn-link img {

  259.             position: absolute;

  260.             top: 10px;

  261.             left: 11px; }

  262. 

  263.         .btn-link-bg {

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

  265.             color: #ffffff; }

  266. 

  267.         /* -------------------------------------

  268.             COMMENTS, POST, MESSAGE STYLES

  269.         ------------------------------------- */

  270.         .comments {

  271.             padding: 5px 0 0;

  272.             border-radius: 5px;

  273.             border: 2px solid #e0e0e0;

  274.             margin-bottom: 20px; }

  275. 

  276.         .comment {

  277.             padding: 15px 20px 0;

  278.             border-radius: 5px; }

  279. 

  280.         .reply {

  281.             padding-bottom: 20px;

  282.             margin: 20px 15px;

  283.             background: #f3f3f3; }

  284. 

  285.         .post {

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

  287. 

  288.         .message {

  289.             padding: 5px 20px; }

  290. 

  291.         .author-msg {

  292.             margin-bottom: 10px; }

  293. 

  294.         .post p,

  295.         .comment p {

  296.             margin: 10px 0; }

  297. 

  298.         .post-answer {

  299.             background-color: #f3f3f3; }

  300. 

  301.         .middle-block {

  302.             padding: 45px 0 0;

  303.             margin-bottom: 30px;

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

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

  306. 

  307.         /* -------------------------------------

  308.             OTHER STYLES THAT MIGHT BE USEFUL

  309.         ------------------------------------- */

  310.         .last {

  311.             margin-bottom: 0; }

  312. 

  313.         .first {

  314.             margin-top: 0; }

  315. 

  316.         .align-center {

  317.             text-align: center; }

  318. 

  319.         .align-right {

  320.             text-align: right; }

  321. 

  322.         .align-left {

  323.             text-align: left; }

  324. 

  325.         .clear {

  326.             clear: both; }

  327. 

  328.         .mt0 {

  329.             margin-top: 0; }

  330. 

  331.         .mb0 {

  332.             margin-bottom: 0; }

  333. 

  334.         .logo {

  335.             max-height: 80px;

  336.             max-width: 160px; }

  337. 

  338.         .preheader {

  339.             color: transparent;

  340.             display: none;

  341.             height: 0;

  342.             max-height: 0;

  343.             max-width: 0;

  344.             opacity: 0;

  345.             overflow: hidden;

  346.             mso-hide: all;

  347.             visibility: hidden;

  348.             width: 0; }

  349. 

  350.         .powered-by a {

  351.             text-decoration: none; }

  352. 

  353.         hr {

  354.             border: 0;

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

  356.             margin: 20px 0; }

  357. 

  358.         /* -------------------------------------

  359.             RESPONSIVE AND MOBILE FRIENDLY STYLES

  360.         ------------------------------------- */

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

  362.             table[class=body] h1 {

  363.                 font-size: 28px !important;

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

  365.             table[class=body] p,

  366.             table[class=body] ul,

  367.             table[class=body] ol,

  368.             table[class=body] td,

  369.             table[class=body] span,

  370.             table[class=body] a {

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

  372.             table[class=body] .wrapper,

  373.             table[class=body] .article {

  374.                 padding: 10px !important; }

  375.             table[class=body] .content {

  376.                 padding: 0 !important; }

  377.             table[class=body] .container {

  378.                 padding: 0 !important;

  379.                 width: 100% !important; }

  380.             table[class=body] .main {

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

  382.                 border-radius: 0 !important;

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

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

  385.                 width: 100% !important; }

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

  387.                 width: 100% !important; }

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

  389.                 height: auto !important;

  390.                 max-width: 100% !important;

  391.                 width: auto !important; }}

  392. 

  393.         /* -------------------------------------

  394.             PRESERVE THESE STYLES IN THE HEAD

  395.         ------------------------------------- */

  396.         @media all {

  397.             .ExternalClass {

  398.                 width: 100%; }

  399.             .ExternalClass,

  400.             .ExternalClass p,

  401.             .ExternalClass span,

  402.             .ExternalClass font,

  403.             .ExternalClass td,

  404.             .ExternalClass div {

  405.                 line-height: 100%; }

  406.             .apple-link a {

  407.                 color: inherit !important;

  408.                 font-family: inherit !important;

  409.                 font-size: inherit !important;

  410.                 font-weight: inherit !important;

  411.                 line-height: inherit !important;

  412.                 text-decoration: none !important; }

  413.             .btn-primary table td:hover {

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

  415.             .btn-primary a:hover {

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

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

  418. 

  419.     </style>

  420. </head>

  421. <body class="">

  422. 

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

  424.     <tr>

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

  426.         <td class="container">

  427.             <div class="content">

  428. 

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

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

  431. 

  432.                 <div class="header">

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

  434.                 </div>

  435. 

  436.                 <div class="postheader">

  437.                     {{ heading }}

  438.                 </div>

  439. 

  440.                 <table class="main">

  441. 

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

  443.                     <tr>

  444.                         <td class="wrapper">

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

  446.                                 {% if header %}

  447.                                 <tr>

  448.                                     <td>

  449.                                        {{ header }}

  450.                                     </td>

  451.                                 </tr>

  452.                                 {% endif %}

  453.                                 <tr>

  454.                                     <td>

  455.                                         {{ body }}

  456.                                     </td>

  457.                                 </tr>

  458.                                 {% if footer %}

  459.                                     <tr>

  460.                                         <td>

  461.                                             {{ footer }}

  462.                                         </td>

  463.                                     </tr>

  464.                                 {% endif %}

  465. 

  466.                             </table>

  467.                         </td>

  468.                     </tr>

  469. 

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

  471.                 </table>

  472. 

  473.                 <!-- START FOOTER -->

  474.                 <div class="footer">

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

  476.                         <tr>

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

  478.                                 <strong class="brand">

  479.                                     {% if site_link %}

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

  481.                                     {% else %}

  482.                                         {{ site_name }}

  483.                                     {% endif %}

  484.                                 </strong>

  485.                                 {% if site_slogan %}

  486.                                     <br />

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

  488.                                 {% endif %}

  489.                             </td>

  490.                         </tr>

  491.                         <tr>

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

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

  494.                             </td>

  495.                         </tr>

  496.                     </table>

  497.                 </div>

  498.                 <!-- END FOOTER -->

  499.             </div>

  500.         </td>

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

  502.     </tr>

  503. </table>

  504. </body>

  505. </html>