2 answers
I go to Customer notifications then Click on See Example Templates
Then > Get started with this sample customer notification by copying the sample CSS code
I Copy the HTML and CSS from the example site. It shows in the Preview.
I insert the image in a reply on a ticket and below is how it comes through
I know this is most likely a HTML/CSS issue but I can't spot it, if it is then it means the example that Atlassian links to are potentially wrong.
HTML
<!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="./index.css" />
<title>Static Template</title>
</head>
<body>
<div class="jsd-reply-marker-hint">
Reply above this line.
</div>
<div class="template">
<div class="center">
<div class="header"></div>
<div class="jsd-message-content">
${message.content}
</div>
<div>
<div class="container">
<a href="${request.url}" class="button">View request</a>
</div>
</div>
</div>
<div class="footer">
<p class="jsd-request-sharedwith">
This is shared with ${request.sharedwith}.
</p>
<p>
<a
class="jsd-unsubscribe-link"
href="${request.disable.notifications.url}"
>Turn off this request's notifications</a
>
</p>
<p>
<a class="jsd-servicedesk-link" href="${atlassian.url}"
>Powered by Jira Service Management</a
>
</p>
</div>
</div>
</body>
</html>
CSS
body {
background: #fafbfc;
color: #091e42;
font-family: "Arial", sans-serif;
font-size: 16px;
line-height: 1.4;
}
a {
color: #0052cc;
text-decoration: none;
}
img {
width: 20%;
}
.template {
background: #ffffff;
margin: auto;
width: 550px;
border: 3px;
padding-bottom: 30px;
border-radius: 4px;
}
.center {
padding-bottom: 30px;
}
.container {
text-align: center;
}
.header {
display: flex;
flex-direction: row;
justify-content: center;
align-items: flex-start;
gap: 8px;
height: 176px;
background: url("https://nimbus.atlassian.net/images/header.png");
justify-content: center;
background-size: contain;
}
.button {
background: #172b4d;
color: white;
padding: 10px 15px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
}
.jsd-message-content {
margin-bottom: 30px;
margin-top: 10px;
width: 80%;
margin-left: auto;
margin-right: auto;
}
.jsd-issue-link {
color: #0052cc;
text-decoration: none;
}
.jsd-unsubscribe-link {
color: #0747a6;
font-size: 12px;
text-decoration: underline;
}
.jsd-link-separator {
padding: 0 10px;
}
.jsd-request-sharedwith {
color: #758195;
font-size: 12px;
}
.jsd-servicedesk-link {
color: #707070;
font-size: 12px;
text-decoration: none;
}
/* Applied to reply stripping marker, when incoming email is enabled. */
.jsd-reply-marker {
color: #999999;
}
.jsd-reply-marker-hint {
color: #999999;
margin-bottom: 30px;
font-size: 14px;
}
.jsd-activity-item-separator {
border: none;
border-bottom: 1px solid #cccccc;
}
.footer {
border-top: 1px solid #b3b9c4;
margin: auto;
width: 60%;
padding: 10px;
text-align: center;
}
I go to Customer Notifications, Edit Templates the 'See Example Templates'
I follow the guide and go to the site they suggest for the example HTML/CSS, I copy this directly into my Customer notification HTML and CSS
Below we can see the Preview is applied
I go to ym project where I have to nice pictures of a horse, one is a small image and one is a large. Both appear as stretched in the email
HTML
<!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="./index.css" />
<title>Static Template</title>
</head>
<body>
<div class="jsd-reply-marker-hint">
Reply above this line.
</div>
<div class="template">
<div class="center">
<div class="header"></div>
<div class="jsd-message-content">
${message.content}
</div>
<div>
<div class="container">
<a href="${request.url}" class="button">View request</a>
</div>
</div>
</div>
<div class="footer">
<p class="jsd-request-sharedwith">
This is shared with ${request.sharedwith}.
</p>
<p>
<a
class="jsd-unsubscribe-link"
href="${request.disable.notifications.url}"
>Turn off this request's notifications</a
>
</p>
<p>
<a class="jsd-servicedesk-link" href="${atlassian.url}"
>Powered by Jira Service Management</a
>
</p>
</div>
</div>
</body>
</html>
CSS
body {
background: #fafbfc;
color: #091e42;
font-family: "Arial", sans-serif;
font-size: 16px;
line-height: 1.4;
}
a {
color: #0052cc;
text-decoration: none;
}
img {
width: 20%;
}
.template {
background: #ffffff;
margin: auto;
width: 550px;
border: 3px;
padding-bottom: 30px;
border-radius: 4px;
}
.center {
padding-bottom: 30px;
}
.container {
text-align: center;
}
.header {
display: flex;
flex-direction: row;
justify-content: center;
align-items: flex-start;
gap: 8px;
height: 176px;
background: url("https://nimbus.atlassian.net/images/header.png");
justify-content: center;
background-size: contain;
}
.button {
background: #172b4d;
color: white;
padding: 10px 15px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
}
.jsd-message-content {
margin-bottom: 30px;
margin-top: 10px;
width: 80%;
margin-left: auto;
margin-right: auto;
}
.jsd-issue-link {
color: #0052cc;
text-decoration: none;
}
.jsd-unsubscribe-link {
color: #0747a6;
font-size: 12px;
text-decoration: underline;
}
.jsd-link-separator {
padding: 0 10px;
}
.jsd-request-sharedwith {
color: #758195;
font-size: 12px;
}
.jsd-servicedesk-link {
color: #707070;
font-size: 12px;
text-decoration: none;
}
/* Applied to reply stripping marker, when incoming email is enabled. */
.jsd-reply-marker {
color: #999999;
}
.jsd-reply-marker-hint {
color: #999999;
margin-bottom: 30px;
font-size: 14px;
}
.jsd-activity-item-separator {
border: none;
border-bottom: 1px solid #cccccc;
}
.footer {
border-top: 1px solid #b3b9c4;
margin: auto;
width: 60%;
padding: 10px;
text-align: center;
}
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.