I am using velocity template to send email.
I am able to send the mail with static text as body of the mail.
But I am unable to style the mail body like adding color styling tables in the mail body.
thus could you please suggest how I can acheive.
This is sample vm file which I am getting as it is mail body i.e it is not styled.
<!DOCTYPE html>
<html>
<head>
<title>User Information</title>
<style>
body{
font-family: verdana;
}
table {
width: 500px;
}
table, th, td {
border: 1px solid black;
padding: 2px;
}
th{
background-color: #00439A;
color : #FFFFFF;
}
tr.odd{
background-color: #CFCFCF;
}
tr.even{
background-color: #1076F5;
}
</style>
</head>
<body>
<h1>User Information</h1>
<table>
<tr>
<th>ID</th>
<th>First Name</th>
<th>Last Name</th>
<th>Age</th>
<th>Gender</th>
</tr>
</table>
</body>
</html>
Related
Below I have provided a minimum working example of my Flask app that uses dataTable.JS to modify an existing HTML table. In cross-comparing with current examples online, I think this is due to required libraries not being loaded properly and/or that it cannot find the data.
Guidance is greatly appreciated!
HTML (base.html)
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="{{ url_for('static', filename='css/main.css') }}">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/dt/dt-1.11.5/af-2.3.7/b-2.2.2/fc-4.0.2/fh-3.2.2/sc-2.0.5/sl-1.3.4/datatables.min.css"/>
</head>
<body>
<header>
<div class="container">
<h1 class="logo"></h1>
<strong><nav>
<ul class="menu">
<li>Home</li>
<li>Entity Map</li>
</ul>
</nav></strong>
<div class = "logoimg">
<img src="{{ url_for('static',filename='images/GENERIC_PDE_PageCard.png') }}" width="10%">
</div>
</div>
</header>
<div class="container">
{% block content %}
{% endblock %}
</div>
<script type="text/javascript" charset="utf8" src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/v/dt/dt-1.11.5/af-2.3.7/b-2.2.2/fc-4.0.2/fh-3.2.2/sc-2.0.5/sl-1.3.4/datatables.min.js"></script>
{% block scripts %}{% endblock %}
</body>
</html>
HTML(home.html)
{% extends "base.html" %}
{% block content %}
<div class = "home">
<h3>OCFY Entity Database</h3>
<h4>Purpose</h4>
<p>Purpose This application is designed for performing custom queries to a database containing information about private and non-public entities who are serving school-aged children and youth in the Commonwealth of Pennsylvania. Sites in this database include private or non-public licensed schools, as well as non-public entities such as residential and juvenile justice institutions.</p>
<h4>How to Search</h4>
<p>The database provides information at the site-level, as well as by several higher-order aggregates, including region, county, city, type of service, PDE Educational Entity and DHS Entity.
Use the drop-down filters within to perform a custom query that automatically displays in the table on the next tab. Selecting one or more values fromm the filters will automatically remove irrelevant values from the rest of the filters. You can also use the filters in any order. They will still show only relevant options.
The search function at the top right of the table accepts words and/or whole numbers. The search function looks across all columns for all entities in the database and displays every entity with a column containing the number and/or word that was typed.
Use the first drop down box to select multiple fields from the database. Your choices will be displayed automatically in the table. The application defaults to showing several key fields. Use backspace within the search box to remove fields from the table.</p>
</div>
<br>
<div class = "homecontent">
<div class = "sidebar">
<h4>Select Fields from Database</h4>
</div>
<div class = "tablecontainer">
<table id="entity_table" class="table table-striped">
<tr>
<th>DHS Entity Name</th>
<th>DHS Legal Name</th>
<th>Full Address</th>
</tr>
<tr>
<td>Test1</td>
<td>Test2</td>
<td>Test3</td>
</tr>
<tr>
<td>Test1</td>
<td>Test2</td>
<td>Test3</td>
</tr>
<tr>
<td>Test1</td>
<td>Test2</td>
<td>Test3</td>
</tr>
</table>
</div>
</div>
{% endblock %}
{% block scripts %}
<script>
$(document).ready(function () {
$('#entity_table').dataTable();
});
</script>
{% endblock %}
CSS (main.css)
body {
margin: 0;
padding: 0;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
color: #444;
}
/*
* Formatting the header area
*/
header {
box-shadow: 3px 5px 3px #d0d1d3; /* offset x, offset y, blur radius */
background-color: #002060;
height: 90px;
width: 100%;
opacity: .9;
margin-bottom: 5px;
}
div.container {
scroll-behavior: auto;
padding-top: 5px;
padding-right: 5px;
padding-bottom: 5px;
padding-left: 5px;
}
div.logoimg{
display: flex;
justify-content: left;
align-items: center;
}
/*
* Formatting the container contents
*/
.container {
width: 1200px;
margin: 0 auto;
}
div.homecontent{
width: 1200px;
}
div.tablecontainer {
float: right;
width: 850px;
background-color: #ffffff;
}
div.sidebar {
float: left;
box-shadow: 3px 5px 3px #d0d1d3;
text-align: center;
width: 300px;
height: 500px;
padding-top: 10px;
padding-right: 10px;
padding-bottom: 10px;
padding-left: 10px;
background-color: #F3F4F5;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
}
div.home {
box-shadow: 3px 5px 3px #d0d1d3;
padding-top: 10px;
padding-right: 10px;
padding-bottom: 10px;
padding-left: 10px;
background-color: #F3F4F5;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
}
div.map {
padding-top: 10px;
padding-right: 10px;
padding-bottom: 10px;
padding-left: 10px;
background-color: #F3F4F5;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
}
h2 {
font-size: 3em;
margin-top: 40px;
text-align: center;
letter-spacing: -2px;
}
h3 {
font-size: 1.7em;
font-weight: 100;
margin-top: 30px;
text-align: center;
letter-spacing: -1px;
color: #999;
}
.menu {
float: right;
margin-top: 8px;
}
.menu li {
display: inline;
}
.menu li + li {
margin-left: 35px;
}
.menu li a {
color: #fff;
text-decoration: none;
}
App:
from flask import Flask, render_template
ocyf = Flask(__name__)
#ocyf.route('/')
def home():
return render_template("home.html")
#ocyf.route('/map/')
def map():
return render_template("map.html")
if __name__ == '__main__':
ocyf.run(debug=True)
You must use thead and tbody tags on your table.
<table id="entity_table" class="table table-striped">
<thead>
<tr>
<th>DHS Entity Name</th>
<th>DHS Legal Name</th>
<th>Full Address</th>
</tr>
</thead>
<tbody>
<tr>
<td>Test1</td>
<td>Test2</td>
<td>Test3</td>
</tr>
<tr>
<td>Test1</td>
<td>Test2</td>
<td>Test3</td>
</tr>
<tr>
<td>Test1</td>
<td>Test2</td>
<td>Test3</td>
</tr>
</tbody>
</table>
I fight with printing pdf from QTextDocument object with html format. I generate QString formatted code of html page and it works fine. To test it i make using QFile a html file which have to be printed and it look greats.
But pdf file looks completly different and i don't know why.
Code:
QString html = getHtmlPrintString(FVToPrint, currentCustomer);
QTextDocument document;
document.setHtml(html);
QFile qHtmlFile("D:\\Qt\\projects\\FVGeneratorV2\\fv\\"+QString::fromStdString(FVToPrint.getFVId()) +".html");
if(qHtmlFile.open(QIODevice::WriteOnly))
{
qHtmlFile.write(html.toUtf8());
qHtmlFile.close();
}
QPrinter printer(QPrinter::PrinterResolution);
printer.setOutputFormat(QPrinter::PdfFormat);
printer.setPageSize(QPageSize::A4);
QString fvname = "D:\\Qt\\projects\\FVGeneratorV2\\fv\\" + QString::fromStdString(FVToPrint.getFVId()) + ".pdf";
printer.setOutputFileName(fvname);
printer.setPageMargins(QMarginsF(15, 15, 15, 15));
document.print(&printer);
Html file code:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv='Content-Type' content='text/html; charset=utf-8'>
<style type='text/css'>table, tr, td{border: solid 1px black; border-collapse:collapse;}</style>
</head>
<body>
<div style='width:100%; height:100%; margin:0; padding: 0;'>
<div style='float:left; border: solid 2px black; width:42%; margin-right:2%; margin-left:2%; padding:2%; height:5%;'>
<h2><b>FV_24.01.2022_666_1_480</h2></b>
</div>
<div style='float:left; padding:2%; margin-right:2%; border: solid 2px black; width:42%; height:5%;'>
24.01.2022
</div>
<div style='clear:both;'></div>
<div style='float:left; border: solid 2px black; width:42%; margin-right:2%; margin-top:1%; margin-left:2%; padding:2%; height:15%;'>
kunito</br> Nip: 8712314</br> Phone: 9123412</br> Email: mail#com</br>miejska 12</br>47821 krakow, Polska</br>
</div>
<div style='float:left; margin-top:1%; padding:2%; margin-right:2%; border: solid 2px black; width:42%; height:15%;'>
Customer: </br> Name: test </br> Nip: 12398401</br>miejska 27</br>81293 Krakow, Polska</br>
</div>
<div style='clear:both;'></div>
<div style=' margin: 1% 2% 0 2%; padding:2%; border: solid 2px black; width:90.5%; height:10%;'> Payment data: </br>online transfer</br> Account number: 8912384</br> Title: FV_24.01.2022_666_1_480
</div>
<div style=' margin: 1% 2% 0 2%; padding:2%; width:90.5%; height:30%;'>
<table style='width:100%;'><tr style='background-color:darkgray;' ><td>Nb.</td><td>Name</td><td>Um</td><td>Quantity</td><td>Price netto</td><td>Vat</td><td>Vat value</td><td>Price brutto</td></tr><tr><td>1</td><td>Bulka</td><td>pcs</td><td>1</td><td>1.012</td><td>8</td><td>0.088</td><td>1.1</td></tr><tr style='background-color:darkgray;' ><td colspan='5'></td><td>Netto sum</td><td>Vat sum</td><td>Sum</td></tr><tr><td colspan='5'></td><td>1.012</td><td>0.088</td><td>1.1</td></tr>
</table>
</div>
<div style=' margin: 1% 2% 0 2%; padding:2%; width:90.5%; height:5%;'>
To pay: 1.1 zl </br> Payed: 1.1 zl
</div>
<div style=' margin: 1% 2% 0 2%; padding:2%; width:90.5%; height:5%;'>
<div style='float:left; width: 20%; height:100%; '>
<p align='center'>............................</br>podpis pracownika</p>
</div>
<div style='float:left; width: 20%; height:100%; margin-left:50%; '>
<p align='center'>............................</br>podpis klienta</p>
</div>
</div>
</div>
</body>
</html>
How to pdf look:
pdf printed file
I must repair a bug on the emails sent by my company when a new customer's account is created for the website, it must show a HTML <a> tag with the link to go on the new account, but in Gmail and Outlook, this <a> tag does not appear.
The code just here:
<tr>
<td style="font-size: 0px; padding: 10px 25px; padding-top: 30px; padding-bottom: 30px;
word-break: break-word;" align="center">
<table style="border-collapse: separate; line-height: 100%;" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td style="border: none; border-radius: 37px; cursor: auto; mso-padding-alt: 10px 25px;
background: #5F9AB0;" align="center" valign="middle" bgcolor="#5F9AB0"> Demander mon mot de passe
</td>
</tr>
</tbody>
</table>
</td>
</tr>
Screenshot of expected result (actual when I read my mail with the Mail mac app)
Screenshot of the display of the mail in Chrome and Firefox using Gmail and Outlook webapp
#Syfer suggested email queries are involved. If they are, check out https://www.caniemail.com/search/?s=media.
That says support for media queries is absent or spotty for all Gmails, all the Outlooks (except for the one that uses Apple Mail), all Yahoo's, all AOL's, and others.
Ain't it grand writing email HTML? 😁
I am developing a form using Html and CSS. I have used grid to place my textboxes. But the problem I am facing is position of submit button. It is placed next to last textbox but I want it to be placed on the separate line at the end.
The complete code of my this form is:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Form practice</title>
<style>
.container{
max-width: 1000px;
margin-left: auto;
margin-right: auto;
padding: 1em;
}
.wrapper{
box-shadow: 0 0 20px 0 rgba(72,94,116,0.7);
}
.wrapper > *{
padding: 1em;
}
.form-heading{
background-color: grey;
}
.form-heading h3{
text-align: center;
}
.contact form{
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-gap: 10px;
}
.contact form label{
display: block;
}
.contact form p{
margin: 0;
}
.contact form .submit-btn{
grid-column: 25%;
}
.contact form button, .conntact form input{
width: 100%;
padding: 1em;
border: 1px solid;
}
.contact input[type=text]{
height: 30px;
width: 90%;
}
.contact form button{
background-color: grey;
color: white;
border: 0;
text-transform: uppercase;
}
.contact form button:hover, .contact form button:focus{
background-color: silver;
color: black;
outline: 0;
/*transition: background-color 1s ease-out; */
}
</style>
</head>
<body>
<div class="container">
<div class="wrapper">
<div class="form-heading">
<h3>Form</h3>
</div>
<div class="contact">
<form>
<p>
<label>First Name</label>
<input type="text" name="firstName">
</p>
<p>
<label>Last Name</label>
<input type="text" name="lastName">
</p>
<p>
<label>Email Address</label>
<input type="text" name="email">
</p>
<p>
<label>Phone Number</label>
<input type="text" name="phone">
</p>
<p class="submit-btn">
<button>Submit</button>
</p>
</form>
</div>
</div>
</div>
</body>
</html>
Please help me in this regard. Thank you for your help.
This does the trick in your case.
.submit-btn {
grid-row-start: 3;
grid-column-start: 3;
grid-column-end: 3;
}
But a few suggestions:
Change your <p> with <div>. <p> is for paragraphs of text.
Don't use grid for displaying a grid. It's very unflexible and makes stuff hard to read. Use display: flex instead. If you want to see a sample on how to use flex to display a grid you might wanna check out the Bootstrap grid system. (Basic grid and implementation for form. Actual Bootstrap CSS)
There is no real reason to invent your own grid system at all. Bootstrap's Grid system is just one of many already working grids. :)
You Should Follow This Grid Layout Documentatoin for manage form element into specific position.
I would be grateful to receive some solution for my problem connected with parsing/ regex html file code:
d:\acc.html
<!-- WebSite-Watcher Demo Report -->
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>WebSite-Watcher Report</title>
<style type="text/css">
<!--
a:link, a:active {
color: #4040A0;
text-decoration: underline;
}
a:visited {
color: #8080A0;
text-decoration: underline;
}
a:hover {
background: #FFF000;
color: #FF0000;
text-decoration: underline;
}
body, td {
font-size: 11px;
line-height: 15px;
font-family: Verdana, Arial;
}
li {
list-style: square;
font-size: 11px;
line-height: 15px;
margin-top: 10px;
}
-->
</style>
</head>
<body>
<center>
<table cellpadding="2" cellspacing="2" border="0" width="80%">
<tr>
<td>
<font color="#336699" style="font-size: 18px;"><b>Highlighted changes</b></font><br>
<div style="border-top: 1px dashed dadada; margin-top: 5px;"></div>
<br>
<font color="#f00000">This report displays the first 200 characters of highlighted changes,<br>
the length can be changed individually with the <b>wsw_url_highlighted_changes(200)</b> variable.</font><br>
<br>
<table cellpadding="5" cellspacing="0" border="0" width="100%">
<tr>
<td style="border-bottom-color: #d0d0d0; border-bottom-style: solid; border-bottom-width: 1px; background-color: #eaeaea;"><!-- F1E896 -->
<font style="font-size: 13px;"><b>Lorem ipsum</b></font><br><font color="#808080"> | Web page | Local page</font>
</td>
</tr>
<tr>
<td style="border-bottom-color: #f0f0f0; border-bottom-style: solid; border-bottom-width: 1px; background-color: #f8f8f8;"><!-- F5F2C7 -->
<blockquote>
<br>
</blockquote>
</td>
</tr>
</table><br>
<br>
<table cellpadding="5" cellspacing="0" border="0" width="100%">
<tr>
<td style="border-bottom-color: #d0d0d0; border-bottom-style: solid; border-bottom-width: 1px; background-color: #eaeaea;"><!-- F1E896 -->
<font style="font-size: 13px;"><b>Lorem ipsum</b></font><br><font color="#808080">18-06-2015 | Web page | Local page</font>
</td>
</tr>
<tr>
<td style="border-bottom-color: #f0f0f0; border-bottom-style: solid; border-bottom-width: 1px; background-color: #f8f8f8;"><!-- F5F2C7 -->
<blockquote>
Lorem ipsum BBBBBBBBBBBB<br>
</blockquote>
</td>
</tr>
</table><br>
<br>
<table cellpadding="5" cellspacing="0" border="0" width="100%">
<tr>
<td style="border-bottom-color: #d0d0d0; border-bottom-style: solid; border-bottom-width: 1px; background-color: #eaeaea;"><!-- F1E896 -->
<font style="font-size: 13px;"><b>Lorem ipsum</b></font><br><font color="#808080">18-06-2015 | Web page | Local page</font>
</td>
</tr>
<tr>
<td style="border-bottom-color: #f0f0f0; border-bottom-style: solid; border-bottom-width: 1px; background-color: #f8f8f8;"><!-- F5F2C7 -->
<blockquote>
Lorem ipsum BBBBBBBBBBBB<br>AAAAAAAAAAAAAAAaa AA<br>
</blockquote>
</td>
</tr>
</table><br>
<br>
<br>
<br>
<div style="border-top: 1px dashed dadada;"></div>
<font color="#808080"><i>Report date: 18-06-2015</i></font><br>
</td>
</tr>
</table><br>
</center>
</body>
</html>
I need to 'clean' this file from empty entries like the first one(no text just some empty spaces or usually just .
I know that in powershell there is solution for multi regex and it will probably look like:
d:\pattern.txt
(?=<table cellpadding="5" ).*(?=<blockquote>).{0,6}(?=<\/blockquote>)
script:(thanks Jisaak)
$content = (Get-Content 'd:\acc.txt' -raw)
$pattern = (Get-Content 'd:\pattern.txt' -raw)
[regex]::Replace($content, $pattern, '',`
[System.Text.RegularExpressions.RegexOptions]::Multiline `
-bor [System.Text.RegularExpressions.RegexOptions]::Singleline)
I mean- from (0-6 of any symbols) )
This regex doesn't work i have problems with properly writing this advanced regex. Thanks for any help
Would this problem be easier if you didn't have to deal with multiple lines?
My experience with regex is limited and html is non-existant, but the below workaround can turn your blocks into single lines (and back to blocks again)
$file = (Get-Content ".\acc.html" -raw)
# Replace new line CR LF with a string (e.g. NEWLINE)
$file2 = ([regex]::Replace($file, ">`r`n", ">NEWLINE", "Singleline"))
$file2 | out-file ".\acc_edited.html"
# Single line regex replacement here to get rid of empty table.
# String NEWLINE can be used to indicate a new line.
# Replace the string with new line characters CR LF after regex replacement.
[regex]::Replace($file2, ">NEWLINE", ">`r`n", "Singleline") | Out-File ".\acc_original.html"
This should work:
(?<=<table cellpadding="5" cellspacing="0" border="0" width="100%">).*
(?=<blockquote>)|(?<=<blockquote>).{0,6}(?=<\/blockquote>)