New email design for our Kunena forum posts
03 Jan 2016 - Written by Anthony Olsen
Posted in Design
In addition to the blog redesign that I just announced, I have also tweaked the email sent from our forum and ticket system. It's been a long while in coming but I am happy to say that the emails you get from the forum and ticket system from now on will be lot easier on the eyes. Check the before and after shots below.
The old email
Ticket System email
Forum email
Markup used
And for those of you who might be interested.
<div style="width: 600px; margin: 40px auto; background: #f5f5f5; border-radius: 2px; font-family: sans-serif; font-weight: 300;">
<div style="background: #7EB83E; color: #fff; padding: 60px 20px 20px; font-weight: 300; border-radius: 2px 2px 0 0;"><img style="width: 300px; margin-top: 20px;" src="http://www.bamboothemes.com/joomlabamboo-logo-white.png" alt="joomlabamboo" width="300px" /></div>
<div style="background: #f5f5f5; padding: 30px;">
<h3 style="margin: 0px;">Hello {customer_name}</h3>
<p style="font-size: 1.4em; line-height: 1.8em;">Thank you for contacting us. One of our staff members will attend to your ticket as soon as possible.</p>
<div style="line-height: 100%;"><a style="color: #fff; text-decoration: none; background: #7EB83E; margin: 0 auto; width: 150px; display: block; text-align: center; padding: 10px; border-radius: 2px; margin-top: 60px;" href="{ticket}">View Topic</a></div>
<div style="color: #999; font-size: 90%; margin-top: 60px;">Do not answer this e-mail notification as it is a generated e-mail.</div>
<div style="color: #999; font-size: 100%; margin-top: 20px;"><a style="text-decoration: none; color: #333;">Update your profile</a> <a style="text-decoration: none; float: right; color: #333;" href="http://www.twitter.com/joomlabamboo">Twitter</a> <a style="text-decoration: none; float: right; color: #333; margin-right: 30px;" href="http://www.facebook.com/joomlabamboo">Facebook</a></div>
</div>
</div>
blog comments powered by Disqus