Browse Source

improve email styling

Olivier Massot 5 years ago
parent
commit
20cb5bdfb4
1 changed files with 36 additions and 10 deletions
  1. 36 10
      ot_templating/Resources/Private/Templates/Forms/EmailToSender.html

+ 36 - 10
ot_templating/Resources/Private/Templates/Forms/EmailToSender.html

@@ -6,24 +6,52 @@
     <title></title>
     <title></title>
     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
     <meta name="format-detection" content="telephone=no">
     <meta name="format-detection" content="telephone=no">
+
+    <style>
+        body {
+            font-family: Arial, Helvetica, sans-serif;
+        }
+
+        #recap {
+            border-collapse: collapse;
+            width: 100%;
+        }
+
+        #recap td, #recap th {
+            border: 1px solid #ddd;
+            padding: 8px;
+        }
+
+        #recap tr:nth-child(even){background-color: #f2f2f2;}
+
+        #recap tr:hover {background-color: #ddd;}
+
+        #recap th {
+            padding-top: 12px;
+            padding-bottom: 12px;
+            text-align: left;
+            background-color: #99ccff;
+            color: white;
+        }
+    </style>
 </head>
 </head>
 <body>
 <body>
 
 
     <p>Bonjour,</p>
     <p>Bonjour,</p>
 
 
     <p>Votre demande de contact a bien été prise en compte.
     <p>Votre demande de contact a bien été prise en compte.
-        Vous pouvez trouver ci-dessous un récapitulatif de cette demande:</p>
+       Vous pouvez trouver ci-dessous un récapitulatif de cette demande:</p>
 
 
-    <table width="600" cellpadding="0" cellspacing="0" border="0">
+    <table id="recap">
         <formvh:renderAllFormValues renderable="{form.formDefinition}" as="formValue">
         <formvh:renderAllFormValues renderable="{form.formDefinition}" as="formValue">
             <tr>
             <tr>
-                <td width="600" valign="top" align="left">{formvh:translateElementProperty(element: formValue.element, property: 'label')}</td>
-                <td width="600" valign="top" align="left">
+                <td>{formvh:translateElementProperty(element: formValue.element, property: 'label')}</td>
+                <td>
                     <f:if condition="{formValue.value}">
                     <f:if condition="{formValue.value}">
                         <f:then>
                         <f:then>
                             <f:if condition="{formValue.isMultiValue}">
                             <f:if condition="{formValue.isMultiValue}">
                                 <f:then>
                                 <f:then>
-                                    <table cellspacing="0" border="0">
+                                    <table>
                                         <f:for each="{formValue.processedValue}" as="value">
                                         <f:for each="{formValue.processedValue}" as="value">
                                             <tr>
                                             <tr>
                                                 <td>{value}</td>
                                                 <td>{value}</td>
@@ -32,7 +60,7 @@
                                     </table>
                                     </table>
                                 </f:then>
                                 </f:then>
                                 <f:else>
                                 <f:else>
-                                    <table cellspacing="0" border="0">
+                                    <table>
                                         <tr>
                                         <tr>
                                             <td><f:format.nl2br>{formValue.processedValue}</f:format.nl2br></td>
                                             <td><f:format.nl2br>{formValue.processedValue}</f:format.nl2br></td>
                                         </tr>
                                         </tr>
@@ -54,10 +82,8 @@
     <p>Bien cordialement.</p>
     <p>Bien cordialement.</p>
     <p>La direction</p>
     <p>La direction</p>
 
 
-    <p>
-        ----------------------------------------------
-        Cet e-mail a été envoyé automatiquement, merci de ne pas y répondre."
-    </p>
+    <hr/>
+    <p><i>Cet e-mail a été envoyé automatiquement, merci de ne pas y répondre.</i></p>
 
 
 </body>
 </body>
 </html>
 </html>