Trying out Mjml and ran into this problem where I am not able to place the border border exactly where it needs to be for my table to work. It is a bit DYI but it is the only way I have made it work so far with Outlook. My question is that can I somehow control the exact positioning of the border so I can align it perfectly to the image?
I will post my code below in MJML:
This is where I am able to get to this: image of the problem
Outlook version, god help me here: Outlook Html
<mj-wrapper>
<mj-section background-color="#fff">
<mj-column>
<mj-table>
<tr>
<td style="padding:0px 0px 0px 0px;">
<img src="./img/haut#2x.png" alt="couple-img" />
</td>
</tr>
<tr style="border-left: 2px solid #702b7e;">
<td align="center" style="padding:0px 40px 0px 40px;">
<span style="font-family:Arial-BoldMT;font-size:18px;color:#702b7e;"> LE TÉMOIGNAGE </span> <br /> <br />
<span style="font-family:Arial-BoldMT;font-size:16px;color:#6f6f6f;">Je vous présente Laure et Mathieu ! </span> <br />
<span style="font-size:15px;color:#6f6f6f;">Ils viennent d’acheter un tout nouveau chauffe-eau thermodynamique et nous racontent comment il change leur vie, surtout à l’heure du bain avec leur trois enfants !
Et en plus d’être plus écologique, il se révèle plus économique… mais je vais les laisser vous en parler
</span> <br /> <br />
<button style="border: 0;padding:18px;background-color:#7a2182;color:white;border-radius:26px;font-size:14px;">
DÉCOUVRIR TOUS LES BÉNÉFICES
</button>
</td>
<td>
</td>
<td align="center">
</td>
<td>
</td>
</tr>
<tr>
<td>
<img src="./img/bas#2x.png" alt="" />
</td>
</tr>
</mj-table>
</mj-column>
</mj-section>
</mj-wrapper>
The fact is that Outlook uses Word for rendering message bodies. For example, the span element supports a smaller subset of Word–supported cascading style sheets, defined by the term CORE. Read more about supported and unsupported HTML elements, attributes, and cascading style sheets properties in the Word HTML and CSS Rendering Capabilities in Outlook article.
Related
I'm trying to personalize the reset password email template from firebase.
It should look something like this:
but instead it looks like this:
I've tried with the tag but that didn't work so i individually put the style in ach element, it kinda worked for like one email, but now is completely broken, seems like it isn't reading the flow-direction: column, but seeing it in the browser the styling looks fine, someone knows what is happening?
here is the code i'm puting in the message
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Recover Password Email</title>
</head>
<body style="font-family: 'Poppins', sans-serif;box-sizing: border-box;margin: 0;padding: 0;background: #fff; display: flex; flex-direction: column;justify-content: center;align-items: center;height: 100vh;text-align: center;">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght#300;400;500;700;800&display=swap" rel="stylesheet">
<img src="https://tutorstripe.netlify.app/image.svg" alt="Fingerprint Icon" style="width: 100%;max-width: 70px;margin: 0 auto;"/>
<h1 style="font-size: 2rem;font-weight: 700;margin: 0;padding: 0;color: #486EFF;margin-top: 1rem;margin-bottom: 1rem;">¡Hola, Lucas!</h1>
<p class="message" style="font-size: 0.75rem;font-weight: 400;padding-left: 8vw;padding-right: 8vw;color: #000;margin-top: 1rem;margin-bottom: 1rem;">
Recibes este correo porque nos notificaron que olvidaste tu contraseña, desafortunadamente nosotros tampoco sabemos cuál es tú contraseña 😵, toda la información sensible que recibimos de ti esta encriptada 🔒 para mantenerte seguro.
<br><br>
Pero no hay de qué preocuparse 😅, para recuperar el acceso a tú cuenta puedes cambiar la contraseña y podrás seguir usando nuestra aplicación de inmediato
</p>
<p class="warning" style="font-size: 0.6rem;font-weight: 500;padding-left: 8vw;padding-right: 8vw;color: #000;margin-top: 1rem;margin-bottom: 1rem;">
🚩 Si tú no solicitaste restablecer tu contraseña puedes ignorar este correo 🚩
</p>
<button onclick="window.open('%LINK%')" style="padding: 0.5rem 2rem;border-radius: 0.25rem;background-color: #486EFF;margin-top: 1rem;margin-bottom: 1rem;cursor: pointer;outline: none;border: none;color: #fff;font-size: 0.9rem;font-family: 'Poppins';font-weight: 600;">
Cambiar contraseña
</button>
<h3 style="font-size: 0.7rem;font-weight: 500;margin: 0;padding: 0;color: #000;margin-top: 1rem;margin-bottom: 1rem;text-decoration: underline;">Attentamente</h3>
<h2 style="font-size: 0.75rem;font-weight: 600;margin: 0;padding: 0;color: #486EFF;margin-top: -0.8rem;margin-bottom: 1rem;">El frutifantástico equipo de Tutor</h2>
<br><br><br>
<div class="footer" style="background: #486EFF;width: 100vw;display: flex;flex-direction: column;justify-content: center;align-items: center;color: #fff;position: fixed;bottom: 0;">
<p class="copyright" style="font-size: 0.6rem;font-weight: 300;margin: 0;padding: 0;color: #fff;margin-top: 1rem;margin-bottom: -1rem;">© 2022 Tutor. Todos los derechos reservados</p>
<h4 style="font-size: 0.8rem;font-weight: 700;opacity: 0.6;">Tutor</h6>
</div>
</body>
</html>
HTML Email doesn't support a lot of modern CSS such as flex, nor SVG images.
Check https://caniemail.com for what you can use.
You also can't use JavaScript - change the onclick event to a URL.
You can use divs for single column layouts, but you will still need one outer table for Outlook as that doesn't support max-width and doesn't work well with divs in general.
Outer structure example:
<div style="max-width:600px;">
<!--[if (gte mso 9)|(IE)]>
<table width="600" align="center" style="border-collapse:collapse;mso-table-lspace:0pt;mso-table-rspace:0pt;border-spacing:0;font-family:Arial, sans-serif;color:#333333;" >
<tr>
<td style="padding-top:0;padding-bottom:0;padding-right:0;padding-left:0;border-collapse:collapse;" >
<![endif]-->
..Content here..
<!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]-->
</div>
Looks like you need a primer to HTML Email, or perhaps a framework if you didn't want to think too hard, and I'd recommend this page of resources: https://emailresourc.es/#code-frameworks
How can I make the text following the pictures have the same width as the picture in this table? (between the red lines shown in the picture). I tried width property with CSS but it didn't work.
In the same context, how can I enforce the same height for all cells as well?
<table>
<tr>
<td>
<img src="https://picsum.photos/200/300?v=1" alt="picture not available" height="200" width="300">
</td>
<td>
<img src="https://picsum.photos/200/300?v=2" alt="picture not available" height="200" width="300">
</td>
<td>
<img src="https://picsum.photos/200/300?v=3" alt="picture not available" height="200" width="300">
</td>
</tr>
<tr>
<td>
<a href="page1.html">
<h3>Vaccin covid-19 en 2021 ?</h3>
</a>
<p>
Avec covid-19, c'est necessaire de nous immuniser ! On a une nouvelle collection des complements alimentaires qui sont benefiques et riches en vitamines !
<a href="page1.html">
<h2>Read more ...</h2>
</a>
</p>
</td>
<td>
<a href="page2.html">
<h3>Nouveaux : complements alimentaires pour vous immuniser !</h3>
</a>
<p>
Avec covid-19, c'est necessaire de nous immuniser ! On a une nouvelle collection des complements alimentaires qui sont benefiques et riches en vitamines !
<a href="page2.html">
<h2>Read more ...</h2>
</a>
</p>
</td>
<td>
<a href="page3.html">
<h3>Marathon sponsorisé par E-Pharma</h3>
</a>
<p>
Venez pour le marathon de 28/12/2020 ou on va faire beaucoup d'activites de sensibilisation contre la maladie de cancer de seins ! Vous etes bienvenues !
<a href="page3.html">
<h2>Read more ...</h2>
</a>
</p>
</td>
</tr>
</table>
Use max-width in a and p tag to set same width as image
td a,
td p{
max-width: 300px;
text-align:center;
margin: 0 auto;
}
td a {
display: block;
}
<table>
<tr>
<td>
<img src="https://via.placeholder.com/300" alt="picture not available" height="200" width="300">
</td>
<td>
<img src="https://via.placeholder.com/300" alt="picture not available" height="200" width="300">
</td>
<td>
<img src="https://via.placeholder.com/300" alt="picture not available" height="200" width="300">
</td>
</tr>
<tr>
<td>
<h3>Vaccin covid-19 en 2021 ?</h3>
<p>
Avec covid-19, c'est necessaire de nous immuniser ! On a une
nouvelle collection des complements alimentaires qui sont benefiques
et riches en vitamines !
<h2>Read more ...</h2>
</p>
</td>
<td>
<h3>Nouveaux : complements alimentaires pour vous immuniser !</h3>
<p>
Avec covid-19, c'est necessaire de nous immuniser ! On a une
nouvelle collection des complements alimentaires qui sont benefiques
et riches en vitamines !
<h2>Read more ...</h2>
</p>
</td>
<td>
<h3>Marathon sponsorisé par E-Pharma</h3>
<p>
Venez pour le marathon de 28/12/2020 ou on va faire beaucoup d'activites
de sensibilisation contre la maladie de cancer de seins !
Vous etes bienvenues !
<h2>Read more ...</h2>
</p>
</td>
</tr>
</table>
I'm new in odoo and HTML&css, all I want is to add a stamp to my qutation so theu user won't need to put a stamp in every single quotation...can anyone help me and guide me to a road to fix that problem
thanks for your help.
<table class="table3">
<tr>
<td style="width:45%;border-style:none;">
<table style="width:60%;">
<tr>
<td style="font-size:14px;margin-left:4px; margin-right:auto;border: 2px"><br/>Bon pour accord le <br/><br/><br/> <br/><br/><br/>Nom, Qualité et signature ou cachet du client<br/><br/></td>
</tr>
</table>
</td>
<td>
<table id="t01">
<tr>
<td style="width:30%;font-size:12px"><b>Total DA HT</b></td>
<td>225,00</td>
</tr>
<tr>
<td style="width:30%; font-size:12px"><b>Total TVA</b></td>
<td>55.10</td>
</tr>
<tr>
<td style="width:30%;font-size:12px"><b>Droit de timbre</b></td>
<td>0.0</td>
</tr>
<tr>
<td style="width:30%;font-size:12px"><b>Total DA TTC</b></td>
<td>350</td>
</tr>
</table>
</td>
</tr>
</table>
<div class="footer">
<br/><br/>
<div style="text-align:center">
<hr style="border: 1px solid #73ad20">
<p style="font-family:KacstFarsi; color:green; font-size:9px">N° R.C.: 1003703 -10 B /00/16//N.I.F.: 001016100370377</p>
<p style="font-family:KacstFarsi; color:green; font-size:9px">AGB BANQUE RIB: 03200001500720120844Dely-Brahim /N° Article 16500743415</p>
<small>
<span>Page</span>
<span class="page" />
/
<span class="topage" />
</small>
</div>
</div>
You could extend res.users with a field for the signature image (fields.binary) and extend the settings view (right corner "login" settings). So every user can set his own signature image. Little hint: res.users is a bit special. You need to implement that field as user-writeable field (Odoo example). In my example the field is called sign_image.
After this you can use this new field in your QWeb report, like:
<t t-if="o.user_id.sign_image">
<div t-field="o.user_id.sign_image" t-field-options='{"widget": "image"}'/>
</t>
Where o is the actual record (quotation) which is printed and o.user_id is the salesman on that. If you want to use the user who is printing instead of the salesman use o.env.user.sign_image.
I need help to make table borders invisible. Already read some other answers to similar questions, but I wasn't able to solve the problem.
This is the code generated by Frontpage 2003:
<html>
<head>
<meta http-equiv="Content-Language" content="es">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>FOCCoF</title>
</head>
<body bgcolor="#666666"> <center>
<table border="0" bgcolor="#FFFFFF" bordercolorlight="#000000" bordercolordark="#000000" width="991" height="496">
<!-- MSTableType="layout" -->
<tr>
<td height="360" width="981" bgcolor="#000000" valign="top">
<p align="justify">
<img border="0" src="gendat/banner.gif" width="981" height="114"></p>
<p align="justify">
<span style="vertical-align: middle">
<font face="Lucida Console" size="2"><b>
<span style="background-color: #FF0000"> [</span></b><span style="background-color: #FF0000"><a style="color: #000000" href="index.htm"><u>Inicio</u></a><b>]
- [</b><a style="color: #000000" href="p1/p1.htm"><u>Lineamientos</u></a><b>]
- [</b><u><a style="color: #000000" href="p2/p2.htm">Comunicados</a></u><b>]
- [</b><u><a style="color: #000000" href="p3/p3.htm">Documentos</a></u><b>]
- [</b><u><a style="color: #000000" href="p4/p4.htm">Agenda
Antirrepresiva</a></u><b>] - [</b><u><a style="color: #000000" href="p5/p5.htm">Biblioteca</a></u><b>]
- [</b><a style="color: #000000" href="p6/p6.htm">Multimedia</a><b>]</b></span><b><span style="background-color: #FF0000"> <img border="0" src="gendat/fill.gif" width="17" height="10"></span></b></font></span></p>
<p align="center">
<img border="0" src="gendat/foccof.gif" width="530" height="200"></p>
<p align="justify">
<font face="Lucida Console" color="#FFFFFF" size="2">El FOCCoF, Frente
Organizado contra el Código de Faltas, es un frente de organizaciones y
compañerxs no agrupadxs que surge allá por el 2012 como una herramienta
para enfrentar el intento de reforma del Código de Faltas que quería
impulsar el gobierno provincial, presidido por Unión por Córdoba. Si
bien en ese momento el frente nos aglutinaba bajo esa coyuntura
específica, y con un arco amplio de organizaciones del campo popular,
con el correr del tiempo el avance represivo tanto a nivel provincial
como nacional fueron modificando nuestros objetivos y estrategias de
lucha, para llegar a lo que somos hoy.</font></p>
<p align="justify"><font face="Lucida Console" color="#FFFFFF" size="2">
Actualmente al FOCCoF lo vamos construyendo La Brújula Barrial,
Cogollos, el Encuentro de Organizaciones, Cauce en COB La Brecha y Ammar,
junto con compañerxs no agrupadxs. Siempre abierto a todxs aquellas
organizaciones y personas que se quieran sumar a esta lucha que damos
día a día para frenar el avance represivo que vivimos en nuestra
actualidad.</font></p>
<p align="justify">
</p>
</td>
</tr>
</table>
<p align="justify">
<span style="background-color: #666666"> </span><font face="Lucida Console"><b><font size="2"><span style="background-color: #FF0000">[</span></font></b><span style="background-color: #FF0000"><font size="2"><a style="color: #000000" href="py/py.htm"><u>Links</u></a></font><b><font size="2">]</font></b></span></font><span style="background-color: #666666">
</span><font face="Lucida Console"><b><font size="2">
<span style="background-color: #666666"> </span></font></b></font><span style="background-color: #666666">
</span><span style="vertical-align: middle; background-color:#FF0000">
<font face="Lucida Console" size="2"><b>[</b><a style="color: #000000" href="px/px.htm"><u>Contacto</u></a></font></span><span style="vertical-align: middle"><font face="Lucida Console" size="2"><b><span style="background-color: #FF0000">]</span></b></font></span><span style="background-color: #666666">
</span></p>
</center>
<p align="justify"> </p>
</body>
</html>
Thank you very much.
I'm not exactly sure what you mean. But.. If you mean the white 'border', this isn't a border. It's the backgroundcolor of the table.
Just change the table element to:
<table width="991" height="496">
Let me know if this worked out for you.
I am currently trying to add some Design to an selfprogrammed board. Somehow I am experiencing odd buggs with the CSS rendering:
Every Row of that board is a .BoardRow Class to be formated in CSS. So, I am using:
.BoardRow td {
border: 2px dotted #4E6011;
background-image:-webkit-linear-gradient(bottom, #FFFFFF 33%, #EFEFEF 90%); /* Chrome, Safari */
}
this to add some nice looking borders around each row. Somehow always the top row is failing to work as intended. When zooming in with CTRL + Mouse in Google Chrome the top border always changes as shown in the picture. What can i do about this?
EDIT: Here is the full generated HTML Code:
<div id="Top">
<div id="Navi"> <a class="Link" href="index.php?s=home">Startseite</a> <a class="Link" href="index.php?s=physicians">Ärzteliste</a> <a class="Link" href="index.php?s=pmr">Polymyalgia Rheumatica</a> <a class="Link" href="index.php?s=logout">Abmelden</a> <a class="Link" href="index.php?s=course">Krankheitsverlauf</a> <a class="Link" href="index.php?s=board">Forum</a> </div>
</div>
<div id="Main">
<table id="Board">
Seite (1 von 1)
<tr>
<td class="BoardHeadline">Thema</td>
<td class="BoardHeadline">Beiträge</td>
<td class="BoardHeadline">Angesehen</td>
</tr>
<tr class="BoardRow">
<td class="BoardName">asdfasdfas von (Unbekannter Benutzer)<br />
geschrieben am 25:03:2013 um 15:43 </td>
<td class="BoardCounter">3</td>
<td class="BoardCounter">20</td>
</tr>
<tr class="BoardRow">
<td class="BoardName">Titelasdgkljahskjdghkjasg von (Unbekannter Benutzer)<br />
geschrieben am 25:03:2013 um 16:14 </td>
<td class="BoardCounter">1</td>
<td class="BoardCounter">4</td>
</tr>
<tr class="BoardRow">
<td class="BoardName">asdjglkajsljkdg von (Unbekannter Benutzer)<br />
geschrieben heute um 12:58 </td>
<td class="BoardCounter">3</td>
<td class="BoardCounter">12</td>
</tr>
</table>
<br />
Neues Thema eröffnen </div>
<div id="UserPanel"> Benutzerprofil </div>
and here is the CSS:
CSS
Please note that i am not an HTML or CSS expert. ;)
I am using Google Chrome 19 (old portable version on my usb stick) but this is also occuring on the local installed IE 8.
the problem is, the two dotted border are conflicting, try to use a border : colapse