'Some important html tags are removed in Odoo with the template engine jinja2
I use Odoo and the email template module from setting (Odoo). I code my emails with the template engine Jinja2.
I paste my code with my style directly in the editor (black screen), but the "doctype", the "html" tag, the "head" and the "body" are automatically removed. The rendering is then different in the email clients and the responsive doesn't work. Do you have a solution to solve this problem ? Thanks for your help
This is my code before :
<!DOCTYPE html>
<html lang="fr" xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<title></title>
<meta charset="utf-8" />
<meta content="width=device-width, initial-scale=1.0" name="viewport" />
<!--[if mso]><xml><o:OfficeDocumentSettings><o:PixelsPerInch>96</o:PixelsPerInch><o:AllowPNG/></o:OfficeDocumentSettings></xml><![endif]-->
<!--[if !mso]><!-->
<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet" type="text/css" />
<link href="https://fonts.googleapis.com/css?family=Merriweather" rel="stylesheet" type="text/css" />
<!--<![endif]-->
<style>
* {
box-sizing: border-box;
}
body {
margin: 0;
padding: 0;
}
a[x-apple-data-detectors] {
color: inherit !important;
text-decoration: inherit !important;
}
#MessageViewBody a {
color: inherit;
text-decoration: none;
}
p {
line-height: inherit
}
@media (max-width:630px) {
.row-content {
width: 100% !important;
}
.stack .column {
width: 100%;
display: block;
}
}
</style>
</head>
<body style="background-color: #FFFFFF; margin: 0; padding: 0; -webkit-text-size-adjust: none; text-size-adjust: none;">
<table border="0" cellpadding="0" cellspacing="0" class="nl-container" role="presentation"
style="mso-table-lspace: 0pt; mso-table-rspace: 0pt; background-color: #FFFFFF;" width="100%">
<tbody>
<tr>
<td>
<table align="center" border="0" cellpadding="0" cellspacing="0" class="row row-2"
role="presentation" style="mso-table-lspace: 0pt; mso-table-rspace: 0pt;" width="100%">
<tbody>
<tr>
<td>
<table align="center" border="0" cellpadding="0" cellspacing="0"
class="row-content stack" role="presentation"
style="mso-table-lspace: 0pt; mso-table-rspace: 0pt; background-color: #144b52; color: #000000; width: 610px;"
width="610">
<tbody>
<tr>
<td class="column"
style="mso-table-lspace: 0pt; mso-table-rspace: 0pt; font-weight: 400; text-align: left; vertical-align: top; padding-top: 5px; padding-bottom: 5px; border-top: 0px; border-right: 0px; border-bottom: 0px; border-left: 0px;"
width="100%">
<table border="0" cellpadding="0" cellspacing="0"
class="image_block" role="presentation"
style="mso-table-lspace: 0pt; mso-table-rspace: 0pt;"
width="100%">
<tr>
<td style="width:100%;padding-right:0px;padding-left:0px;">
<div align="center" style="line-height:10px"><a href="#"
style="outline:none" tabindex="-1"
target="_blank"><img
src="https://dam.malt.com/rebranding2020/malt-logo/malt-red"
style="display: block; height: auto; border: 0; width: 124px; max-width: 100%;"
width="124" /></a></div>
</td>
</tr>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table><!-- End -->
</body>
</html>
And after :
<title></title>
<meta charset="utf-8">
<meta content="width=device-width, initial-scale=1.0" name="viewport">
<!--[if mso]><xml><o:OfficeDocumentSettings><o:PixelsPerInch>96</o:PixelsPerInch><o:AllowPNG></o:AllowPNG></o:OfficeDocumentSettings></xml><![endif]-->
<!--[if !mso]><!-->
<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Merriweather" rel="stylesheet" type="text/css">
<!--<![endif]-->
<style>
* {
box-sizing: border-box;
}
body {
margin: 0;
padding: 0;
}
a[x-apple-data-detectors] {
color: inherit !important;
text-decoration: inherit !important;
}
#MessageViewBody a {
color: inherit;
text-decoration: none;
}
p {
line-height: inherit
}
@media (max-width:630px) {
.row-content {
width: 100% !important;
}
.stack .column {
width: 100%;
display: block;
}
}
</style>
<table border="0" cellpadding="0" cellspacing="0" class="nl-container" role="presentation" style="mso-table-lspace: 0pt; mso-table-rspace: 0pt; background-color: #FFFFFF;" width="100%">
<tbody>
<tr>
<td>
<table align="center" border="0" cellpadding="0" cellspacing="0" class="row row-2" role="presentation" style="mso-table-lspace: 0pt; mso-table-rspace: 0pt;" width="100%">
<tbody>
<tr>
<td>
<table align="center" border="0" cellpadding="0" cellspacing="0" class="row-content stack" role="presentation" style="mso-table-lspace: 0pt; mso-table-rspace: 0pt; background-color: #144b52; color: #000000; width: 610px;" width="610">
<tbody>
<tr>
<td class="column" style="mso-table-lspace: 0pt; mso-table-rspace: 0pt; font-weight: 400; text-align: left; vertical-align: top; padding-top: 5px; padding-bottom: 5px; border-top: 0px; border-right: 0px; border-bottom: 0px; border-left: 0px;" width="100%">
<table border="0" cellpadding="0" cellspacing="0" class="image_block" role="presentation" style="mso-table-lspace: 0pt; mso-table-rspace: 0pt;" width="100%">
<tbody><tr>
<td style="width:100%;padding-right:0px;padding-left:0px;">
<div align="center" style="line-height:10px"><a href="#" style="outline:none" tabindex="-1" target="_blank"><img src="https://dam.malt.com/rebranding2020/malt-logo/malt-red" style="display: block; height: auto; border: 0; width: 124px; max-width: 100%;" width="124"></a></div>
</td>
</tr>
</tbody></table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table><!-- End -->
Solution 1:[1]
Yes, this is how odoo process html files.
odoo have its own head, header and html tags in the page you are trying to make.
What I am saying is that whatever we designs is just a section of Odoo page and if you inspect odoo page you will see these tags already there, because whole page is loaded from odoo cdn
Solution to this is to write html of components in <section> ... </section> tag. So your html file will consist of just sections. and will look something like this:
same code for odoo page or odoo module description
When you code like this it will look very ugly if directly opened. But will make proper sense as odoo page.
Odoo also supports bootstrap classes
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|---|
| Solution 1 | Decoy |