This tutorial will guide you through the steps to create a new email template in Magento. Specifically, you’ll create the email that your visitors will receive when they sign up for your newsletter.

Requirements

• Access to your website’s Magento admin panel
• A little knowledge of how HTML emails work
• This tutorial

Step One: Create the Template

I said you need to know a little about how to create an HTML email, but since Magento comes with many templates you can kind of get away without the knowledge at first.

• Log into your admin panel and navigate to System > Transactional Emails.
• Click the ‘Add New Template’ button on the top right.
• Choose one of the default templates from the first drop down box.

In this tutorial we’ll be using the ‘Newsletter subscription confirmation’ template. This would typically be the first email your visitors would receive so I figured it would be a good choice. Choose the locale of course, then click the ‘Load Template’ button.

This will load the appropriate template which in this example is located in the /app/code/locale/en_US/template/email/ directory. The filename is ‘account_new_confirmation.html’. As you can see, it is very easy to alter the templates for international support. You can leave most of the template as they have presented it. I’ve changed the email addresses, the phone number, the store name and the source URL for the logo.

Back in the admin panel, give your template a name. To keep things simple, I’ve used ‘Newsletter Subscription Confirmation’ for the name and the subject. Now here’s where you can modify the template to suit your specific needs. One of the key features of Magento is the ability to have multiple stores within one installation. Therefore you can load the same template in the first half of this step, then modify it for each store in the second half.

Click the ‘Save Template’ button on the top right and you’ll see your new template in the list of Transactional Emails. Now lets move on to implementing it into your site.

Step Two: Using Your Template

From the top horizontal menu, navigate to System > Configuration.

Scroll down to the Customers section on the left menu and select Newsletter.

In the drop down box for Confirmation Email Template, choose the new template you just created. The option just above it should be set to Customer Support. Click the ‘Save Config’ button on the top right and you’re done.

Step Three: Testing Your Template

Now navigate to the public version of your site to the Newsletter box.

Type in your email and click ‘Subscribe’. Sync your email client and you should see a new email from ‘[Site Name] – Customer Support’ with the subject of ‘Newsletter subscription confirmation’.

Check all the text, make sure the logo shows up and the email addresses and phone number is correct. Make any changes back in the admin at System > Transactional Emails (second image in step one).

Conclusion

Magento Commerce, the open source ecommerce solution, can be very intimidating to those of us coming from Wordpress. Its configuration options are very intricate, allowing you to customize designs, layouts and almost every other piece of the site on a per-page basis. Hopefully I’ve shared some useful knowledge on how to create a new email template in Magento.

Make sure you test your emails extensively. They are acting as your host/hostess, concierge and valet. You want them to be as professional as possible. No typos, easily readable text, and please, be sure to quadruple check your email address and phone number.

A key nugget to remember about HTML emails is you have to put your CSS styling inline. You can’t reference an external CSS file or even have it in the HEAD. All HTML emails are contained within the BODY tag. Also, don’t even try using DIVs for your layout. Go old school. Bring out the TABLE tag and party like its 1999. Just look at the example templates they have to get a feel of what is or isn’t acceptable. If there’s enough interest, I’ll write a post on my experience with HTML emails.

I will be adding more quick tutorials like this for Magento as I wade through their user guide and forum. Please feel free to comment or ask a question in the form below.

The goal is to get rid of the generic-looking display of each article’s date. The visitor to most sites would want to know when the article is written to see how relevant the ideas, data or techniques are. A bold display of the date lets the user quickly scan and find the publish date.

Step One: The Image

For quickness, you can download the png file I’m using here, download the full source file at Graphic River, or build your own. Just make note of the dimensions since we’ll be using it as a background image.

You can use most anything as a date icon. Common metaphors include a calendar like I’m using or the piece of paper that Web Designer Wall uses.

Step Two: The WordPress Code

We have to create a few new elements to house the date code. This will take the place of the stock date implementation so we can put or own spin on the look and feel. The following is how I’ve done it here at Mesmer Lab. I’ve modified the code in the Main Index Template (index.php).

<?php if(have_posts()) : while(have_posts()) : the_post(); ?>

<div class="post">

<p class="date">
     <?php the_time('M'); ?>
     <span><?php the_time('d'); ?></span>
</p>

{your post code goes here}

</div>

<?php endwhile ?>

I’ve created a DIV with the ‘post’ class inside the loop. There’s a tiny bit of CSS applied to this div and I’ll explain it in a few minutes.

