Merge branch 'revamped-email-templates' into develop

src/emailer.js

@@ -25,10 +25,17 @@ var fallbackTransport;
 
 var Emailer = module.exports;
 
+Emailer._defaultPayload = {};
 
 Emailer.registerApp = function (expressApp) {
 	app = expressApp;
 
+	Emailer._defaultPayload = {
+		url: nconf.get('url'),
+		site_title: meta.config.title || 'NodeBB',
+		'brand:logo': nconf.get('url') + meta.config['brand:logo'],
+	};
+
 	// Enable Gmail transport if enabled in ACP
 	if (parseInt(meta.config['email:GmailTransport:enabled'], 10) === 1) {
 		transports.gmail = nodemailer.createTransport(smtpTransport({
@@ -55,6 +62,9 @@ Emailer.send = function (template, uid, params, callback) {
 		return callback();
 	}
 
+	// Combined passed-in payload with default values
+	params = Object.assign({}, Emailer._defaultPayload, params);
+
 	async.waterfall([
 		function (next) {
 			async.parallel({

src/messaging/notifications.js

@@ -124,8 +124,6 @@ module.exports = function (Messaging) {
 						subject: '[[email:notif.chat.subject, ' + messageObj.fromUser.username + ']]',
 						summary: '[[notifications:new_message_from, ' + messageObj.fromUser.username + ']]',
 						message: messageObj,
-						site_title: meta.config.title || 'NodeBB',
-						url: nconf.get('url'),
 						roomId: messageObj.roomId,
 						username: userData.username,
 						userslug: userData.userslug,

src/socket.io/admin.js

@@ -228,8 +228,6 @@ SocketAdmin.email.test = function (socket, data, callback) {
 	var site_title = meta.config.title || 'NodeBB';
 	var payload = {
 		subject: '[' + site_title + '] Test Email',
-		site_title: site_title,
-		url: nconf.get('url'),
 	};
 
 	switch (data.template) {

src/socket.io/user.js

@@ -128,7 +128,6 @@ SocketUser.reset.commit = function (socket, data, callback) {
 			emailer.send('reset_notify', uid, {
 				username: username,
 				date: parsedDate,
-				site_title: meta.config.title || 'NodeBB',
 				subject: '[[email:reset.notify.subject]]',
 			});
 

src/socket.io/user/ban.js

@@ -107,7 +107,6 @@ module.exports = function (SocketUser) {
 				var siteTitle = meta.config.title || 'NodeBB';
 				var data = {
 					subject: '[[email:banned.subject, ' + siteTitle + ']]',
-					site_title: siteTitle,
 					username: username,
 					until: until ? utils.toISOString(until) : false,
 					reason: reason,

src/topics/follow.js

@@ -259,13 +259,10 @@ module.exports = function (Topics) {
 								subject: '[' + (meta.config.title || 'NodeBB') + '] ' + title,
 								intro: '[[notifications:user_posted_to, ' + postData.user.username + ', ' + titleEscaped + ']]',
 								postBody: postData.content.replace(/"\/\//g, '"https://'),
-								site_title: meta.config.title || 'NodeBB',
 								username: data.userData.username,
 								userslug: data.userData.userslug,
-								url: nconf.get('url') + '/topic/' + postData.topic.tid,
 								topicSlug: postData.topic.slug,
-								postCount: postData.topic.postcount,
-								base_url: nconf.get('url'),
+								showUnsubscribe: true,
 							}, next);
 						} else {
 							winston.debug('[topics.notifyFollowers] uid ' + toUid + ' does not have post notifications enabled, skipping.');

src/user/approval.js

@@ -89,7 +89,6 @@ module.exports = function (User) {
 				var title = meta.config.title || meta.config.browserTitle || 'NodeBB';
 				translator.translate('[[email:welcome-to, ' + title + ']]', meta.config.defaultLang, function (subject) {
 					var data = {
-						site_title: title,
 						username: username,
 						subject: subject,
 						template: 'registration_accepted',

src/user/digest.js

@@ -136,8 +136,6 @@ Digest.send = function (data, callback) {
 							subject: '[' + meta.config.title + '] [[email:digest.subject, ' + (now.getFullYear() + '/' + (now.getMonth() + 1) + '/' + now.getDate()) + ']]',
 							username: userObj.username,
 							userslug: userObj.userslug,
-							url: nconf.get('url'),
-							site_title: meta.config.title || meta.config.browserTitle || 'NodeBB',
 							notifications: notifications,
 							recent: data.topics,
 							interval: data.interval,

src/user/email.js

@@ -102,7 +102,6 @@ UserEmail.sendValidationEmail = function (uid, options, callback) {
 			var title = meta.config.title || meta.config.browserTitle || 'NodeBB';
 			translator.translate('[[email:welcome-to, ' + title + ']]', meta.config.defaultLang, function (subject) {
 				var data = {
-					site_title: title,
 					username: username,
 					confirm_link: confirm_link,
 					confirm_code: confirm_code,

src/user/invite.js

@@ -85,6 +85,9 @@ module.exports = function (User) {
 						template: 'invitation',
 					};
 
+					// Append default data to this email payload
+					data = Object.assign({}, emailer._defaultPayload, data);
+
 					emailer.sendToEmail('invitation', email, meta.config.defaultLang, data, next);
 				});
 			},

src/user/reset.js

@@ -85,7 +85,6 @@ UserReset.send = function (email, callback) {
 		function (subject, code, next) {
 			var reset_link = nconf.get('url') + '/reset/' + code;
 			emailer.send('reset', uid, {
-				site_title: (meta.config.title || 'NodeBB'),
 				reset_link: reset_link,
 				subject: subject,
 				template: 'reset',

src/views/emails/banned.tpl

@@ -1,18 +1,53 @@
-<p>
-	[[email:banned.text1, {username}, {site_title}]]
-	<!-- IF until -->
-	[[email:banned.text2, {until}]]
-	<!-- ENDIF until -->
-</p>
+<!-- IMPORT emails/partials/header.tpl -->
 
-<!-- IF reason -->
-<p>
-	[[email:banned.text3]]
-</p>
+<!-- Email Body : BEGIN -->
+<table role="presentation" cellspacing="0" cellpadding="0" border="0" align="center" width="100%" style="max-width: 600px;">
 
-<p>
-	{reason}
-</p>
-<!-- ENDIF reason -->
+	<!-- Hero Image, Flush : BEGIN -->
+	<tr>
+		<td bgcolor="#efeff0" style="text-align: center; background-image: url({url}/assets/images/emails/triangularbackground.png); background-size: cover; background-repeat: no-repeat;">
+			<img src="{url}/assets/images/emails/banneduser.png" width="300" height="300" border="0" align="center" style="width: 300px; height: 300px; max-width: 300px; height: auto; font-family: sans-serif; font-size: 15px; line-height: 20px; color: #555555;" class="g-img">
+		</td>
+	</tr>
+	<!-- Hero Image, Flush : END -->
 
-<!-- IMPORT emails/partials/footer.tpl -->
+	<!-- 1 Column Text + Button : BEGIN -->
+	<tr>
+		<td bgcolor="#efeff0">
+			<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
+				<tr>
+					<td style="padding: 40px; font-family: sans-serif; font-size: 15px; line-height: 20px; color: #555555;">
+						<h1 style="margin: 0 0 10px 0; font-family: sans-serif; font-size: 24px; line-height: 27px; color: #333333; font-weight: normal;">[[email:greeting_with_name, {username}]]</h1>
+						<p style="margin: 0;">
+							[[email:banned.text1, {username}, {site_title}]]
+							<!-- IF until -->
+							<br><br>[[email:banned.text2, {until}]]
+							<!-- ENDIF until -->
+						</p>
+					</td>
+				</tr>
+				<!-- IF reason -->
+				<tr>
+					<td style="padding: 40px; font-family: sans-serif; font-size: 15px; line-height: 20px; color: #555555;">
+						<p style="margin: 0;">
+							[[email:banned.text3]]
+							<br><br>{reason}
+						</p>
+					</td>
+				</tr>
+				<!-- ENDIF reason -->
+				<tr>
+					<td style="padding: 40px; font-family: sans-serif; font-size: 15px; line-height: 20px; color: #555555;">
+						<h2 style="margin: 0 0 10px 0; font-family: sans-serif; font-size: 18px; line-height: 21px; color: #333333; font-weight: bold;">[[email:closing]]</h2>
+						<p style="margin: 0;">{site_title}</p>
+					</td>
+				</tr>
+			</table>
+		</td>
+	</tr>
+	<!-- 1 Column Text + Button : END -->
+
+</table>
+<!-- Email Body : END -->
+
+<!-- IMPORT emails/partials/footer.tpl -->

src/views/emails/digest.tpl

@@ -1,50 +1,93 @@
-<p>[[email:greeting_with_name, {username}]],</p>
+<!-- IMPORT emails/partials/header.tpl -->
 
-<!-- IF notifications.length -->
-<p>[[email:digest.notifications, {site_title}]]</p>
+<!-- Email Body : BEGIN -->
+<table role="presentation" cellspacing="0" cellpadding="0" border="0" align="center" width="100%" style="max-width: 600px;">
 
-<ul>
-	<!-- BEGIN notifications -->
-	<li style="text-decoration: none; list-style-type: none; padding-bottom: 0.5em;">
-		<a href="{url}{notifications.path}">
-			<!-- IF notifications.image -->
-			<img style="vertical-align: middle; width: 16px; height: 16px; padding-right: 1em;" src="{notifications.image}" />
-			<!-- ELSE -->
-			<div style="width: 16px; height: 16px; line-height: 16px; font-size: 10px; margin-right: 1em; background-color: {notifications.user.icon:bgColor}; color: white; text-align: center; display: inline-block;">{notifications.user.icon:text}</div>
-			<!-- ENDIF notifications.image -->
-			{notifications.bodyShort}
-		</a>
-	</li>
-	<!-- END notifications -->
-</ul>
+	<!-- Hero Image, Flush : BEGIN -->
+	<tr>
+		<td bgcolor="#efeff0" style="text-align: center; background-image: url({url}/assets/images/emails/triangularbackground.png); background-size: cover; background-repeat: no-repeat;">
+			<img src="{url}/assets/images/emails/digestheader.png" width="600" height="243" border="0" align="center" style="width: 600px; height: 243px; max-height: 300px; height: auto; font-family: sans-serif; font-size: 15px; line-height: 20px; color: #555555;" class="g-img">
+		</td>
+	</tr>
+	<!-- Hero Image, Flush : END -->
 
-<hr />
-<!-- ENDIF notifications.length -->
+	<!-- 1 Column Text + Button : BEGIN -->
+	<tr>
+		<td bgcolor="#efeff0">
+			<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
+				<tr>
+					<td style="padding: 40px; font-family: sans-serif; font-size: 15px; line-height: 20px; color: #555555;">
+						<h1 style="margin: 0 0 10px 0; font-family: sans-serif; font-size: 24px; line-height: 27px; color: #333333; font-weight: normal;">[[email:greeting_with_name, {username}]],</h1>
+					</td>
+				</tr>
+				<!-- IF notifications.length -->
+				<tr>
+					<td style="padding: 40px; font-family: sans-serif; font-size: 15px; line-height: 20px; color: #555555;">
+						<p style="margin: 0;">[[email:digest.notifications, {site_title}]]</p>
+						<ul>
+							<!-- BEGIN notifications -->
+							<li style="text-decoration: none; list-style-type: none; padding-bottom: 0.5em;">
+								<a href="{url}{notifications.path}">
+									<!-- IF notifications.image -->
+									<img style="vertical-align: middle; width: 16px; height: 16px; padding-right: 1em;" src="{notifications.image}" />
+									<!-- ELSE -->
+									<div style="width: 16px; height: 16px; line-height: 16px; font-size: 10px; margin-right: 1em; background-color: {notifications.user.icon:bgColor}; color: white; text-align: center; display: inline-block;">{notifications.user.icon:text}</div>
+									<!-- ENDIF notifications.image -->
+									{notifications.bodyShort}
+								</a>
+							</li>
+							<!-- END notifications -->
+						</ul>
+					</td>
+				</tr>
+				<!-- ENDIF notifications.length -->
+				<tr>
+					<td style="padding: 40px; font-family: sans-serif; font-size: 15px; line-height: 20px; color: #555555;">
+						<p style="margin: 0;">[[email:digest.latest_topics, {site_title}]]</p>
+						<ul>
+							<!-- IF recent.length -->
+							<!-- BEGIN recent -->
+							<li style="text-decoration: none; list-style-type: none; padding-bottom: 0.5em;">
+								<a href="{url}/topic/{recent.slug}">
+									{function.renderDigestAvatar}{recent.title}
+								</a>
+							</li>
+							<!-- END recent -->
+							<!-- ELSE -->
+							<li style="text-decoration: none; list-style-type: none; padding-bottom: 0.5em; font-style: italic;">
+								[[email:digest.no_topics, [[email:digest.{interval}]]]]
+							</li>
+							<!-- ENDIF recent.length -->
+						</ul>
+					</td>
+				</tr>
+				<tr>
+					<td style="padding: 0 40px; font-family: sans-serif; font-size: 15px; line-height: 20px; color: #555555;">
+						<!-- Button : BEGIN -->
+						<table role="presentation" cellspacing="0" cellpadding="0" border="0" align="center" style="margin: auto;">
+							<tr>
+								<td style="border-radius: 3px; background: #222222; text-align: center;" class="button-td">
+									<a href="{url}" style="background: #222222; border: 15px solid #222222; font-family: sans-serif; font-size: 13px; line-height: 1.1; text-align: center; text-decoration: none; display: block; border-radius: 3px; font-weight: bold;" class="button-a">
+										<span style="color:#ffffff;" class="button-link">&nbsp;&nbsp;&nbsp;&nbsp;[[email:digest.cta, {site_title}]]&nbsp;&nbsp;&nbsp;&nbsp;</span>
+									</a>
+								</td>
+							</tr>
+						</table>
+						<!-- Button : END -->
+					</td>
+				</tr>
+				<tr>
+					<td style="padding: 40px; font-family: sans-serif; font-size: 15px; line-height: 20px; color: #555555;">
+						<h2 style="margin: 0 0 10px 0; font-family: sans-serif; font-size: 18px; line-height: 21px; color: #333333; font-weight: bold;">[[email:closing]]</h2>
+						<p style="margin: 0;">{site_title}</p>
+					</td>
+				</tr>
+			</table>
+		</td>
+	</tr>
+	<!-- 1 Column Text + Button : END -->
 
-<p>[[email:digest.latest_topics, {site_title}]]</p>
-<ul>
-	<!-- IF recent.length -->
-	<!-- BEGIN recent -->
-	<li style="text-decoration: none; list-style-type: none; padding-bottom: 0.5em;">
-		<a href="{url}/topic/{recent.slug}">
-			{function.renderDigestAvatar}{recent.title}
-		</a>
-	</li>
-	<!-- END recent -->
-	<!-- ELSE -->
-	<li style="text-decoration: none; list-style-type: none; padding-bottom: 0.5em; font-style: italic;">
-		[[email:digest.no_topics, [[email:digest.{interval}]]]]
-	</li>
-	<!-- ENDIF recent.length -->
-</ul>
-
-<p>
-	<a href="{url}">[[email:digest.cta, {site_title}]]</a>
-</p>
+</table>
+<!-- Email Body : END -->
 
 <!-- IMPORT emails/partials/footer.tpl -->
-
-<hr />
-<p>
-	[[email:digest.unsub.info]] <a href="{url}/user/{userslug}/settings">[[email:unsub.cta]]</a>.
-</p>

src/views/emails/invitation.tpl

@@ -1,11 +1,53 @@
-<p>[[email:greeting_no_name]],</p>
+<!-- IMPORT emails/partials/header.tpl -->
 
-<p>
-	<strong>[[email:invitation.text1, {username}, {site_title}]]</strong>
-</p>
+<!-- Email Body : BEGIN -->
+<table role="presentation" cellspacing="0" cellpadding="0" border="0" align="center" width="100%" style="max-width: 600px;">
 
-<blockquote>
-	<a href="{registerLink}">[[email:invitation.ctr]]</a>
-</blockquote>
+	<!-- Hero Image, Flush : BEGIN -->
+	<tr>
+		<td bgcolor="#efeff0" style="text-align: center; background-image: url({url}/assets/images/emails/triangularbackground.png); background-size: cover; background-repeat: no-repeat;">
+			<img src="{url}/assets/images/emails/invitation.png" width="300" height="300" border="0" align="center" style="width: 300px; height: 300px; max-width: 300px; height: auto; font-family: sans-serif; font-size: 15px; line-height: 20px; color: #555555;" class="g-img">
+		</td>
+	</tr>
+	<!-- Hero Image, Flush : END -->
 
-<!-- IMPORT emails/partials/footer.tpl -->
+	<!-- 1 Column Text + Button : BEGIN -->
+	<tr>
+		<td bgcolor="#efeff0">
+			<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
+				<tr>
+					<td style="padding: 40px; font-family: sans-serif; font-size: 15px; line-height: 20px; color: #555555;">
+						<h1 style="margin: 0 0 10px 0; font-family: sans-serif; font-size: 24px; line-height: 27px; color: #333333; font-weight: normal;">[[email:greeting_no_name]]</h1>
+						<p style="margin: 0;">[[email:invitation.text1, {username}, {site_title}]]</p>
+					</td>
+				</tr>
+				<tr>
+					<td style="padding: 0 40px; font-family: sans-serif; font-size: 15px; line-height: 20px; color: #555555;">
+						<!-- Button : BEGIN -->
+						<table role="presentation" cellspacing="0" cellpadding="0" border="0" align="center" style="margin: auto;">
+							<tr>
+								<td style="border-radius: 3px; background: #222222; text-align: center;" class="button-td">
+									<a href="{registerLink}" style="background: #222222; border: 15px solid #222222; font-family: sans-serif; font-size: 13px; line-height: 1.1; text-align: center; text-decoration: none; display: block; border-radius: 3px; font-weight: bold;" class="button-a">
+										<span style="color:#ffffff;" class="button-link">&nbsp;&nbsp;&nbsp;&nbsp;[[email:invitation.ctr]]&nbsp;&nbsp;&nbsp;&nbsp;</span>
+									</a>
+								</td>
+							</tr>
+						</table>
+						<!-- Button : END -->
+					</td>
+				</tr>
+				<tr>
+					<td style="padding: 40px; font-family: sans-serif; font-size: 15px; line-height: 20px; color: #555555;">
+						<h2 style="margin: 0 0 10px 0; font-family: sans-serif; font-size: 18px; line-height: 21px; color: #333333; font-weight: bold;">[[email:closing]]</h2>
+						<p style="margin: 0;">{site_title}</p>
+					</td>
+				</tr>
+			</table>
+		</td>
+	</tr>
+	<!-- 1 Column Text + Button : END -->
+
+</table>
+<!-- Email Body : END -->
+
+<!-- IMPORT emails/partials/footer.tpl -->

src/views/emails/notif_chat.tpl

@@ -1,13 +1,58 @@
-<p>[[email:greeting_with_name, {username}]],</p>
+<!-- IMPORT emails/partials/header.tpl -->
 
-<p>{summary}:</p>
-<blockquote>{message.content}</blockquote>
+<!-- Email Body : BEGIN -->
+<table role="presentation" cellspacing="0" cellpadding="0" border="0" align="center" width="100%" style="max-width: 600px;">
 
-<a href="{url}/chats/{roomId}">[[email:notif.chat.cta]]</a>
+	<!-- Hero Image, Flush : BEGIN -->
+	<tr>
+		<td bgcolor="#efeff0" style="text-align: center; background-image: url({url}/assets/images/emails/triangularbackground.png); background-size: cover; background-repeat: no-repeat;">
+			<img src="{url}/assets/images/emails/newtopic.png" width="300" height="300" border="0" align="center" style="width: 300px; height: 300px; max-width: 300px; height: auto; font-family: sans-serif; font-size: 15px; line-height: 20px; color: #555555;" class="g-img">
+		</td>
+	</tr>
+	<!-- Hero Image, Flush : END -->
 
-<!-- IMPORT emails/partials/footer.tpl -->
+	<!-- 1 Column Text + Button : BEGIN -->
+	<tr>
+		<td bgcolor="#efeff0">
+			<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
+				<tr>
+					<td style="padding: 40px 40px 0px 40px; font-family: sans-serif; font-size: 15px; line-height: 20px; color: #555555;">
+						<h1 style="margin: 0 0 10px 0; font-family: sans-serif; font-size: 24px; line-height: 27px; color: #333333; font-weight: normal;">[[email:greeting_with_name, {username}]],</h1>
+						<p style="margin: 0 0 20px 0;">{summary}:</p>
+					</td>
+				</tr>
+				<tr>
+					<td style="padding: 0px 60px 40px 60px; font-family: sans-serif; font-size: 15px; line-height: 20px; color: #555555;">
+						{message.content}
+					</td>
+				</tr>
+				<tr>
+					<td style="padding: 0 40px; font-family: sans-serif; font-size: 15px; line-height: 20px; color: #555555;">
+						<!-- Button : BEGIN -->
+						<table role="presentation" cellspacing="0" cellpadding="0" border="0" align="center" style="margin: auto;">
+							<tr>
+								<td style="border-radius: 3px; background: #222222; text-align: center;" class="button-td">
+									<a href="{url}/chats/{roomId}" style="background: #222222; border: 15px solid #222222; font-family: sans-serif; font-size: 13px; line-height: 1.1; text-align: center; text-decoration: none; display: block; border-radius: 3px; font-weight: bold;" class="button-a">
+										<span style="color:#ffffff;" class="button-link">&nbsp;&nbsp;&nbsp;&nbsp;[[email:notif.chat.cta]]&nbsp;&nbsp;&nbsp;&nbsp;</span>
+									</a>
+								</td>
+							</tr>
+						</table>
+						<!-- Button : END -->
+					</td>
+				</tr>
+				<tr>
+					<td style="padding: 40px; font-family: sans-serif; font-size: 15px; line-height: 20px; color: #555555;">
+						<h2 style="margin: 0 0 10px 0; font-family: sans-serif; font-size: 18px; line-height: 21px; color: #333333; font-weight: bold;">[[email:closing]]</h2>
+						<p style="margin: 0;">{site_title}</p>
+					</td>
+				</tr>
+			</table>
+		</td>
+	</tr>
+	<!-- 1 Column Text + Button : END -->
+
+</table>
+<!-- Email Body : END -->
 
-<hr />
-<p>
-	[[email:notif.chat.unsub.info]] <a href="{url}/user/{userslug}/settings">[[email:unsub.cta]]</a>.
-</p>
+<!-- IMPORT emails/partials/footer.tpl -->

src/views/emails/notif_post.tpl

@@ -1,13 +1,57 @@
-<p>[[email:greeting_with_name, {username}]],</p>
+<!-- IMPORT emails/partials/header.tpl -->
 
-<p>{intro}:</p>
-<blockquote>{postBody}</blockquote>
+<!-- Email Body : BEGIN -->
+<table role="presentation" cellspacing="0" cellpadding="0" border="0" align="center" width="100%" style="max-width: 600px;">
 
-<a href="{url}">[[email:notif.post.cta]]</a>
+	<!-- Hero Image, Flush : BEGIN -->
+	<tr>
+		<td bgcolor="#efeff0" style="text-align: center; background-image: url({url}/assets/images/emails/triangularbackground.png); background-size: cover; background-repeat: no-repeat;">
+			<img src="{url}/assets/images/emails/unreadpost.png" width="300" height="300" border="0" align="center" style="width: 300px; height: 300px; max-width: 300px; height: auto; font-family: sans-serif; font-size: 15px; line-height: 20px; color: #555555;" class="g-img">
+		</td>
+	</tr>
+	<!-- Hero Image, Flush : END -->
 
-<!-- IMPORT emails/partials/footer.tpl -->
+	<!-- 1 Column Text + Button : BEGIN -->
+	<tr>
+		<td bgcolor="#efeff0">
+			<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
+				<tr>
+					<td style="padding: 40px 40px 0px 40px; font-family: sans-serif; font-size: 15px; line-height: 20px; color: #555555;">
+						<p style="margin: 0 0 20px 0;">{intro}</p>
+					</td>
+				</tr>
+				<tr>
+					<td style="padding: 0px 60px 40px 60px; font-family: sans-serif; font-size: 15px; line-height: 20px; color: #555555;">
+						{postBody}
+					</td>
+				</tr>
+				<tr>
+					<td style="padding: 0 40px; font-family: sans-serif; font-size: 15px; line-height: 20px; color: #555555;">
+						<!-- Button : BEGIN -->
+						<table role="presentation" cellspacing="0" cellpadding="0" border="0" align="center" style="margin: auto;">
+							<tr>
+								<td style="border-radius: 3px; background: #222222; text-align: center;" class="button-td">
+									<a href="{url}{topicSlug}" style="background: #222222; border: 15px solid #222222; font-family: sans-serif; font-size: 13px; line-height: 1.1; text-align: center; text-decoration: none; display: block; border-radius: 3px; font-weight: bold;" class="button-a">
+										<span style="color:#ffffff;" class="button-link">&nbsp;&nbsp;&nbsp;&nbsp;[[email:notif.post.cta]]&nbsp;&nbsp;&nbsp;&nbsp;</span>
+									</a>
+								</td>
+							</tr>
+						</table>
+						<!-- Button : END -->
+					</td>
+				</tr>
+				<tr>
+					<td style="padding: 40px; font-family: sans-serif; font-size: 15px; line-height: 20px; color: #555555;">
+						<h2 style="margin: 0 0 10px 0; font-family: sans-serif; font-size: 18px; line-height: 21px; color: #333333; font-weight: bold;">[[email:closing]]</h2>
+						<p style="margin: 0;">{site_title}</p>
+					</td>
+				</tr>
+			</table>
+		</td>
+	</tr>
+	<!-- 1 Column Text + Button : END -->
+
+</table>
+<!-- Email Body : END -->
 
-<hr />
-<p>
-	[[email:notif.post.unsub.info]] <a href="{base_url}/user/{userslug}/settings">[[email:unsub.cta]]</a>.
-</p>
+<!-- IMPORT emails/partials/footer.tpl -->

src/views/emails/partials/footer.tpl

@@ -1,4 +1,25 @@
-<p>
-	[[email:closing]]<br />
-	<strong>{site_title}</strong>
-</p>
+			<!-- Email Footer : BEGIN -->
+			<table role="presentation" cellspacing="0" cellpadding="0" border="0" align="center" width="100%" style="max-width: 680px;">
+				<tr>
+					<td style="padding: 40px 10px;width: 100%;font-size: 12px; font-family: sans-serif; line-height:18px; text-align: center; color: #888888;">
+						<br><br>
+						<!-- IF showUnsubscribe -->
+						[[email:notif.post.unsub.info]] <a href="{url}/user/{userslug}/settings">[[email:unsub.cta]]</a>.
+						<!-- ENDIF showUnsubscribe -->
+						<br><br>
+					</td>
+				</tr>
+			</table>
+			<!-- Email Footer : END -->
+
+			<!--[if mso]>
+			</td>
+			</tr>
+			</table>
+			<![endif]-->
+		</div>
+
+    </center>
+</body>
+
+</html>

src/views/emails/partials/header.tpl

@@ -0,0 +1,179 @@
+<!DOCTYPE html>
+<html lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
+<head>
+    <meta charset="utf-8"> <!-- utf-8 works for most cases -->
+    <meta name="viewport" content="width=device-width"> <!-- Forcing initial-scale shouldn't be necessary -->
+    <meta http-equiv="X-UA-Compatible" content="IE=edge"> <!-- Use the latest (edge) version of IE rendering engine -->
+    <meta name="x-apple-disable-message-reformatting">  <!-- Disable auto-scale in iOS 10 Mail entirely -->
+    <title></title> <!-- The title tag shows in email notifications, like Android 4.4. -->
+
+    <!-- Web Font / @font-face : BEGIN -->
+	<!-- NOTE: If web fonts are not required, lines 10 - 27 can be safely removed. -->
+
+    <!-- Desktop Outlook chokes on web font references and defaults to Times New Roman, so we force a safe fallback font. -->
+    <!--[if mso]>
+        <style>
+            * {
+                font-family: sans-serif !important;
+            }
+        </style>
+    <![endif]-->
+
+    <!-- All other clients get the webfont reference; some will render the font and others will silently fail to the fallbacks. More on that here: http://stylecampaign.com/blog/2015/02/webfont-support-in-email/ -->
+    <!--[if !mso]><!-->
+        <!-- insert web font reference, eg: <link href='https://fonts.googleapis.com/css?family=Roboto:400,700' rel='stylesheet' type='text/css'> -->
+    <!--<![endif]-->
+
+    <!-- Web Font / @font-face : END -->
+
+	<!-- CSS Reset -->
+    <style>
+
+        /* What it does: Remove spaces around the email design added by some email clients. */
+        /* Beware: It can remove the padding / margin and add a background color to the compose a reply window. */
+        html,
+        body {
+            margin: 0 auto !important;
+            padding: 0 !important;
+            height: 100% !important;
+            width: 100% !important;
+        }
+
+        /* What it does: Stops email clients resizing small text. */
+        * {
+            -ms-text-size-adjust: 100%;
+            -webkit-text-size-adjust: 100%;
+        }
+
+        /* What it does: Centers email on Android 4.4 */
+        div[style*="margin: 16px 0"] {
+            margin:0 !important;
+        }
+
+        /* What it does: Stops Outlook from adding extra spacing to tables. */
+        table,
+        td {
+            mso-table-lspace: 0pt !important;
+            mso-table-rspace: 0pt !important;
+        }
+
+        /* What it does: Fixes webkit padding issue. Fix for Yahoo mail table alignment bug. Applies table-layout to the first 2 tables then removes for anything nested deeper. */
+        table {
+            border-spacing: 0 !important;
+            border-collapse: collapse !important;
+            table-layout: fixed !important;
+            margin: 0 auto !important;
+        }
+        table table table {
+            table-layout: auto;
+        }
+
+        /* What it does: Uses a better rendering method when resizing images in IE. */
+        img {
+            -ms-interpolation-mode:bicubic;
+        }
+
+        /* What it does: A work-around for email clients meddling in triggered links. */
+        *[x-apple-data-detectors],	/* iOS */
+        .x-gmail-data-detectors, 	/* Gmail */
+        .x-gmail-data-detectors *,
+        .aBn {
+            border-bottom: 0 !important;
+            cursor: default !important;
+            color: inherit !important;
+            text-decoration: none !important;
+            font-size: inherit !important;
+            font-family: inherit !important;
+            font-weight: inherit !important;
+            line-height: inherit !important;
+        }
+
+        /* What it does: Prevents Gmail from displaying an download button on large, non-linked images. */
+        .a6S {
+	        display: none !important;
+	        opacity: 0.01 !important;
+        }
+        /* If the above doesn't work, add a .g-img class to any image in question. */
+        img.g-img + div {
+	        display:none !important;
+	   	}
+
+        /* What it does: Prevents underlining the button text in Windows 10 */
+        .button-link {
+            text-decoration: none !important;
+        }
+
+        /* What it does: Removes right gutter in Gmail iOS app: https://github.com/TedGoas/Cerberus/issues/89  */
+        /* Create one of these media queries for each additional viewport size you'd like to fix */
+        /* Thanks to Eric Lepetit (@ericlepetitsf) for help troubleshooting */
+        @media only screen and (min-device-width: 375px) and (max-device-width: 413px) { /* iPhone 6 and 6+ */
+            .email-container {
+                min-width: 375px !important;
+            }
+        }
+
+    </style>
+
+    <!-- Progressive Enhancements -->
+    <style>
+
+        /* What it does: Hover styles for buttons */
+        .button-td,
+        .button-a {
+            transition: all 100ms ease-in;
+        }
+        .button-td:hover,
+        .button-a:hover {
+            background: #555555 !important;
+            border-color: #555555 !important;
+        }
+
+        /* Media Queries */
+        @media screen and (max-width: 600px) {
+
+            /* What it does: Adjust typography on small screens to improve readability */
+			.email-container p {
+				font-size: 17px !important;
+				line-height: 22px !important;
+			}
+
+		}
+
+	</style>
+
+	<!-- What it does: Makes background images in 72ppi Outlook render at correct size. -->
+	<!--[if gte mso 9]>
+	<xml>
+		<o:OfficeDocumentSettings>
+			<o:AllowPNG/>
+			<o:PixelsPerInch>96</o:PixelsPerInch>
+		</o:OfficeDocumentSettings>
+	</xml>
+	<![endif]-->
+
+</head>
+
+<body width="100%" bgcolor="#222222" style="margin: 0; mso-line-height-rule: exactly;">
+	<center style="width: 100%; background: #222222; text-align: left;">
+
+		<!--
+			Set the email width. Defined in two places:
+			1. max-width for all clients except Desktop Windows Outlook, allowing the email to squish on narrow but never go wider than 600px.
+			2. MSO tags for Desktop Windows Outlook enforce a 600px width.
+		-->
+		<div style="max-width: 600px; margin: auto;" class="email-container">
+			<!--[if mso]>
+			<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="600" align="center">
+			<tr>
+			<td>
+			<![endif]-->
+
+			<!-- Email Header : BEGIN -->
+			<table role="presentation" cellspacing="0" cellpadding="0" border="0" align="center" width="100%" style="max-width: 600px;">
+				<tr>
+					<td style="padding: 20px 0; text-align: center">
+						<img src="{url}/assets/images/emails/nodebb.png" height="49" width="192" alt="{site_title}" border="0" style="height: 49px; width: 192px; background: #222222; font-family: sans-serif; font-size: 15px; line-height: 20px; color: #555555;">
+					</td>
+				</tr>
+			</table>
+			<!-- Email Header : END -->

src/views/emails/registration_accepted.tpl

@@ -1,9 +1,39 @@
-<p>[[email:greeting_with_name, {username}]],</p>
+<!-- IMPORT emails/partials/header.tpl -->
 
-<p>
-	<strong>[[email:welcome.text1, {site_title}]]</strong>
-</p>
+<!-- Email Body : BEGIN -->
+<table role="presentation" cellspacing="0" cellpadding="0" border="0" align="center" width="100%" style="max-width: 600px;">
 
-<p>[[email:welcome.text3]]</p>
+	<!-- Hero Image, Flush : BEGIN -->
+	<tr>
+		<td bgcolor="#efeff0" style="text-align: center; background-image: url({url}/assets/images/emails/triangularbackground.png); background-size: cover; background-repeat: no-repeat;">
+			<img src="{url}/assets/images/emails/invitation.png" width="300" height="300" border="0" align="center" style="width: 300px; height: 300px; max-width: 300px; height: auto; font-family: sans-serif; font-size: 15px; line-height: 20px; color: #555555;" class="g-img">
+		</td>
+	</tr>
+	<!-- Hero Image, Flush : END -->
 
-<!-- IMPORT emails/partials/footer.tpl -->
+	<!-- 1 Column Text + Button : BEGIN -->
+	<tr>
+		<td bgcolor="#efeff0">
+			<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
+				<tr>
+					<td style="padding: 40px; font-family: sans-serif; font-size: 15px; line-height: 20px; color: #555555;">
+						<h1 style="margin: 0 0 10px 0; font-family: sans-serif; font-size: 24px; line-height: 27px; color: #333333; font-weight: normal;">[[email:greeting_with_name, {username}]],</h1>
+						<p style="margin: 0;">[[email:welcome.text1, {site_title}]]</p>
+						<p style="margin: 0;">[[email:welcome.text3]]</p>
+					</td>
+				</tr>
+				<tr>
+					<td style="padding: 40px; font-family: sans-serif; font-size: 15px; line-height: 20px; color: #555555;">
+						<h2 style="margin: 0 0 10px 0; font-family: sans-serif; font-size: 18px; line-height: 21px; color: #333333; font-weight: bold;">[[email:closing]]</h2>
+						<p style="margin: 0;">{site_title}</p>
+					</td>
+				</tr>
+			</table>
+		</td>
+	</tr>
+	<!-- 1 Column Text + Button : END -->
+
+</table>
+<!-- Email Body : END -->
+
+<!-- IMPORT emails/partials/footer.tpl -->

src/views/emails/reset.tpl

@@ -1,11 +1,54 @@
-<p>[[email:greeting_no_name]],</p>
+<!-- IMPORT emails/partials/header.tpl -->
 
-<p>[[email:reset.text1]]</p>
+<!-- Email Body : BEGIN -->
+<table role="presentation" cellspacing="0" cellpadding="0" border="0" align="center" width="100%" style="max-width: 600px;">
 
-<p>[[email:reset.text2]]</p>
+	<!-- Hero Image, Flush : BEGIN -->
+	<tr>
+		<td bgcolor="#efeff0" style="text-align: center; background-image: url({url}/assets/images/emails/triangularbackground.png); background-size: cover; background-repeat: no-repeat;">
+			<img src="{url}/assets/images/emails/emailconfirm.png" width="300" height="300" border="0" align="center" style="width: 300px; height: 300px; max-width: 300px; height: auto; font-family: sans-serif; font-size: 15px; line-height: 20px; color: #555555;" class="g-img">
+		</td>
+	</tr>
+	<!-- Hero Image, Flush : END -->
 
-<blockquote>
-	<a href="{reset_link}">[[email:reset.cta]]</a>
-</blockquote>
+	<!-- 1 Column Text + Button : BEGIN -->
+	<tr>
+		<td bgcolor="#efeff0">
+			<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
+				<tr>
+					<td style="padding: 40px; font-family: sans-serif; font-size: 15px; line-height: 20px; color: #555555;">
+						<h1 style="margin: 0 0 10px 0; font-family: sans-serif; font-size: 24px; line-height: 27px; color: #333333; font-weight: normal;">[[email:greeting_no_name]],</h1>
+						<p style="margin: 0;">[[email:reset.text1]]</p>
+						<p style="margin: 0;">[[email:reset.text2]]</p>
+					</td>
+				</tr>
+				<tr>
+					<td style="padding: 0 40px; font-family: sans-serif; font-size: 15px; line-height: 20px; color: #555555;">
+						<!-- Button : BEGIN -->
+						<table role="presentation" cellspacing="0" cellpadding="0" border="0" align="center" style="margin: auto;">
+							<tr>
+								<td style="border-radius: 3px; background: #222222; text-align: center;" class="button-td">
+									<a href="{reset_link}" style="background: #222222; border: 15px solid #222222; font-family: sans-serif; font-size: 13px; line-height: 1.1; text-align: center; text-decoration: none; display: block; border-radius: 3px; font-weight: bold;" class="button-a">
+										<span style="color:#ffffff;" class="button-link">&nbsp;&nbsp;&nbsp;&nbsp;[[email:reset.cta]]&nbsp;&nbsp;&nbsp;&nbsp;</span>
+									</a>
+								</td>
+							</tr>
+						</table>
+						<!-- Button : END -->
+					</td>
+				</tr>
+				<tr>
+					<td style="padding: 40px; font-family: sans-serif; font-size: 15px; line-height: 20px; color: #555555;">
+						<h2 style="margin: 0 0 10px 0; font-family: sans-serif; font-size: 18px; line-height: 21px; color: #333333; font-weight: bold;">[[email:closing]]</h2>
+						<p style="margin: 0;">{site_title}</p>
+					</td>
+				</tr>
+			</table>
+		</td>
+	</tr>
+	<!-- 1 Column Text + Button : END -->
 
-<!-- IMPORT emails/partials/footer.tpl -->
+</table>
+<!-- Email Body : END -->
+
+<!-- IMPORT emails/partials/footer.tpl -->

src/views/emails/reset_notify.tpl

@@ -1,7 +1,39 @@
-<p>[[email:greeting_with_name, {username}]],</p>
+<!-- IMPORT emails/partials/header.tpl -->
 
-<p>[[email:reset.notify.text1, {date}]]</p>
+<!-- Email Body : BEGIN -->
+<table role="presentation" cellspacing="0" cellpadding="0" border="0" align="center" width="100%" style="max-width: 600px;">
 
-<p>[[email:reset.notify.text2]]</p>
+	<!-- Hero Image, Flush : BEGIN -->
+	<tr>
+		<td bgcolor="#efeff0" style="text-align: center; background-image: url({url}/assets/images/emails/triangularbackground.png); background-size: cover; background-repeat: no-repeat;">
+			<img src="{url}/assets/images/emails/emailconfirm.png" width="300" height="300" border="0" align="center" style="width: 300px; height: 300px; max-width: 300px; height: auto; font-family: sans-serif; font-size: 15px; line-height: 20px; color: #555555;" class="g-img">
+		</td>
+	</tr>
+	<!-- Hero Image, Flush : END -->
 
-<!-- IMPORT emails/partials/footer.tpl -->
+	<!-- 1 Column Text : BEGIN -->
+	<tr>
+		<td bgcolor="#efeff0">
+			<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
+				<tr>
+					<td style="padding: 40px; font-family: sans-serif; font-size: 15px; line-height: 20px; color: #555555;">
+						<h1 style="margin: 0 0 10px 0; font-family: sans-serif; font-size: 24px; line-height: 27px; color: #333333; font-weight: normal;">[[email:greeting_with_name, {username}]],</h1>
+						<p style="margin: 0;">[[email:reset.notify.text1, {date}]]</p>
+						<p style="margin: 0;">[[email:reset.notify.text2]]</p>
+					</td>
+				</tr>
+				<tr>
+					<td style="padding: 40px; font-family: sans-serif; font-size: 15px; line-height: 20px; color: #555555;">
+						<h2 style="margin: 0 0 10px 0; font-family: sans-serif; font-size: 18px; line-height: 21px; color: #333333; font-weight: bold;">[[email:closing]]</h2>
+						<p style="margin: 0;">{site_title}</p>
+					</td>
+				</tr>
+			</table>
+		</td>
+	</tr>
+	<!-- 1 Column Text : END -->
+
+</table>
+<!-- Email Body : END -->
+
+<!-- IMPORT emails/partials/footer.tpl -->

src/views/emails/test.tpl

@@ -1,5 +1,38 @@
-<p>[[email:greeting_no_name]],</p>
+<!-- IMPORT emails/partials/header.tpl -->
 
-<p>[[email:test.text1]]</p>
+<!-- Email Body : BEGIN -->
+<table role="presentation" cellspacing="0" cellpadding="0" border="0" align="center" width="100%" style="max-width: 600px;">
 
-<!-- IMPORT emails/partials/footer.tpl -->
+	<!-- Hero Image, Flush : BEGIN -->
+	<tr>
+		<td bgcolor="#efeff0" style="text-align: center; background-image: url({url}/assets/images/emails/triangularbackground.png); background-size: cover; background-repeat: no-repeat;">
+			<img src="{url}/assets/images/emails/emailconfirm.png" width="300" height="300" border="0" align="center" style="width: 300px; height: 300px; max-width: 300px; height: auto; font-family: sans-serif; font-size: 15px; line-height: 20px; color: #555555;" class="g-img">
+		</td>
+	</tr>
+	<!-- Hero Image, Flush : END -->
+
+	<!-- 1 Column Text : BEGIN -->
+	<tr>
+		<td bgcolor="#efeff0">
+			<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
+				<tr>
+					<td style="padding: 40px; font-family: sans-serif; font-size: 15px; line-height: 20px; color: #555555;">
+						<h1 style="margin: 0 0 10px 0; font-family: sans-serif; font-size: 24px; line-height: 27px; color: #333333; font-weight: normal;">[[email:greeting_no_name]],</h1>
+						<p style="margin: 0;">[[email:test.text1]]</p>
+					</td>
+				</tr>
+				<tr>
+					<td style="padding: 40px; font-family: sans-serif; font-size: 15px; line-height: 20px; color: #555555;">
+						<h2 style="margin: 0 0 10px 0; font-family: sans-serif; font-size: 18px; line-height: 21px; color: #333333; font-weight: bold;">[[email:closing]]</h2>
+						<p style="margin: 0;">{site_title}</p>
+					</td>
+				</tr>
+			</table>
+		</td>
+	</tr>
+	<!-- 1 Column Text : END -->
+
+</table>
+<!-- Email Body : END -->
+
+<!-- IMPORT emails/partials/footer.tpl -->

src/views/emails/welcome.tpl

@@ -1,13 +1,53 @@
-<p>[[email:greeting_with_name, {username}]],</p>
+<!-- IMPORT emails/partials/header.tpl -->
 
-<p>
-	<strong>[[email:welcome.text1, {site_title}]]</strong>
-</p>
+<!-- Email Body : BEGIN -->
+<table role="presentation" cellspacing="0" cellpadding="0" border="0" align="center" width="100%" style="max-width: 600px;">
 
-<p>[[email:welcome.text2]]</p>
+	<!-- Hero Image, Flush : BEGIN -->
+	<tr>
+		<td bgcolor="#efeff0" style="text-align: center; background-image: url({url}/assets/images/emails/triangularbackground.png); background-size: cover; background-repeat: no-repeat;">
+			<img src="{url}/assets/images/emails/emailconfirm.png" width="300" height="300" border="0" align="center" style="width: 300px; height: 300px; max-width: 300px; height: auto; font-family: sans-serif; font-size: 15px; line-height: 20px; color: #555555;" class="g-img">
+		</td>
+	</tr>
+	<!-- Hero Image, Flush : END -->
 
-<blockquote>
-	<a href="{confirm_link}">[[email:welcome.cta]]</a>
-</blockquote>
+	<!-- 1 Column Text + Button : BEGIN -->
+	<tr>
+		<td bgcolor="#efeff0">
+			<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
+				<tr>
+					<td style="padding: 40px; font-family: sans-serif; font-size: 15px; line-height: 20px; color: #555555;">
+						<h1 style="margin: 0 0 10px 0; font-family: sans-serif; font-size: 24px; line-height: 27px; color: #333333; font-weight: normal;">[[email:welcome.text1, {site_title}]]</h1>
+						<p style="margin: 0;">[[email:welcome.text2]]</p>
+					</td>
+				</tr>
+				<tr>
+					<td style="padding: 0 40px; font-family: sans-serif; font-size: 15px; line-height: 20px; color: #555555;">
+						<!-- Button : BEGIN -->
+						<table role="presentation" cellspacing="0" cellpadding="0" border="0" align="center" style="margin: auto;">
+							<tr>
+								<td style="border-radius: 3px; background: #222222; text-align: center;" class="button-td">
+									<a href="{confirm_link}" style="background: #222222; border: 15px solid #222222; font-family: sans-serif; font-size: 13px; line-height: 1.1; text-align: center; text-decoration: none; display: block; border-radius: 3px; font-weight: bold;" class="button-a">
+										<span style="color:#ffffff;" class="button-link">&nbsp;&nbsp;&nbsp;&nbsp;[[email:welcome.cta]]&nbsp;&nbsp;&nbsp;&nbsp;</span>
+									</a>
+								</td>
+							</tr>
+						</table>
+						<!-- Button : END -->
+					</td>
+				</tr>
+				<tr>
+					<td style="padding: 40px; font-family: sans-serif; font-size: 15px; line-height: 20px; color: #555555;">
+						<h2 style="margin: 0 0 10px 0; font-family: sans-serif; font-size: 18px; line-height: 21px; color: #333333; font-weight: bold;">[[email:closing]]</h2>
+						<p style="margin: 0;">{site_title}</p>
+					</td>
+				</tr>
+			</table>
+		</td>
+	</tr>
+	<!-- 1 Column Text + Button : END -->
 
-<!-- IMPORT emails/partials/footer.tpl -->
+</table>
+<!-- Email Body : END -->
+
+<!-- IMPORT emails/partials/footer.tpl -->