Automation Email and HTML/CSS Formatting Issues
Hello,
I'm setting up an automation to send a email notification to a group when an specific issue type is created but I'm having issues with the email formatting with HTML/CSS. Only some of the CSS is actually working and other parts aren't.
Specifically the stylizing for the div, img, and hr tags.
Below is my HTML in the Send Email action.
<html>
<head>
<style type="text/css">
.container{
margin: auto;
width: 60%;
padding: 10px;
font-family: Arial;
}
a {
text-decoration: none;
}
img {
height: 35px;
float: right;
}
</style>
</head>
<body>
<div class="container">
<p>{{issue.reporter.displayName}} <strong>created an issue</strong>.</p>
<hr style="border:1px solid red">
<p style="color:grey;">{{project.name}} / <a href="{{issue.url}}" style="color:grey;">{{issue.key}}</a></p>
<h2><a href="{{issue.url}}" style="color: #1963d1;">{{issue.summary}}</a></h2>
<p>
<strong>Description:</strong> {{issue.description}}
<br>
<br>
<strong>Issue Type:</strong> {{issue.issuetype.name}}
<br>
<br>
<strong>Priority:</strong> {{issue.priority.name}}
<br>
<br>
<strong>Created:</strong> {{issue.created.longDateTime}}
<br>
<br>
<strong>Reporter:</strong> {{issue.reporter.displayName}}
</p>
<hr style="border: 1px solid red">
<p style="color:grey;">Powered by Jira <img src="SOME-IMAGE-URL"></p>
</div>
</body>
</html>
According to W3Schools Try It page the result should look like the screenshot below.
But the email I receive looks like...
1 answer
1 accepted
@Nick Maday Thanks!
I got swamped with work and completely forgot to check back on this and post my updates. I completely missed your recommendation which I will definitely be putting in place.
You might have found a way to stylize it better than what I came up with by now but I did want to share what I ended up using.
Below is the HTML/CSS that I used. Some of the tags are Microsoft Office tags that help render the HTML in Outlook for desktop.
<html>
<head>
<style type="text/css">
table {border-collapse: collapse; margin-left: auto; margin-right: auto; padding: 10px 0px 10px 0px; font-family: Arial;}
p {padding: 5px 0px 5px 0px}
img {height: 35px; float: right;}
</style>
</head>
<body>
<table style="width: 50%;" align="center">
<tr style="mso-yfti-irow:1">
<td style="border:none;border-bottom:solid #e6412d 1.5pt;padding:0in 0in 9.0pt 0in">
<p style="padding:0px;">{{issue.reporter.displayName}} <strong>created an issue</strong>.</p>
</td>
</tr>
<tr>
<td>
<p style="color:#808080;">{{project.name}} / <a href="{{issue.url}}" style="color: #808080;text-decoration: none;"><font color="#808080">{{issue.key}}</font></a></p>
</td>
</tr>
<tr>
<td>
<h2><a href="{{issue.url}}" style="color: #1963d1; text-decoration: none;">{{issue.summary}}</a></h2>
</td>
</tr>
<tr>
<td>
<p><strong>Description</strong>
<br>{{issue.description.html}}</p>
</td>
</tr>
<tr>
<td>
<p><strong>Issue Type:</strong> {{issue.issuetype.name}}</p>
</td>
</tr>
<tr>
<td>
<p><strong>Priority:</strong> {{issue.priority.name}}</p>
</td>
</tr>
<tr>
<td>
<p><strong>Created:</strong> {{issue.created.fullDate}}</p>
</td>
</tr>
<tr style="mso-yfti-irow:1">
<td style="border:none;border-bottom:solid #e6412d 1.5pt;">
<p><strong>Reporter:</strong> {{issue.reporter.displayName}}</p>
</td>
</tr>
<tr>
<td>
<p style="color:#808080;"><font color="#808080">Powered by Jira</font> <img src="https://i.imgur.com/adyIoNX.png" align="right"></p>
</td>
</tr>
</table>
</body>
</html>
Here's the preview using the W3S site.
Below is a screenshot of my tests.
Our logo in our signature is a bit weird so it renders pretty large but for everything else it seem to do the trick.
https://www.w3schools.com/html/tryit.asp?filename=tryhtml_editor
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.