I’ve used a paragraph element for the main container. The paragraph seemed to work better than a typical DIV, in regards to ease of modification and cross-browser compatibility. This is where I put the month for the article.

The span element works perfectly inside the paragraph tag, simply because I added the ‘display:block’ designation. It seemed to play along better instead of a DIV. The numerical date (with leading zero) resides here.

Step Three: The WordPress CSS

.post {
position:relative;
}

The wrapping DIV is set to position relatively. This allows absolute positioning inside for the paragraph element. If you don’t do this, all the dates on the home page will be on top of each other. Don’t just copy and paste this code into your theme files. If you’re not using my specific image, your results will not look right.

.date {
background:transparent url('your-image.png');
position:absolute;
left:-80px;
top:8px;
color:#fff;
width:56px;
height:61px;
padding:14px 0 0 18px;
font:bold 12px Arial;
}

Next you’ll need to link the image to the paragraph and position it absolutely inside the div.post element. The padding and width/height are tied together in the box model. You’ll have to adjust the width and height depending on how much padding you need for the text to show up properly. Typical font styling is present.

.date span {
display:block;
width:100%;
text-align:center;
margin-left:-7px;
margin-top:1px;
line-height:26px;
color:#000;
font: italic bold 24px Georgia,"Times New Roman",Times,serif;
}

To push the numerical date on a second line, I’ve employed ‘display:block’. Span by nature displays its contents inline. The margin code is for simple positioning. The line-height is so IE will display the whole number. And we round it out with typical font styling.

Step Four: Adding to Single Posts

The next step is relatively easy. Open the Single Post (single.php) file and repeat the code you used in Step Two. This goes in the same place, so it should be easy for you to find.

Conclusion

Customization will make your Wordpress site unique. You can add a sense of branding by efficient use of colors, icons or other visual elements. By adding a custom date graphic to your Wordpress site, you are on your way to standing out in the crowd.

I hope you enjoyed this tutorial. Comments, suggestions and how you’ve implemented this on your site are welcome.

You’ll create two images, throw a little CSS code in the mix, and end up with a very flexible system that will grow with almost anything you throw at it. You can use the already present colors to help your lists tie in with the design. I’ve used this on a project and the client really liked how it turned out. So continue reading and I’ll guide you step by step on how to add this customization to your toolbelt. Your clients will love you for it.

View the demo.

Step One: Create Two Images

Open up your image editor of choice and create a new file 16px wide by 100px tall, or however tall you think a single list item will be in your situation.

You can get a little creative with it, but I drew a simple 1px line. Setting the background transparent will keep your images future-proof if you ever want to change the background color of the site.

So you will end up with two images, one relatively tall with the horizontal bar at the top and another relatively square with the horizontal part ending where it meets the vertical.

Step Two: Write the CSS Code

Now open up your code editor of choice. I’ve used Dreamweaver forever, but I’m starting to use Notepad++ more often.

Clear All Inherent Styling

The first part of the CSS code is extremely important because Internet Explorer still has the majority of the browser share. It is good practice to have a reset file like this one. If you’re not going to use a reset.css file, you must clear the layout of your list.

ul {margin:0;padding:0;}

Create The Menu Container

This is optional, in case you already have a home for your menu. But all subsequent code assumes that the ’submenu’ class is applied to your list’s parent.

.submenu {
	width: 200px;
	border: 1px solid #555;
	font: normal bold 12px Verdana, Arial, sans-serif;
	padding:10px;
	color: #3877C4;
	}

UL Code

This code will format the unordered list. Add a little top and bottom padding for spacing. The left padding offsets the list from the header text.

.submenu ul {
	padding:10px 0 10px 20px;
	}

LI Code

The first line puts in a little breathing room if/when your text expands into multiple lines. Setting the ‘list-style-type’ to none gets rid of the stock icon. To end up, we apply a little bottom padding for visual goodness.

.submenu li {
	line-height:15px;
	list-style-type:none;
	padding:0 0 8px 0;
	}

Second Tier UL Code

We are now into the second level of the menu. A little top padding pushes this UL down from its LI parent. The left padding indents the UL and can be modified to your taste.

.submenu li ul {
	padding: 5px 0 0 18px;
	}

Second Tier LI Code

Now we’re into the good stuff. Most of your second tier list items will use this piece of code. Make sure you use the correct path to your image file. This is the tall graphic I had you create earlier. Of course we don’t want it to repeat. And the left padding pushes your LI text over so we can see your shiny new image.

