Skip to content

Instantly share code, notes, and snippets.

@messutied
Last active Aug 11, 2022
Embed
What would you like to do?
Statuspal status page email templates

Statuspal Status Page Email Template Customization HTML

Use this HTML files to customize your Statuspal status page email template in order to include a company logo, add your business address or otherwise to modify the looks to suit your branding.

Screenshot 2022-07-19 at 12 37 13

Configure your logo

In order to configure your company logo just replace the image under the .header class.

<div class="header">
  <img src="https://placeholder.com/wp-content/uploads/2018/10/placeholder.com-logo1.png" alt="Company logo" class="logo">
 </div>

Configure your company address

Simply override the generic address found in status-notification-email-template.html and confirmation-email-template.html:

<!-- Company Address Information -->
<tr class="aligncenter content-block">
  <td>YourCompany Inc, 26985 Brighton Lane, Lake Forest, CA, United States</td>
</tr>
<!-- Company Address Information -->

Find more information at our help portal.

<html>
<head>
<meta name="viewport" content="width=device-width" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style>
/* -------------------------------------
GLOBAL
A very basic CSS reset
------------------------------------- */
* {
margin: 0;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
box-sizing: border-box;
font-size: 14px;
}
img {
max-width: 100%;
}
body {
-webkit-font-smoothing: antialiased;
-webkit-text-size-adjust: none;
width: 100% !important;
height: 100%;
line-height: 1.6em;
/* 1.6em * 14px = 22.4px, use px to get airier line-height also in Thunderbird, and Yahoo!, Outlook.com, AOL webmail clients */
/*line-height: 22px;*/
}
/* Let's make sure all tables have defaults */
table td {
vertical-align: top;
}
/* -------------------------------------
BODY & CONTAINER
------------------------------------- */
body {
background-color: #f6f6f6;
}
.body-wrap {
background-color: #f6f6f6;
width: 100%;
}
.container {
display: block !important;
max-width: 600px !important;
margin: 0 auto !important;
/* makes it centered */
clear: both !important;
}
.content {
max-width: 600px;
margin: 0 auto;
display: block;
padding: 20px;
}
/* -------------------------------------
HEADER, FOOTER, MAIN
------------------------------------- */
.main {
background-color: #fff;
border: 1px solid #e9e9e9;
border-radius: 3px;
}
.content-wrap {
padding: 20px;
}
.content-block {
/* padding: 0 0 20px; */
}
.header {
width: 100%;
padding-top: 20px;
text-align: center;
}
.logo {
max-width: 300px;
}
.footer {
width: 100%;
clear: both;
color: #999;
padding: 20px;
}
.footer p, .footer a, .footer td {
color: #999;
font-size: 12px;
}
/* -------------------------------------
TYPOGRAPHY
------------------------------------- */
h1, h2, h3 {
font-family: "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
color: #000;
margin: 40px 0 0;
line-height: 1.2em;
font-weight: 400;
}
h1 {
font-size: 32px;
font-weight: 500;
/* 1.2em * 32px = 38.4px, use px to get airier line-height also in Thunderbird, and Yahoo!, Outlook.com, AOL webmail clients */
/*line-height: 38px;*/
}
h2 {
font-size: 24px;
/* 1.2em * 24px = 28.8px, use px to get airier line-height also in Thunderbird, and Yahoo!, Outlook.com, AOL webmail clients */
/*line-height: 29px;*/
}
h3 {
font-size: 18px;
/* 1.2em * 18px = 21.6px, use px to get airier line-height also in Thunderbird, and Yahoo!, Outlook.com, AOL webmail clients */
/*line-height: 22px;*/
}
h4 {
font-size: 14px;
font-weight: 600;
}
p, ul, ol {
margin-bottom: 10px;
font-weight: normal;
}
p li, ul li, ol li {
margin-left: 5px;
list-style-position: inside;
}
/* -------------------------------------
LINKS & BUTTONS
------------------------------------- */
a {
color: #348eda;
text-decoration: underline;
}
.btn-primary {
text-decoration: none;
color: #FFF;
background-color: #348eda;
border: solid #348eda;
border-width: 10px 20px;
line-height: 2em;
/* 2em * 14px = 28px, use px to get airier line-height also in Thunderbird, and Yahoo!, Outlook.com, AOL webmail clients */
/*line-height: 28px;*/
font-weight: bold;
text-align: center;
cursor: pointer;
display: inline-block;
border-radius: 5px;
text-transform: capitalize;
}
/* -------------------------------------
OTHER STYLES THAT MIGHT BE USEFUL
------------------------------------- */
.last {
margin-bottom: 0;
}
.first {
margin-top: 0;
}
.aligncenter {
text-align: center;
}
.alignright {
text-align: right;
}
.alignleft {
text-align: left;
}
.clear {
clear: both;
}
/* -------------------------------------
ALERTS
Change the class depending on warning email, good email or bad email
------------------------------------- */
.alert {
font-size: 16px;
color: #fff;
font-weight: 500;
padding: 20px;
text-align: center;
border-radius: 3px 3px 0 0;
}
.alert a {
color: #fff;
text-decoration: none;
font-weight: 500;
font-size: 16px;
}
.alert.alert-warning {
background-color: #FF9F00;
}
.alert.alert-bad {
background-color: #D0021B;
}
.alert.alert-good {
background-color: #68B90F;
}
.alert.alert-ok {
background-color: #2f81ff;
}
/* -------------------------------------
SERVICES
------------------------------------- */
.services span.service{
display: inline-block;
white-space: nowrap;
border: 1px solid rgb(0, 132, 255);
padding: 1px 3px;
margin-bottom: 5px;
border-radius: 3px;
}
/* -------------------------------------
RESPONSIVE AND MOBILE FRIENDLY STYLES
------------------------------------- */
@media only screen and (max-width: 640px) {
body {
padding: 0 !important;
}
h1, h2, h3, h4 {
font-weight: 800 !important;
margin: 20px 0 5px !important;
}
h1 {
font-size: 22px !important;
}
h2 {
font-size: 18px !important;
}
h3 {
font-size: 16px !important;
}
.container {
padding: 0 !important;
width: 100% !important;
}
.content {
padding: 0 !important;
}
.content-wrap {
padding: 10px !important;
}
}
/*# sourceMappingURL=styles.css.map */
</style>
</head>
<body itemscope itemtype="http://schema.org/EmailMessage">
{{ content }}
</body>
</html>
<table class="body-wrap">
<tr>
<td></td>
<td class="container" width="600">
<div class="content">
<div class="header">
<img src="https://placeholder.com/wp-content/uploads/2018/10/placeholder.com-logo1.png" alt="Company logo" class="logo">
</div>
<table class="main" width="100%" cellpadding="0" cellspacing="0" itemprop="action" itemscope itemtype="http://schema.org/ConfirmAction">
<tr>
<td class="content-wrap">
<meta itemprop="name" content="Confirm Email"/>
<table width="100%" cellpadding="0" cellspacing="0">
<tr>
<td class="content-block">
<p>
{{ t_body_confirm_p }}.
</p>
<p>
<a href="{{ subscription.do_confirm_url }}" class="btn-primary" itemprop="url">
{{ t_body_confirm_p_action }}
</a>
</p>
</td>
</tr>
</table>
</td>
</tr>
</table>
<div class="footer">
<table width="100%">
<tr>
<td class="aligncenter content-block">
<a href="{{ unsubscribe_url }}">{{ t_body_unsubscribe_p_action }}</a>
{{ t_body_unsubscribe_p }}
</td>
</tr>
<!-- Company Address Information -->
<tr class="aligncenter content-block">
<td>YourCompany Inc, 26985 Brighton Lane, Lake Forest, CA, United States</td>
</tr>
<!-- Company Address Information -->
</table>
</div>
</div>
</td>
<td></td>
</tr>
</table>
<table class="body-wrap">
<tr>
<td></td>
<td class="container" width="600">
<div class="header">
<img src="https://placeholder.com/wp-content/uploads/2018/10/placeholder.com-logo1.png" alt="Company logo" class="logo">
</div>
<div class="content">
<table class="main" width="100%" cellpadding="0" cellspacing="0">
<tr>
<td class="alert alert-{{ incident.type_color_class }}">
{{ status_page.name }} {{ incident.type_name }}
{{ t_update }}: {{ incident.title }}
</td>
</tr>
<tr>
<td class="content-wrap">
<table width="100%" cellpadding="0" cellspacing="0">
<tr>
<td class="content-block">
{{ maintenance_information }}
<p>
{{ t_affected_services }}:
{{ services }}
</p>
<br>
<p>
<b>
[{{ activity.activity_type_name }}]
</b>
{{ activity.description }}
</p>
<br>
<a href="{{ incident.url }}" class="btn-primary" itemprop="url">
{{ t_open_report }}
</a>
</td>
</tr>
</table>
</td>
</tr>
</table>
<div class="footer">
<table width="100%">
<tr>
<td class="aligncenter content-block">
<a href="{{ subscription.manage_url }}">{{ t_manage_subscription }}</a>
</td>
</tr>
<!-- Company Address Information -->
<tr class="aligncenter content-block">
<td>YourCompany Inc, 26985 Brighton Lane, Lake Forest, CA, United States</td>
</tr>
<!-- Company Address Information -->
</table>
</div>
</div>
</td>
<td></td>
</tr>
</table>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment