Default Email Templates

[AlexWright]

Ok, so after some comments by my members, we've noticed that our email templates are completely out of whack. It seems that the default templates include a BACKGROUND color on almost every element (Facilitating the need to edit each and every gosh darn template to remove it). For instance, this is download's "New File Version Notification" default template:

{{if $content->author()->member_id}}
{$email->language->addToStack("email_new_file_version", FALSE, array( 'sprintf' => array( $content->author()->url(), $content->author()->name, $content->indefiniteArticle( $email->language ) ) ) )} <a href='{$content->url()}'>{$content->mapped('title')}</a>
{{else}}
{$email->language->addToStack("email_new_file_version_guest", FALSE, array( 'sprintf' => array( $content->author()->name, $content->indefiniteArticle( $email->language ) ) ) )} <a href='{$content->url()}'>{$content->mapped('title')}</a>
{{endif}}

<br />
<br />

<table width='100%' cellpadding='0' cellspacing='0' border='0'>
	<tr>
		<td dir='{dir}' width='40' valign='top' class='hidePhone' style='width: 0; max-height: 0; overflow: hidden; float: left;'>
			<img src='{$content->author()->get_photo( true, true )}' width='40' height='40' style='border: 1px solid #777777; vertical-align: middle;'>
		</td>
		<td dir='{dir}' width='30' valign='top' class='hidePhone' style='width: 0; max-height: 0; overflow: hidden; float: left;'>
			<br />
			<span style='display: block; width: 0px; height: 0px; border-width: 15px; border-color: transparent #f9f9f9 transparent transparent; border-style: solid'></span>
		</td>
		<td dir='{dir}' valign='top' style='background: #f9f9f9;'>
			<table width='100%' cellpadding='10' cellspacing='0' border='0'>
				<tr>
					<td dir='{dir}'>
						<table width='100%' cellpadding='5' cellspacing='0' border='0'>
							<tr>
								<td dir='{dir}' style="font-family: 'Helvetica Neue', helvetica, sans-serif; line-height: 1.5; font-size: 14px; color: #8d8d8d">
									{$email->language->addToStack("email_posted_in", FALSE, array( 'sprintf' => array( $content->container()->_title ) ) )}
								</td>
							</tr>
							<tr>
								<td dir='{dir}' style="font-family: 'Helvetica Neue', helvetica, sans-serif; line-height: 1.5; font-size: 14px;">
									<strong>{$email->language->addToStack("file_changelog", FALSE)}</strong>
								</td>
							</tr>
							<tr>
								<td dir='{dir}' style="font-family: 'Helvetica Neue', helvetica, sans-serif; line-height: 1.5; font-size: 14px;">
									{$email->parseTextForEmail( $content->changelog, $email->language )|raw}
								</td>
							</tr>
							<tr>
								<td dir='{dir}' height='6' style='line-height: 6px'><img src="{setting="base_url"}applications/core/interface/email/spacer.png" alt='' width="1" height="1" /></td>
							</tr>
							<tr>
								<td dir='{dir}' style="font-family: 'Helvetica Neue', helvetica, sans-serif; line-height: 1.5; font-size: 14px;">
									<strong>{$email->language->addToStack("file_desc", FALSE)}</strong>
								</td>
							</tr>
							<tr>
								<td dir='{dir}' style="font-family: 'Helvetica Neue', helvetica, sans-serif; line-height: 1.5; font-size: 14px;">
									{$email->parseTextForEmail( $content->content(), $email->language )|raw}
								</td>
							</tr>
							<tr>
								<td dir='{dir}'>
									<a href='{$content->url()}' style="color: #ffffff; font-family: 'Helvetica Neue', helvetica, sans-serif; text-decoration: none; font-size: 14px; background: {setting="email_color"}; line-height: 32px; padding: 0 10px; display: inline-block; border-radius: 3px;">{$email->language->addToStack("go_to_this_x", FALSE, array( 'sprintf' => array( mb_strtolower( $email->language->addToStack( $content::$title, FALSE ) ) ) ) )}</a>
								</td>
							</tr>
						</table>
					</td>
				</tr>
			</table>
		</td>
	</tr>
</table>
<br /><br />
<em style='color: #8c8c8c'>— {setting="board_name"}</em>

Note this in particular:

<td dir='{dir}' valign='top' style='background: #f9f9f9;'>

 

Except this isn't the only template that has this. Let's look at "Content Comment's Digest" also from Downloads:

<tr style='border-bottom: 1px solid #eeeeee'>
	<td dir='{dir}' width='120' align='center' valign='top'>
		{{if $comment->item()->primary_screenshot_thumb}}
			<img src='{$comment->item()->primary_screenshot_thumb}' style='border: 1px solid #000; vertical-align: middle;' width='100' height='100'>
		{{else}}
			<div style='width: 100px; height: 100px; background: #f5f5f5'> </div>
		{{endif}}
	</td>
	<td dir='{dir}' align='left'>
		<p style='font-family: "Helvetica Neue", helvetica, sans-serif; margin: 0; font-size: 13px; font-weight: bold'>
			{$email->language->addToStack("x_commented_file", FALSE, array( 'sprintf' => array( $comment->author()->name ) ) )}
		</p>
		<h2 style="font-family: 'Helvetica Neue', helvetica, sans-serif; font-size: 15px; font-weight: 500 !important; margin: 0;">
			<a href='{$comment->item()->url()}' style='text-decoration: none;'>{$comment->item()->name}</a>
		</h2>
		<div style='font-family: "Helvetica Neue", helvetica, sans-serif; line-height: 22px; margin-top: 5px; margin-bottom: 5px; border-left: 3px solid #8c8c8c; padding-left: 15px; font-size: 14px; margin-left: 15px'>
			{$email->parseTextForEmail( $comment->content(), $email->language )|raw}
		</div>
	</td>
</tr>

It's on the Div style in there (background: #f5f5f5).

Staff reply in Commerce:

{$email->language->addToStack( $message->item()->replies == 1 ? "staffcreate_header" : "staffreply_header", FALSE, array( 'sprintf' => array( $message->author()->name ) ) )}<br />
<br />

<table width='100%' cellpadding='15' cellspacing='0' border='0' style='background: #f5f5f5'>
	<tr>
		<td dir='{dir}'>
			<h2 style='margin: 0; font-size: 19px; font-weight: 500'>{{if $message->item()->replies > 1}}Re: {{endif}}{$message->item()->title}</h2>
			{$email->parseTextForEmail( $message->content(), $email->language )|raw}
		</td>
	</tr>
</table>
<br />

{{if $message->item()->member}}
	<a href='{$message->item()->url()}' style="color: #ffffff; font-family: 'Helvetica Neue', helvetica, sans-serif; text-decoration: none; font-size: 12px; background: #417ba3; line-height: 32px; padding: 0 10px; display: inline-block; border-radius: 3px;">{$email->language->addToStack("view_support_request", FALSE)}</a>
	<br />
{{endif}}
<br />
<br />
<em style='color: #8c8c8c'>— {setting="board_name"}</em>
<br />
<div style="font-size: 0px; line-height: 0px; color:#ffffff !important;">{$email->language->addToStack("support_reply_email_id", FALSE, array( 'sprintf' => array( '[SR' . $message->item()->id . '.' . $message->item()->email_key . ']' ) ) )}</div>

I think the point is being made. There is no easy way to setup the emails for the entire system to have a consistent look if you're changing quite a lot about the wrapper.

 

There needs to be an easy and consistent way to customize the emails the site sends out. Customers rely on that information being readable and accurate, and admins without a lot of knowledge in how to make Email Template XMLs (like myself) are at a loss here. For instance, when we preview the wrapper:

Everything looks fine with this email. It looks readable and presentable. But when an actual email goes out, and it starts adding DIVs with background colors on them (And the default is close to white, mind you), this creates a lot of problems for us.

[asigno]

+1

And the ability to preview emails from the platform

[AlexWright]

To further show this, here is an email generated by someone making a support request.

[AlexWright]

And even after going through each template, some of them still have these backgrounds (Granted, they're ones I've probably missed. It's difficult to keep track). Would be nice if there was just an editor for these where you can just edit the colors of different areas and have it apply to all email templates.