.submenu li ul li {
	background-image:url(ul-long.gif);
	background-repeat:no-repeat;
	padding-left:18px;
	}

Second Tier LI Code – Last LI

So up until this point we have only used a single class, the one applied to the container. To be compatible with all browsers we must employ a class to put the endcap on the list. Now we use the smaller graphic of course. We reset the bottom padding to zero because the second tier UL code does this already.

.submenu li ul li.end {
	background-image:url(ul-end.gif);
	padding-bottom:0;
	}

Second Tier LI Code – :last-child

This code is not suggested for deployment. This is only for demonstration purposes.

So as you might know, Internet Explorer likes to employ its own dialect of CSS. One piece of very useful code that is missing in all IE flavors is the :last-child pseudo class. To be fair, :first-child works fine. When not in demonstration mode with three different menus you’ll want to use the code below. To facilitate the demo of :last-child alongside two other menus I have dropped a ‘lastchild’ class on the second tier UL on the demo page, third box.

Open the page in Firefox, Chrome and Safari. You’ll see no difference in the far right menu. Open in IE and you’ll get the standard LI code with the tall graphic on the last LI. Maybe they’ll add it in IE 8.1?

.submenu li ul li:last-child {
	background-image:url(ul-end.gif);
	padding-bottom:0;
	}

View the demo.

Final Thoughts

Try out some of these ideas to spruce up my simple design.

• Arrow on the right side of the images
• Curve the vertical line into the horizontal line
• Use an animated gif to make your list more dynamic
• Use a single sprite instead of two images.

If you’re going to use alpha transparency in your image, you’ll want to save as a PNG-24. Doing this will skew your colors slightly in Internet Explorer. This is because of the gamma correction saved in the image. Every browser except IE disregards the gamma value. I’ll show you how to correct this in an upcoming article.

Let me know how you liked this tutorial. Any comments and suggestions are welcome.

Fast-forward about 10 years. There have been great strides in font technology on the web. The first well-known solution was sIFR, a Flash-based solution that converted your text into a .swf file which is viewable by most modern browsers. Adding a custom font became a little easier. However, the coding required made these sites a little sluggish and needed javascript and Flash to be enabled.

Of course most of the good stuff on the web these days requires javascript, but that still meant sIFR needed Flash. An alternative that uses pure code and no proprietary filetypes came along, called FLIR. Now this solution lets your site break free of the Flash requirement. It does however require PHP to be installed on your web host. This isn’t a huge obstacle since most commercial host companies offer PHP scripting.

Now to the good stuff concerning WordPress users. The guys over at HostScope.com have developed a plugin that achieves FLIR goodness in an easy admin interface. I use this plugin to carry over the custom font in my logo to the sidebar headings on the right.

Step 1: Installation

Download, install and activate TTFTitles.

Step 2: Uploading Fonts

Navigate to the Appearance section of your WordPress admin. You’ll find the TTF Titles section under this heading. Go to the Fonts link and upload your custom font.

Step 3: Creating Styles

Navigate to the Styles section of the TTF Titles admin. You can adjust how your custom font will be viewed from here. I have a specific style for my sidebar and one for the ‘Leave a Comment’ element that is in the content section. I believe the plugin uses PNG-8 because you must designate a background color. The green background of the sidebar style did not look appealing on the white of the content section. I’d love for the author to update the plugin to use PNG-24, allowing for a style to be used anywhere.

Step 4: The Code

Applying the styles to your site is relatively easy, even for those who don’t know PHP. For instance, in the second sidebar on the right, the title code used to be…

<h3>Recent Articles</h3>

To render the title with my font I simply wrap the text with a little PHP like this…

<h3><?php the_ttftext("Recent Articles"); ?></h3>

Use the following code when adding the functionality to a WordPress variable.

<?php get_bloginfo('name'); ?>
... turns into ...
 <?php the_ttftext(get_bloginfo('name')); ?>

The previous implementations assume you’re using the style set as default. To use a different style like I have for my comment section you would code as follows.

<?php the_ttftext("Leave a Comment", true, "Opus on white", ""); ?>

This pulls in the name of your custom style in the third parameter. The last parameter is for alterations to the style, similar to inline styles in CSS. I can designate a different color, font size, or any other available attributes.

So now you can have more control over the user experience by adding custom fonts. Let me know how you’ve implemented this on your site.

Related Blogs