The code will run in a velocity engine and you'll have to make sure your code is well formatted.
| Warning |
|---|
Make sure to write your code (HTML) so that most of the common used email clients can render the HTML. The most erroneous error prone client is Microsoft Outlook (according to our findings), so make sure to test before you publish any custom theme. |
...
Below you will find an example (the default details view theme):
| Code Block |
|---|
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style>
<meta http-equiv="Content-Type" content="text/html; charset="utf-8" /> th.confluenceTh {border: <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />1px solid #cccccc;
<title>Message Title</title> background: #f5f5f5;
</head> <body class="jira" style="color: #333; font-family: Arial, sans-serif; font-size: 12px;"> padding: 3px 4px 3px 4px;
<table id="background-table" cellpadding="0" cellspacing="0" width="100%" style="border-collapse: collapse; msotext-table-lspacealign: 0ptcenter;}
mso-table-rspace:
0pt; background-color: #f5f5f5; border-collapse: collapse; mso-table-lspace: 0pt; mso-table-rspace: 0pt"> table.confluenceTable {
<!-- header here border-->
collapse: collapse;
<tr> margin: 5px 0 5px 2px;
<td style="vertical-align: top; font-size: 12px; padding: 10px 25px 0pxwidth: 25pxauto;">
}
#if($emailmessage) td.confluenceTd {
${emailmessage}
border: 1px solid #cccccc;
padding: 3px #end4px 3px 4px;
}
</td> </style>
</tr> <meta http-equiv="Content-Type" content="text/html; charset="utf-8" />
#foreach ($issue in $issues)
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
<tr><title>Message Title</title>
</head>
<td <body class="jira" style="paddingcolor: 0px#333; borderfont-collapsefamily: collapse Arial, sans-serif; paddingfont-size: 0px 20px12px;">
<table cellspacingid="0background-table" cellpadding="0" bordercellspacing="0" width="100%" style="border-collapse: collapse; mso-table-lspace: 0pt; mso-table-rspace: 0pt">
; background-color: #f5f5f5; border-collapse: collapse; mso-table-lspace: 0pt; mso-table-rspace: 0pt">
#foreach ($issue in $issues)
<tr> <tr>
<td style="vertical-alignpadding: 0px; border-collapse: topcollapse; padding: 0px 0px 5px 0px;20px">
<table cellspacing="0" cellpadding="0" <div border="0" style="paddingborder-topcollapse: 5pxcollapse;">
mso-table-lspace: 0pt; mso-table-rspace: 0pt">
</div><tr>
</td>
<td style="vertical-align: top; padding: 0px 0px 5px 0px;">
</tr> <div style="padding-top: 5px;">
</table> </td> </div>
</tr> <tr> </td>
<td id="email-content-container" style="padding: 0px; border-collapse: collapse; padding: 0 20px"> </tr>
<table id="email-content-table" cellspacing="0" cellpadding="0" border="0" width="100%" style="border-collapse: collapse; mso-table-lspace: 0pt; mso-table-rspace: 0pt; border-spacing: 0; border-collapse: separate"> </table>
</td>
</tr>
<tr> <tr>
<!-- there needs to be content in the cell for it to render in some clients --<td id="email-content-container" style="padding: 0px; border-collapse: collapse; padding: 0 20px">
<td class<table id="email-content-rounded-top mobile-expand" style="padding: 0px; table" cellspacing="0" cellpadding="0" border="0" width="100%" style="border-collapse: collapse; color: #fff; padding: 0 15px 0 16px; height: 15px; background-color: #fffmso-table-lspace: 0pt; mso-table-rspace: 0pt; border-spacing: 0; border-leftcollapse: 1pxseparate">
solid #ccc; border-top: 1px solid #ccc; border-right: 1px solid #ccc; border-bottom: 0; border-top-right-radius: 5px; border-top-left-radius: 5px; height: 10px; line-height: 10px; padding: 0 15px 0 16px; mso-line-height-rule: exactly"><tr>
<!-- there needs to be content in the cell for it to render in some clients -->
</td> <td class="email-content-rounded-top mobile-expand" style="border-collapse: collapse; color: #fff; height: 15px; background-color: #fff; border-left: 1px solid #ccc; </tr>
<tr>border-top: 1px solid #ccc; border-right: 1px solid #ccc; border-bottom: 0; border-top-right-radius: 5px; border-top-left-radius: 5px; height: 10px; line-height: 10px; padding: 0px 15px 5px 16px; mso-line-height-rule: exactly">
<td class="email-content-main mobile-expand wrapper-special-margin" style="padding: 0px; border-collapse: collapse; border-left: 1px solid #ccc; border-right: 1px solid #ccc; border-top: 0; border-bottom: 0; padding: 0 15px 0 16px; background-color: #fff; padding-top: 10px; padding-bottom: 5px"> </td>
</tr>
<table class="keyvalue-table" style="border-collapse: collapse; mso-table-lspace: 0pt; mso-table-rspace: 0pt"> <tr>
<td #set ($i = 0)
class="email-content-main mobile-expand wrapper-special-margin" style="padding: 0px; border-collapse: collapse; border-left: 1px solid #ccc; border-right: 1px solid #ccc; border-top: 0; border-bottom: 0; padding: 0 15px 0 16px; background-color: #fff; padding-top: 10px; padding-bottom: 5px">
#foreach ($element in $issue.elements) <table class="keyvalue-table" style="border-collapse: collapse; mso-table-lspace: 0pt; mso-table-rspace: 0pt">
<tr> <tr>
<th<td style="colorvertical-align: #707070top; font-size: normal 14px/20px Arial, sans-serif; text-align: left; vertical-align: top; padding: 2px 15px 2px 0px"> 12px;">
#if($emailmessage)
${emailmessage}
<div style="white-space: nowrap;"> #end
</td>
</tr>
</table>
#set ($j = 0) <table class="keyvalue-table" style="border-collapse: collapse; mso-table-lspace: 0pt; mso-table-rspace: 0pt">
#foreach($header in $issueheaders) #set ($i = 0)
#if($j == $i) $header #end #foreach ($element in $issue.elements)
<tr>
#set ($j = $j + 1) <th style="color: #707070; font: normal 14px/20px Arial, sans-serif; text-align: left; vertical-align: #end
top; padding: 2px 15px 2px 0px">
</div> <div style="white-space: nowrap;">
</th> #set ($j = 0)
<td style="border-collapse: collapse; font: normal 14px/20px Arial, sans-serif; padding: 2px 0 2px 5px; vertical-align: top">
#foreach($header in $issueheaders)
#if ($element.isEm())<em>#end #if($j == $i) $header #end
#if($element.iconurl) #set ($j = $j + 1)
<div style="white-space: nowrap;"> #end
<img </div>
src="${baseurl}${element.iconurl}" </th>
height="16" width="16" border="0"
<td style="border-collapse: collapse; font: normal 14px/20px Arial, sans-serif; padding: 2px 0 2px 5px; vertical-align: top">
alt="${element.description}" <div style="white-space: nowrap;">
#if($includeChange && $element.fieldChangeInfo.originalValue)<span style="background-color: #f1f1f1; text-decoration: line-through;">${element.fieldChangeInfo.originalValue} </span>#end #if ($element.isEm())<em>#end
title="${element.description}"> #if ($element.isEm())<em>#end
#end #if($element.iconurl)
#if($issue.parentKey && $element.getFieldKey().equals("summary")) <img
#if($includeLinks) src="${element.iconurl}"
<a href="${baseurl}/browse/${issue.parentKey}" >${issue.parentKey}</a>
height="16" width="16" border="0"
#else alt="${element.description}"
title="${issueelement.parentKeydescription}">
#end
#end #if($element.getFieldKey().equals("issuekey"))
#end #if($element.getFieldKey().equals("issuekey"))$includeLinks)
<a href="${baseurl}/browse/${issue.key}">${element.name}</a>
#else
<span style="white-space: nowrap;">${element.name}</span>
#end
#elseif($element.getFieldKey().equals("summary"))
#if($includeLinks)
<a href="${baseurl}/browse/${issue.key}">${element.name}</a>
#else
${element.name}
#end
#elseif($element.getFieldKey().equals("status"))
<div style="text-align: center; background-color: #FFF; white-space: nowrap; margin: 0; padding: 1px; border-radius: 3px; display: inline-block; line-height: 99%; #if($element.getType().equals("New")) border: 1px solid #E4E8ED; #elseif($element.getType().equals("In Progress")) border: 1px solid #FFE28C; #elseif($element.getType().equals("Complete")) border: 1px solid #B2D8B9; #else border: 1px solid #ccc; #end">
<span style="background-color: #FFF; border-top: 2px solid #FFF; border-bottom: 2px solid #FFF; border-left: 5px solid #FFF; border-right: 5px solid #FFF; border-radius: 3px; font-size: 11px; font-weight: bold; margin: 0; padding: 0; text-decoration: none; text-transform: uppercase; #if($element.getType().equals("New")) color: #4c74c3; #elseif($element.getType().equals("In Progress")) color: #594300; #elseif($element.getType().equals("Complete")) color: #14892C; #else color: #if($includeLinks)
#333; #end">
<a href="${baseurl}/browse/${issue.key}">${element.name}</a>
#else
</span>
<span style="white-space: nowrap;">${element.name}</span>
</div>
#end #elseif($element.getFieldKey().equals("labels"))
#if ($element.getInnerElements() && $element.getInnerElements().size() > 0)
#elseif($element.getFieldKey().equals("summary")) #set($count=1)
#if($includeLinks) #set($total=$element.getInnerElements().size())
<a href="${baseurl}/browse/${issue.key}">${element.name}</a> #foreach($innerelement in $element.innerElements)
#else <div style="text-align: center; background-color: #f5f5f5; white-space: nowrap; margin: 0; padding: 2px 5px; border-radius: 3px; display: inline-block; line-height: 99%; border: 1px ${element.name}
solid #ccc;">
#end <span style="margin: 0; padding: 0; text-decoration: none; color: #3b73af;">
#elseif($element.getFieldKey().equals("status")) ${innerelement.name}
<div style="text-align: center; background-color: #FFF; white-space: nowrap; margin: 0; padding: 1px; border-radius: 3px; display: inline-block; line-height: 99%; #if($element.getType().equals("New")) border: 1px solid #E4E8ED; #elseif($element.getType().equals("In Progress")) border: 1px solid #FFE28C; #elseif($element.getType().equals("Complete")) border: 1px solid #B2D8B9; #else border: 1px solid #ccc; #end"> </span>
</div>
<span style="background-color: #FFF; border-top: 2px solid #FFF; border-bottom: 2px solid #FFF; border-left: 5px solid #FFF; border-right: 5px solid #FFF; border-radius: 3px; font-size: 11px; font-weight: bold; margin: 0; padding: 0; text-decoration: none; text-transform: uppercase; #if($element.getType().equals("New")) color: #4c74c3; #elseif($element.getType().equals("In Progress")) color: #594300; #elseif($element.getType().equals("Complete")) color: #14892C; #else color: #333; #end"> #set($count=$count+1)
#end
${element.name} #else
</span> <span>${element.name}</span>
</div> #end
#else
#if ($element.getInnerElements() && $element.getInnerElements().size() > 0)
#set($count=1)
#set($total=$element.getInnerElements().size())
#foreach($innerelement in $element.innerElements)
#if($innerelement.iconurl)
<div style="white-space: nowrap; padding-right: 3px;">
<img src="${baseurl}${innerelement.iconurl}"
height="16" width="16" border="0"
alt="${innerelement.name}"
title="${innerelement.name}">
#end
<span>
#if($includeLinks && $innerelement.href)
<a href="${baseurl}${innerelement.href}">${innerelement.name}</a>
#else
<span>${innerelement.name}#if($count<$total && !$innerelement.iconurl), #end</span>, #end</span>
#end
</span>
#end #if($innerelement.iconurl)
</span> </div>
#end
#if($innerelement.iconurl) #set($count=$count+1)
</div> #end
#end #else
#set($count=$count+1) <span #if($element.getName().equals("Completed")) style="color: rgb(61, 178, 127)"
#end #elseif($element.getName().matches("-(.*)")) style="color: rgb(252, 87, 58)"
#else <span>$#end>${element.name}</span>
#end
#end
#if($element.iconurl)
</div>#end
#end
#if ($element.isEm())</em>#end
#if ($element.isEm())</em>#enddiv>
</td>
</tr>
#set ($i = $i + 1)
#end
</table>
</td>
</tr>
<!-- there needs to be content in the cell for it to render in some clients -->
<tr>
<td class="email-content-rounded-bottom mobile-expand" style="padding: 0px; border-collapse: collapse; color: #fff; padding: 0 15px 0 16px; height: 5px; line-height: 5px; background-color: #fff; border-top: 0; border-left: 1px solid #ccc; border-bottom: 1px solid #ccc; border-right: 1px solid #ccc; border-bottom-right-radius: 5px; border-bottom-left-radius: 5px; mso-line-height-rule: exactly">
</td>
</tr>
</table>
</td>
</tr>
#end
<tr>
<td style="vertical-align: top; padding: 10px 0px 5px 0px;">
#if ($emailfooter) ${emailfooter} #end
</td>
</tr>
</table>
</body>
</html> |