So, I have this html email:
<!Doctype HTML><html>
<head>
<!-- Meta -->
<meta charset="utf-8">
</head>
<table style=" width: 100%; box-shadow: 0px 0px 5px 0px #a5a5a5;">
<tr class="header">
<td class="logo" style="padding-top: 10px; padding-left: 20px;">
<img src="header_logo.png" alt="Logoimage"/>
</td>
</tr>
</table>
<table style="width: 100%; box-sizing: border-box; box-shadow: 0px 1px 5px 0px #a5a5a5;">
<tr style="width: 100%; display: block;">
<td style=""><h2>Congratulations on your new website!</h2></td>
<td class="content" style="margin-top:20px; display: block; clear:both; min-width: 100%;">
General description here.. write whatever you want.
</td>
</tr>
<tr style="width: 100%; display: block;">
<td style="text-transform: uppercase; border-bottom: 1px dotted #CFE1EF; height: 40px; margin-bottom: 10px; width: 100%; display: block;"><h2>Account information</h2></td>
<td class="content" style="margin-top:20px; width:100%; display: block;">
<h3 style="margin: 0">First name:<span style="font-weight: normal; margin-left: 10px;">!!CUSTOMER_FIRST_NAME!!</span></h3>
<h3 style="margin: 0">Last name:<span style="font-weight: normal; margin-left: 10px;">!!CUSTOMER_LAST_NAME!!</span></h3>
<h3 style="margin: 0">Email:<span style="font-weight: normal; margin-left: 10px;">!!CUSTOMER_EMAIL!!</span></h3>
<h3 style="margin: 0">Phone:<span style="font-weight: normal; margin-left: 10px;">!!PHONE!!</span></h3>
</td>
<td style="text-transform: uppercase; border-bottom: 1px dotted #CFE1EF; height: 40px; width: 100%"><h2>Property information</h2></td>
<td class="content" style="margin-top:20px; width: 100%; display: block;">
<h3 style="margin: 0">Listing Site:<span style="font-weight: normal; margin-left: 10px;">!!PROPERTY_IS_LISTED!!</span></h3>
<h3 style="margin: 0">Listing Number:<span style="font-weight: normal; margin-left: 10px;">!!PROPERTY_ID!!</span></h3>
<h3 style="margin: 0">Property Name:<span style="font-weight: normal; margin-left: 10px;">!!PROPERTY_NAME!!</span></h3>
<h3 style="margin: 0">Address:<span style="font-weight: normal; margin-left: 10px;">!!PROPERTY_STREET_ADDRESS!!</span></h3>
<h3 style="margin: 0">City:<span style="font-weight: normal; margin-left: 10px;">!!PROPERTY_CITY!!</span></h3>
<h3 style="margin: 0">State:<span style="font-weight: normal; margin-left: 10px;">!!PROPERTY_STATE!!</span></h3>
<h3 style="margin: 0">Country:<span style="font-weight: normal; margin-left: 10px;">!!PROPERTY_STATE!!</span></h3>
</td>
</tr>
<tr style="margin-top: 10px; padding-bottom:5px; width: 100%; display: block;">
<td style="text-transform: uppercase; border-bottom: 1px dotted #CFE1EF; height: 40px; margin-bottom: 10px; display: block;"><h2>your site</h2></td>
<td class="content" style="margin-top:20px; display: block;">
<h3 style="margin: 0">Site URL:<span style="font-weight: normal; margin-left: 10px;">!!SITE_URL!!</span></h3>
<h3 style="margin: 0">Design name:<span style="font-weight: normal; margin-left: 10px;">!!DESIGN_NAME!!</span></h3>
<img style="width:100%; margin-top: 20px;" src="http://vsbtest.com/Latestwizard/images/designs/design3.jpg" alt="Site template preview"/>
</td>
</tr>
</table>
<table style="width: 100%; height: 55px; background: #fff; z-index:5; box-shadow: 0px 1px 5px 0px #a5a5a5;">
<tr class="copyright">
<td style="padding-top: 10px; padding-left: 20px; display: block; clear:both;">© 2013</td>
</tr>
</table></html>
And it displays as I want (full width table cells) on major email clients - Gmail, Thunderbird, Gmail app for android, but when using the email app from iPad it does not work ok..it does not "take" the 100% width and puts all the table cells in a row. I know I could solve this by easily adding every cell in a separate row but I don't want this unless there is no other solution.
Do you have any ideea why this is happening?
I can't figure it why.
it should look something like this: http://jsfiddle.net/6YqmL/1/
Header tags are not consistently supported in html-email. instead of using <h3>, try styling them in the table cell or a font tag and use double <br> to separate them.
Related
<tr id="section-6465178" class="section loyalty">
<table cellspacing="0" cellpadding="0" border="0" width="100%" role="presentation">
<!-- Button : BEGIN -->
<header style="padding: 30px;
text-align: center; font-size: 35px;"> <span style="color: #8c734b; font-size: 20px; font-family: Lora;">More on the friends of Bynd(FOB) Loyalty Programme</span></header>
<section class="col-1-2">
<th class="earn points" style="mso-line-height-rule: exactly; border-radius: 1px; padding-top: 50px;
padding-bottom: 20px;
padding-left: 30px;
padding-right: 200px;"><img src="https://cdn.abc.com/files/Earn_Points_v2.png?v=1661306144" style="width: 50px; height: 50px ;" />
<p>Earn Points</p>
<p> Collect 1 point for every S$1 spent online</p>
</section>
</th>
<th class="get rewarded" style="mso-line-height-rule: exactly; border-radius: 1px; padding-top: 50px;
padding-bottom: 20px;
padding-left: 30px;
padding-right: 200px;"><img src="https://cdn.abc.com/files/Get_Rewards.png?v=1661306273" style="width: 50px; height: 50px ;" />
<p>Get Rewarded</p>
<p> Enjoy special rewards by redeeming your accumulated FOB points</p>
</th>
<section class="col-1-2">
<th class="early access" style="mso-line-height-rule: exactly; border-radius: 1px; padding-left: 300px; padding-right: 0px;"><img src="https://cdn.abc.com/files/Early_Access_v2.png?v=1661306185" style="width: 50px; height: 50px ;" />
<p>Early Access</p>
<p>Get early access to new product launches and sales promotions.</p>
</th>
</section>
<section class="col-1-2">
<th class="tier benefits" style="mso-line-height-rule: exactly; border-radius: 1px; padding-left: 300px; padding-right: 0px;"><img src="https://cdn.abc.com/files/Exclusive_Benefits_v2.png?v=1661306185" style="width: 50px; height: 50px ;" />
<p>Tier Benefits</p>
<p>Advance to next tier for more benefits and discounts.</p>
</th>
</section>
</table>
</th>
</tr>
I wanted to make it 2 rows 2 columns but seems like it has a conflict. Previously, I've tried div tags but couldn't work too.
result:
You can stack the components by adding two table rows <tr> - so there are two table head (th) elements inside each new row.
The inline CSS seems to be causing some problems too. I didn't have time to clean it all up but just moved the important parts over to a separate CSS. Still needs more styling in order to get the font sizes right and import the Lora font correctly. Of course you could get good results with just positioned divs too instead of tables, maybe someone will post that solution.
tr, th {
margin: 0 auto;
text-align: center;
}
table {
margin: 0 auto;
text-align: center;
}
header {
padding: 30px;
text-align: center;
font-size: 35px;
color: #8c734b;
}
header.span {
font-size: 20px;
font-family: Lora;
}
th {
mso-line-height-rule: exactly;
border-radius: 1px;
padding-top: 50px;
padding-bottom: 20px;
/* padding-left: 30px;
padding-right: 200px; */
}
<tr id="section-6465178" class="section loyalty">
<table cellspacing="0" cellpadding="0" border="0" width="100%" role="presentation">
<!-- Button : BEGIN -->
<header class="span"><span class="span">More on the friends of Bynd(FOB) Loyalty Programme</span></header>
<section class="col-1-2">
<tr>
<th class="earn points"><img src="https://cdn.abc.com/files/Earn_Points_v2.png?v=1661306144" style="width: 50px; height: 50px ;" />
<p>Earn Points</p>
<p> Collect 1 point for every S$1 spent online</p>
</th>
</section>
<th class="get rewarded"><img src="https://cdn.abc.com/files/Get_Rewards.png?v=1661306273" style="width: 50px; height: 50px ;" />
<p>Get Rewarded</p>
<p> Enjoy special rewards by redeeming your accumulated FOB points</p>
</th>
</tr>
<section class="col-1-2">
<tr>
<th class="early access"><img src="https://cdn.abc.com/files/Early_Access_v2.png?v=1661306185" style="width: 50px; height: 50px ;" />
<p>Early Access</p>
<p>Get early access to new product launches and sales promotions.</p>
</th>
</section>
<section class="col-1-2">
<th class="tier benefits"><img src="https://cdn.abc.com/files/Exclusive_Benefits_v2.png?v=1661306185" style="width: 50px; height: 50px ;" />
<p>Tier Benefits</p>
<p>Advance to next tier for more benefits and discounts.</p>
</th>
</tr>
</section>
</table>
</th>
</tr>
I found some errors on the structuring of the table. If you wonna create a table with 2 rows and 2 columns, here is a simple example:
<table>
<tr>
<td>Company</td>
<td>Contact</td>
</tr>
<tr>
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
</tr>
</table>
Here some mistake:
The <tr></tr> should be inside the table. Probably the <tr></tr> was passed cause of is outside the table.
You probably forgot a <section></section> tag (not sure if it was wanted)
You have used only one <tr></tr> tag instead two.
Here is the solution code:
<!DOCTYPE html>
<html lang="en">
<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>Document</title>
</head>
<body>
<table cellspacing="0" cellpadding="0" border="0" width="100%" role="presentation">
<!-- Button : BEGIN -->
<header style="padding: 30px;
text-align: center; font-size: 35px;"> <span style="color: #8c734b; font-size: 20px; font-family: Lora;">More on the friends of Bynd(FOB) Loyalty Programme</span></header>
<tr id="section-6465178" class="section loyalty">
<section class="col-1-2">
<th class="earn points" style="mso-line-height-rule: exactly; border-radius: 1px; padding-top: 50px;
padding-bottom: 20px;
padding-left: 30px;
padding-right: 200px;"><img src="https://cdn.abc.com/files/Earn_Points_v2.png?v=1661306144" style="width: 50px; height: 50px ;" />
<p>Earn Points</p>
<p> Collect 1 point for every S$1 spent online</p>
</th>
</section>
<section class="col-1-2">
<th class="get rewarded" style="mso-line-height-rule: exactly; border-radius: 1px; padding-top: 50px;
padding-bottom: 20px;
padding-left: 30px;
padding-right: 200px;"><img src="https://cdn.abc.com/files/Get_Rewards.png?v=1661306273" style="width: 50px; height: 50px ;" />
<p>Get Rewarded</p>
<p> Enjoy special rewards by redeeming your accumulated FOB points</p>
</th>
</section>
</tr>
<tr>
<section class="col-1-2">
<th class="early access" style="mso-line-height-rule: exactly; border-radius: 1px; padding-left: 300px; padding-right: 0px;"><img src="https://cdn.abc.com/files/Early_Access_v2.png?v=1661306185" style="width: 50px; height: 50px ;" />
<p>Early Access</p>
<p>Get early access to new product launches and sales promotions.</p>
</th>
</section>
<section class="col-1-2">
<th class="tier benefits" style="mso-line-height-rule: exactly; border-radius: 1px; padding-left: 300px; padding-right: 0px;"><img src="https://cdn.abc.com/files/Exclusive_Benefits_v2.png?v=1661306185" style="width: 50px; height: 50px ;" />
<p>Tier Benefits</p>
<p>Advance to next tier for more benefits and discounts.</p>
</th>
</section>
</tr>
</table>
</body>
</html>
If it keeps getting messy then the problem is in your css file. I hope it helped you :)
I am trying to create a banner that has a two tone blue color similar to this:
I am using Bootstrap 4.x with asp.net mvc. I have tried dividing the banner into 3 columns but I couldn't expand the the background color all the way in the icon column.
Here is how it currently looks on my end:
Here is my code:
View
<div class="row alert-banner-row">
<div class="col-sm-2 icon-column">
<i class="fas fa-3x #Model.Icon1 fa-inverse"></i>
</div>
<div class="col-sm-8 body-column">
<h5>#Model.Title</h5>
<p>#Model.Content</p>
</div>
<div class="col-sm-2 button-column">
#if (Model.ButtonUrl.EndsWith(".pdf"))
{
<a class="ctaBanner-cta button button--white" target="_blank" href="#Model.ButtonUrl">#Model.ButtonLabel</a>
}
else
{
<a class="ctaBanner-cta button button--white" href="#Model.ButtonUrl">#Model.ButtonLabel</a>
}
</div>
</div>
SCSS
.alert-banner-row {
display: flex;
flex-direction: row;
align-items: center;
padding: 0.5rem;
border-radius: 1rem;
background-color: #004089;
.body-column {
padding-top: 10px;
font-family: 'Roboto', sans-serif;
margin: 0rem;
color: white;
}
.icon-column {
background-color: #00336D;
}
}
How can I edit what I currently have to make it look like the first screenshot?
In order to have the darker background on your .icon-column, its parent .alert-banner-row cannot have any padding. Otherwise it would show a gap:
<div class="row alert-banner-row">
<div class="col-sm-2 icon-column">
<i />
</div>
<div class="col-sm-8 body-column">
<h5 />
<p />
</div>
<div class="col-sm-2 button-column">
<a />
</div>
</div>
And to show the left corner, you would need to specify overflow:hidden; otherwise it won't be shown as it's covered by its overflow content.
.alert-banner-row {
background-color: #004089;
border-radius: 1rem;
color: #fff;
overflow: hidden;
.body-column {
padding-top: 1rem;
padding-bottom: 1rem;
font-family: 'Roboto', sans-serif;
}
.icon-column,
.button-column {
display: flex;
flex-flow: column nowrap;
align-items: center;
justify-content: center;
}
.icon-column {
background-color: #00336D;
}
}
demo: https://jsfiddle.net/davidliang2008/krdu6wjc/53/
You need to make the columns display:flex and align-items: center instead...
.alert-banner-row {
display: flex;
padding: 0.5rem;
border-radius: 1rem;
background-color: #004089;
.body-column {
padding-top: 10px;
font-family: 'Roboto', sans-serif;
margin: 0rem;
color: white;
align-self: center;
}
.icon-column {
background-color: #00336D;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
}
.button-column {
align-self: center;
}
}
https://codeply.com/p/wJMhKZ7P7y
This is it:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.10.0-11/css/all.min.css">
<title>Title</title>
</head>
<body>
<div class="container">
<div class="row" style="height:100px;color: white;">
<div class="col-2" style="background-color: #00336D;">
<div style="text-align: center; position: relative; top:40%;">
<i class=" fa fa-exclamation-circle "></i>
</div>
</div>
<div class=" col-8 " style=" background-color: #004089;padding: 2%; ">
<h1><b>Creative Writing</b></h1>
Generating random paragraphs can be an excellent way for writers to get their creative flow going at the beginning of the day. The writer has no idea what topic the random paragraph will be about when it appears. This forces the writer to use creativity
to complete one of three common writing challenges. The writer can use the paragraph as the first one of a short story and build upon it.
</div>
<div class=" col-2 " style=" background-color: #004089; " ">
<button type=" button " class=" btn btn-primary align-content-center " style=" background-color: white; color:#00336D ;position:relative;top:30% "><b>Click Here</b></button>
</div>
</div>
</div>
<script src=" https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.15.0/umd/popper.min.js "></script>
<script src=" https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.min.js "></script>
</body>
</html>
check it:
https://jsfiddle.net/s9qmj1fn/
I have the following template:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>template seldata</title>
<style>
.invoice-box {
max-width: 800px;
margin: auto;
padding: 30px;
border: 1px solid #eee;
box-shadow: 0 0 10px rgba(0, 0, 0, .15);
font-size: 16px;
line-height: 24px;
font-family: 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif;
color: #555;
}
.invoice-box table {
width: 100%;
line-height: inherit;
text-align: left;
}
.invoice-box table td {
vertical-align: top;
}
.invoice-box table tr.top table td {
padding-bottom: 20px;
}
.invoice-box table tr.top table td.title {
font-size: 45px;
line-height: 45px;
color: #333;
}
.invoice-box table tr.information table td {
padding-bottom: 40px;
}
.invoice-box table tr.heading td {
background: #4B626D;
border-bottom: 1px solid #ddd;
text-align: center;
min-width: 100px;
color: white;
}
.invoice-box table tr.details td {
padding-bottom: 20px;
}
.invoice-box table tr.item td{
border-bottom: 1px solid #eee;
text-align: center;
}
.invoice-box table tr.item.last td {
border-bottom: none;
}
.invoice-box table tr.total td:nth-child(2) {
border-top: 2px solid #eee;
font-weight: bold;
}
#media only screen and (max-width: 600px) {
.invoice-box table tr.top table td {
width: 100%;
display: block;
text-align: center;
}
.invoice-box table tr.information table td {
width: 100%;
display: block;
text-align: center;
}
}
.rtl {
direction: rtl;
font-family: Tahoma, 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif;
}
.rtl table {
text-align: right;
}
.rtl table tr td:nth-child(2) {
text-align: left;
}
</style>
</head>
<body>
<div class="invoice-box">
<table>
<tr class="top">
<td colspan="2">
<table>
<tr>
<td class="title">
</td>
</tr>
</table>
</td>
</tr>
</table>
<table>
<tr class="information">
<td colspan="2">
<table>
<tr>
<td>
<b>Data Encomenda:</b> ${poos.event_date} <br>
<b>Nome:</b>${poos.name}<br>
<b>Morada:</b> Igreja Velha - Santa Comba<br>
<b>Concelho:</b> Ponte de Lima<br>
<b>Codigo Postal:</b> 4990<br>
<b>Codigo da Empresa:</b> 305160<br>
<b>Codigo de Distribuidor:</b>00000<br>
Da visita ao/a V. Cunha - Ponte de Lima - JF no dia 2018-02-27 resulta o seguinte:
</td>
</tr>
</table>
</td>
</tr>
</table>
<p> <b> Encomendas Grosso - Queijo e Manteiga </b> </p>
<table>
<tr class="heading">
<td>
Marca
</td>
<td>
Produto
</td>
<td>
ID GS1
</td>
<td>
Encomenda
</td>
<td>
Data-Entrega
</td>
<td>
Oferta
</td>
<td>
Observações
</td>
</tr>
<tr class="item">
<td>
Limiano
</td>
<td>
Limiano Bola
</td>
<td>
2902310000009
</td>
<td>
40
</td>
<td>
05-03-2018
</td>
<td>
3
</td>
<td>
1 cx em linha a parte
</td>
</tr>
</table>
</div>
</body>
</html>
I am using
ByteArrayOutputStream bytes = pdfRenderingService.render(template: "/templates/offers", model: [poos:poos, tasks:tasks, skus:skus])
But it is throwing errors like:
org.xml.sax.SAXParseException; lineNumber: 1; columnNumber: 3; The markup in the document preceding the root element must be well-formed.
What can I do to make this work? I already made some reseach and I find this being something about XML formatting but I can't figure what is wrong. Already went to xHTML validator...
Can someone please help me to figure out how can I make this rendering work? What am I doing wrong?
(If this is exclusively to Grails Rendering, are there other html to pdf libs that I can use? )
Thanks in advance!
Grails Rendering Plugin - Reference Documentation
You must declare DOCTYPE at the start of your GSP like:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
So your template will be _offers.gsp like follows:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta charset="utf-8">
<title>template seldata</title>
<style>
.invoice-box {
max-width: 800px;
margin: auto;
padding: 30px;
border: 1px solid #eee;
box-shadow: 0 0 10px rgba(0, 0, 0, .15);
font-size: 16px;
line-height: 24px;
font-family: 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif;
color: #555;
}
.invoice-box table {
width: 100%;
line-height: inherit;
text-align: left;
}
.invoice-box table td {
vertical-align: top;
}
.invoice-box table tr.top table td {
padding-bottom: 20px;
}
.invoice-box table tr.top table td.title {
font-size: 45px;
line-height: 45px;
color: #333;
}
.invoice-box table tr.information table td {
padding-bottom: 40px;
}
.invoice-box table tr.heading td {
background: #4B626D;
border-bottom: 1px solid #ddd;
text-align: center;
min-width: 100px;
color: white;
}
.invoice-box table tr.details td {
padding-bottom: 20px;
}
.invoice-box table tr.item td{
border-bottom: 1px solid #eee;
text-align: center;
}
.invoice-box table tr.item.last td {
border-bottom: none;
}
.invoice-box table tr.total td:nth-child(2) {
border-top: 2px solid #eee;
font-weight: bold;
}
#media only screen and (max-width: 600px) {
.invoice-box table tr.top table td {
width: 100%;
display: block;
text-align: center;
}
.invoice-box table tr.information table td {
width: 100%;
display: block;
text-align: center;
}
}
.rtl {
direction: rtl;
font-family: Tahoma, 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif;
}
.rtl table {
text-align: right;
}
.rtl table tr td:nth-child(2) {
text-align: left;
}
</style>
</head>
<body>
<div class="invoice-box">
<table>
<tr class="top">
<td colspan="2">
<table>
<tr>
<td class="title">
</td>
</tr>
</table>
</td>
</tr>
</table>
<table>
<tr class="information">
<td colspan="2">
<table>
<tr>
<td>
<b>Data Encomenda:</b> ${poos.event_date} <br>
<b>Nome:</b>${poos.name}<br>
<b>Morada:</b> Igreja Velha - Santa Comba<br>
<b>Concelho:</b> Ponte de Lima<br>
<b>Codigo Postal:</b> 4990<br>
<b>Codigo da Empresa:</b> 305160<br>
<b>Codigo de Distribuidor:</b>00000<br>
Da visita ao/a V. Cunha - Ponte de Lima - JF no dia 2018-02-27 resulta o seguinte:
</td>
</tr>
</table>
</td>
</tr>
</table>
<p> <b> Encomendas Grosso - Queijo e Manteiga </b> </p>
<table>
<tr class="heading">
<td>
Marca
</td>
<td>
Produto
</td>
<td>
ID GS1
</td>
<td>
Encomenda
</td>
<td>
Data-Entrega
</td>
<td>
Oferta
</td>
<td>
Observações
</td>
</tr>
<tr class="item">
<td>
Limiano
</td>
<td>
Limiano Bola
</td>
<td>
2902310000009
</td>
<td>
40
</td>
<td>
05-03-2018
</td>
<td>
3
</td>
<td>
1 cx em linha a parte
</td>
</tr>
</table>
</div>
</body>
</html>
Hope this helps you
I have a Jenkins CI setup, and we are using Perforce as our SCM.
I have configured the Email-ext plugin to notify developers when a build breaks, and also when it is fixed.
At the moment the notification email body just uses the $DEFAULT_CONTENT, but I would really like to indicate the most recent Perforce changelist into the email content as this would be more helpful to the developers.
I'm thinking Changelist number, Changelist title and Committer.
Any ideas on how to do this?
Somewhere on the jenkins mailing list I found this template which I think does what you want.
Create a folder "email-templates" in your jenkins root directory, put the file in there and name it "p4htmlmail.jelly".
Then in your jenkins configuration put ${JELLY_SCRIPT,template="p4htmlmail"} in the DEFAULT_CONTENT field of the email-ext plugin configuration.
<j:jelly xmlns:j="jelly:core" xmlns:st="jelly:stapler" xmlns:d="jelly:define">
<link type="text/css" rel="stylesheet" href="${rooturl}static/e59dfe28/css/style.css"/>
<link type="text/css" rel="stylesheet" href="${rooturl}static/e59dfe28/css/color.css"/>
<STYLE>
a:link,a:visited {
text-decoration: underline;
<!--color: #3B5998;-->
color: #8B9DC3
}
a.success:link,a.success:visited {
text-decoration: underline;
color: #338033;
}
a.failure:link,a.failure:visited {
text-decoration: underline;
color: #900;
}
a.unstable:link,a.unstable:visited {
text-decoration: underline;
color: #F0C000;
}
<!--
body {
background-color: #DFE3EE;
}-->
.pane {
margin-top: 4px;
white-space: nowrap;
}
.pane TD {
padding: 4px 4px 3px 4px;
}
TABLE.pane {
width: 100%;
border: none;
}
TD.style1 {
color: #3B5998;
width: 10%;
}
TD.pane {
padding: 3px 4px 3px 4px;
vertical-align: middle;
}
TD.pane-header {
border-top: 1px #8B9DC3 solid;
border-bottom: 1px #8B9DC3 solid;
background-color: #DFE3EE;
font-weight: bold;
font-family: Verdana, Helvetica, sans serif;
font-size: 11px;
color: #8B9DC3;
padding-top: 10px;
padding-bottom: 10px;
}
TD.pane-header-success {
border-top: 1px #338033 solid;
border-bottom: 1px #338033 solid;
background-color: #E0FFE0;
font-weight: bold;
font-family: Verdana, Helvetica, sans serif;
font-size: 11px;
color: #338033;
padding-top: 10px;
padding-bottom: 10px;
}
TD.pane-header-failure {
border-top: 1px #900 solid;
border-bottom: 1px #900 solid;
background-color: #FCC;
font-weight: bold;
font-family: Verdana, Helvetica, sans serif;
font-size: 11px;
color: #900;
padding-top: 10px;
padding-bottom: 10px;
}
TD.pane-header-unstable {
border-top: 1px #F0C000 solid;
border-bottom: 1px #F0C000 solid;
background-color: #FFFFCE;
font-weight: bold;
font-family: Verdana, Helvetica, sans serif;
font-size: 11px;
color: #F0C000;
padding-top: 10px;
padding-bottom: 10px;
}
TH.pane {
font-weight: bold;
}
SPAN.style1 {
font-weight: bold;
color: #8B9DC3;
}
SPAN.success {
color: #338033;
}
SPAN.failure {
color: #900;
}
LI.style1 {
list-style: cirle outside;
}
LI.failure {
list-style: cirle outside;
color: #900;
}
</STYLE>
<BODY>
<j:set var="spc" value=" " />
<!-- GENERAL INFO -->
<TABLE class="pane">
<TBODY>
<TR>
<j:choose>
<j:when test="${build.result=='SUCCESS'}">
<TD colspan="2" class="pane-header-success">
<SPAN>Build Result Summary - <A class="success" href="${rooturl}${build.url}">See full build details</A></SPAN>
</TD>
</j:when>
<j:when test="${build.result=='FAILURE'}">
<TD colspan="2" class="pane-header-failure">
<SPAN>Build Result Summary - <A class="failure" href="${rooturl}${build.url}">See full build details</A></SPAN>
</TD>
</j:when>
<j:otherwise>
<TD colspan="2" class="pane-header-unstable">
<SPAN>Build Result Summary - <A class="unstable" href="${rooturl}${build.url}">See full build details</A></SPAN>
</TD>
</j:otherwise>
</j:choose>
</TR>
<TR>
<TD class="style1">Project:</TD>
<TD>${project.name}</TD>
</TR>
<TR>
<TD class="style1">Completion:</TD>
<TD>${it.timestampString}</TD>
</TR>
<TR>
<TD class="style1">Duration:</TD>
<TD>${build.durationString}</TD>
</TR>
<TR>
<TD class="style1">Status:</TD>
<TD>
<j:choose>
<j:when test="${build.result=='SUCCESS'}">
<IMG SRC="${rooturl}static/e59dfe28/images/16x16/blue.png"/>
</j:when>
<j:when test="${build.result=='FAILURE'}">
<IMG SRC="${rooturl}static/e59dfe28/images/16x16/red.png"/>
</j:when>
<j:otherwise>
<IMG SRC="${rooturl}static/e59dfe28/images/16x16/yellow.png"/>
</j:otherwise>
</j:choose>
${build.result}
</TD>
</TR>
<TR>
<TD class="style1">Help:</TD>
<TD>
Help text goes here.
</TD>
</TR>
</TBODY>
</TABLE>
<BR/>
<!-- CHANGE SET -->
<j:set var="changeSet" value="${build.changeSet}" />
<j:if test="${changeSet!=null}">
<j:set var="hadChanges" value="false" />
<TABLE class="pane">
<TBODY>
<TR>
<TD colspan="2" class="pane-header">
<SPAN>Code Changes - See full change details</SPAN>
</TD>
</TR>
<j:forEach var="cs" items="${changeSet}" varStatus="loop">
<j:set var="hadChanges" value="true" />
<j:set var="aUser" value="${cs.hudsonUser}"/>
<TR>
<TD colspan="2">
<SPAN class="style1">
Change <B>${cs.changeNumber}</B> by
<B>${aUser!=null?aUser.displayName:cs.author.displayName}: </B>
'${cs.msgAnnotated}'
</SPAN>
</TD>
</TR>
<j:forEach var="p" items="${cs.affectedFiles}">
<TR>
<TD width="2%">
<j:switch on="${p.editType.name}">
<j:case value="add">
<IMG SRC="${rooturl}plugin/perforce/icons/action-ADD.gif"/>
</j:case>
<j:case value="branch">
<IMG SRC="${rooturl}plugin/perforce/icons/action-BRANCH.gif"/>
</j:case>
<j:case value="delete">
<IMG SRC="${rooturl}plugin/perforce/icons/action-DELETE.gif"/>
</j:case>
<j:case value="edit">
<IMG SRC="${rooturl}plugin/perforce/icons/action-EDIT.gif"/>
</j:case>
<j:case value="import">
<IMG SRC="${rooturl}plugin/perforce/icons/action-IMPORT.gif"/>
</j:case>
<j:case value="integrate">
<IMG SRC="${rooturl}plugin/perforce/icons/action-INTEGRATE.gif"/>
</j:case>
<j:case value="move_add">
<IMG SRC="${rooturl}plugin/perforce/icons/action-MOVE_ADD.gif"/>
</j:case>
<j:case value="move_delete">
<IMG SRC="${rooturl}plugin/perforce/icons/action-MOVE_DELETE.gif"/>
</j:case>
<j:default>
${p.editType.name}
</j:default>
</j:switch>
</TD>
<TD><SPAN>${p.path}</SPAN></TD>
</TR>
</j:forEach>
</j:forEach>
<j:if test="${!hadChanges}">
<TR><TD colspan="2">No Changes</TD></TR>
</j:if>
</TBODY>
</TABLE>
<BR/>
</j:if>
<!-- JUNIT TEST OUTPUT -->
<j:set var="junitResultList" value="${it.JUnitTestResult}" />
<j:if test="${junitResultList.isEmpty()!=true}">
<TABLE class="pane">
<TBODY>
<TR>
<TD colspan="2" class="pane-header">
<SPAN>Unit Tests - See full test details</SPAN>
</TD>
</TR>
<j:forEach var="junitResult" items="${it.JUnitTestResult}">
<j:forEach var="packageResult" items="${junitResult.getChildren()}">
<TR>
<TD>
Name: ${packageResult.getName()}, Failed: <SPAN class="failure">${packageResult.getFailCount()}</SPAN> test(s), Passed: <SPAN class="success">${packageResult.getPassCount()}</SPAN> test(s), Skipped: ${packageResult.getSkipCount()} test(s), Total: ${packageResult.getPassCount()+packageResult.getFailCount()+packageResult.getSkipCount()} test(s)
</TD>
</TR>
<j:forEach var="failed_test" items="${packageResult.getFailedTests()}">
<TR>
<TD>
<UL>
<B>
<LI class="failure">Failed: ${failed_test.getFullName()}</LI>
</B>
</UL>
</TD>
</TR>
</j:forEach>
</j:forEach>
</j:forEach>
</TBODY>
</TABLE>
<BR/>
</j:if>
<!-- CONSOLE OUTPUT -->
<j:getStatic var="resultFailure" field="FAILURE" className="hudson.model.Result"/>
<j:if test="${build.result==resultFailure}">
<TABLE class="pane">
<TBODY>
<TR>
<TD colspan="2" class="pane-header">
<SPAN>Console Output - See full console details</SPAN>
</TD>
</TR>
<j:forEach var="line" items="${build.getLog(100)}">
<TR>
<TD>${line}</TD>
</TR>
</j:forEach>
</TBODY>
</TABLE>
<BR/>
</j:if>
</BODY>
</j:jelly>
ok so i have this address for a part of my website,
localhost:2001/?botid=Alice&template=alice
and i want to make it so what i put after that will be put into the input box on the page. So something like this,
localhost:2001/?botid=Alice&template=alice#Hello
how are you?
can anyone help out with a javascript or something?
heres the source code,
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<!--This is a simple example of an HTML chat template for Program D.-->
<head>
<!--The value associated with a bot predicate, such as
"name", is inserted wherever you use a bot element
with a name attribute that corresponds to a predicate name.-->
<title>
Dialogue with <bot name="name"/>
</title>
<!--This is a simple stylesheet to format the page.-->
<style type="text/css">
html
{
overflow: hidden;
}
p
{
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
margin-top: 10px;
margin-bottom: 5px;
margin-left: 0px;
margin-right: 10px;
text-align: left;
background: transparent;
}
.fieldlabel
{
font-weight: bold;
font-style: normal;
font-size: 14px;
color: #0000aa;
}
#userinput
{
font-weight: bold;
font-style: italic;
font-size: 14px;
color: #aa0000;
}
.botresponse
{
font-weight: bold;
font-style: italic;
font-size: 14px;
color: #00aa00;
}
.bottomtext
{
margin-top: 0px;
margin-bottom: 0px;
font-weight: normal;
font-style: italic;
font-size: 10px;
}
li p
{
margin-top: 0px;
margin-bottom: 0px;
margin-left: 20px;
margin-right: 0px;
}
ul
{
margin-top: 0px;
margin-bottom: 5px;
margin-left: 10px;
margin-right: 0px;
}
form
{
margin-top: 20px;
margin-bottom: 10px;
margin-left: 0px;
margin-right: 0px;
}
#audio
{
display: none;
}
</style>
<script type="text/javascript">
function playPause() {
var myVideo = document.getElementsByTagName('audio')[0];
if (myVideo.paused)
myVideo.play();
else
myVideo.play();
}
</script>
<script type="text/javascript">
document.getElementById('text')[0].value = window.location.hash.substring(1);
</script>
</head>
<!--The body element is set to automatically give focus to the
input field each time the document is loaded.-->
<body>
<table border="0" cellspacing="5" cellpadding="0" width="500">
<tr>
<td width="30%" valign="top">
<p class="fieldlabel">
You said:
</p>
</td>
<td width="70%" valign="top">
<p id="userinput">
<userinput/>
</p>
</td>
</tr>
<tr>
<td width="30%" valign="top">
<p class="fieldlabel">
<!--The name of the bot will be substituted here.-->
<bot name="name"/> said:
</p>
</td>
<td width="70%" valign="top">
<p class="botresponse">
<!--The bot's response will be substituted here.-->
<reply></reply><response/>
</p>
</td>
</tr>
<tr>
<td width="100%" colspan="2" valign="top">
<form method="post">
<input type="text" size="50" name="text" id="text" onkeydown="if (event.keyCode == 190) document.getElementById('go').click()" x-webkit-speech />
<input type="submit" id="go" value="Say" />
</form>
</td>
</tr>
<tr>
<td width="100%" colspan="2" valign="top">
<p class="bottomtext">
<!--Again we display the bot name, and also the hostname.-->
You are speaking with <bot name="name"/> from <hostname/>.
</p>
<p class="bottomtext">
<!--Here is an example of getting another bot predicate value (master).-->
<bot name="name"/>'s botmaster is <bot name="master"/>.
</p>
<p>
You can:
</p>
<ul>
<li>
<p>
<!--This link will request a login form.-->
log in.
</p>
</li>
<li>
<p>
<!--This link will request a new user registration form.-->
register a new username and password.
</p>
</li>
</ul>
</td>
</tr>
</table>
<audio id="audio" onended="document.forms[0].elements[0].focus();" controls="controls" autoplay="autoplay" src="http://translate.google.com/translate_tts?tl=en&q=><response/>" type="audio/mpeg"></audio>
</body>
</html>
With jQuery:
$('input').val(window.location.hash.substring(1));
Without jQuery:
document.getElementsByTagName('input')[0].value = window.location.hash.substring(1);
Either way, you have to make sure the DOM is loaded. If you want to unescape it, use decodeURIComponent E.g.:
window.addEventListener("load", function()
{
document.getElementsByTagName('input')[0].value = decodeURIComponent(window.location.hash.substring(1));
}, false);
window.location = window.location + '#' + document.getElementById('inputbox').text;