Help with custom Templates for eNewsletter

Hey guys,

So I am attempting to create a custom template to use with e-Newsletter. I basically copied the HTML version of my sites full-width page template and put in the appropriate place holders. It looks PERFECT in the eNewsletter preview. But when I sent a test email to myself, it's a tran wreck..

Any ideas? I can find my way around HTML but no where near the level to know why this isn't working.

I've attached images and the source code of the template.

Thanks in advance!

  • Peter Boll

    Oops, well it seems I can't upload HTML files so I'll post it here. Also attached the image that failed upload in the first post.

    <head>
    
        <meta charset="UTF-8" />
        <meta http-equiv="content-type" content="text/html; charset=utf-8" />
        <meta name="author" content="Grand Pixels, http://www.grandpixels.com"; />
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
    
            <meta name="keywords" content="about, scales, seafood, pizza, icecream, millbury, ma" />
    
        <link rel="alternate" type="text/xml" title="RSS .92" href="http://tinyentertainment.biz/scalesseafood/feed/rss/" />
        <link rel="alternate" type="application/atom+xml" title="Atom 0.3" href="http://tinyentertainment.biz/scalesseafood/feed/atom/" />
        <link rel="pingback" href="http://tinyentertainment.biz/scalesseafood/xmlrpc.php" />
    
        <link rel="stylesheet" href="http://tinyentertainment.biz/scalesseafood/wp-content/themes/linguini/style.css" type="text/css" media="screen" />
    
        <!--[if lt IE 9]>
        <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
        <![endif]-->
    
        <title>About Scales &rsaquo; Scales Restaurant, Seafood & Ice Cream, Millbury, MAScales Restaurant, Seafood & Ice Cream, Millbury, MA &lsaquo; Great Seafood, Pizza, Ice Cream, and more.</title>
    
    <!-- This site is optimized with the Yoast WordPress SEO plugin v1.4 - http://yoast.com/wordpress/seo/ -->
    <!-- Admin only notice: this page doesn't show a meta description because it doesn't have one, either write it for this page specifically or go into the SEO -> Titles menu and set up a template. -->
    <link rel="canonical" href="http://tinyentertainment.biz/scalesseafood/about-scales/" />
    <meta property='og:locale' content='en_US'/>
    <meta property='og:title' content='About Scales - Scales Restaurant, Seafood & Ice Cream, Millbury, MA'/>
    <meta property='og:url' content='http://tinyentertainment.biz/scalesseafood/about-scales/'/>
    <meta property='og:site_name' content='Scales Restaurant, Seafood & Ice Cream, Millbury, MA'/>
    <meta property='og:type' content='article'/>
    <!-- / Yoast WordPress SEO plugin. -->
    
    <link rel='stylesheet' id='gp_components-css'  href='http://tinyentertainment.biz/scalesseafood/wp-content/themes/linguini/css/components.css?ver=3.5.1' type='text/css' media='all' />
    <link rel='stylesheet' id='gp_responsive-css'  href='http://tinyentertainment.biz/scalesseafood/wp-content/themes/linguini/css/responsive.css?ver=3.5.1' type='text/css' media='all' />
    <link rel='stylesheet' id='jetpack-widgets-css'  href='http://tinyentertainment.biz/scalesseafood/wp-content/plugins/jetpack/modules/widgets/widgets.css?ver=20121003' type='text/css' media='all' />
    <script type='text/javascript' src='http://tinyentertainment.biz/scalesseafood/wp-includes/js/jquery/jquery.js?ver=1.8.3'></script>
    <script type='text/javascript' src='http://tinyentertainment.biz/scalesseafood/wp-includes/js/jquery/jquery.form.min.js?ver=2.73'></script>
    <script type='text/javascript' src='http://tinyentertainment.biz/scalesseafood/wp-content/plugins/e-newsletter/email-newsletter-files/js/widget_script.js?ver=3.5.1'></script>
    <script type='text/javascript' src='http://tinyentertainment.biz/scalesseafood/wp-content/themes/linguini/js/sticky.js?ver=3.5.1'></script>
    <script type='text/javascript' src='http://tinyentertainment.biz/scalesseafood/wp-content/themes/linguini/js/datepicker.js?ver=3.5.1'></script>
    <script type='text/javascript' src='http://tinyentertainment.biz/scalesseafood/wp-content/themes/linguini/js/tweet.js?ver=3.5.1'></script>
    <script type='text/javascript' src='http://tinyentertainment.biz/scalesseafood/wp-content/themes/linguini/js/prettyphoto.js?ver=3.5.1'></script>
    <script type='text/javascript' src='http://tinyentertainment.biz/scalesseafood/wp-content/themes/linguini/js/form.js?ver=3.5.1'></script>
    <script type='text/javascript' src='http://tinyentertainment.biz/scalesseafood/wp-content/themes/linguini/js/validate.js?ver=3.5.1'></script>
    <script type='text/javascript' src='http://tinyentertainment.biz/scalesseafood/wp-content/themes/linguini/js/custom.js?ver=3.5.1'></script>
    <script type='text/javascript' src='http://tinyentertainment.biz/scalesseafood/wp-includes/js/comment-reply.min.js?ver=3.5.1'></script>
    <link rel='shortlink' href='http://wp.me/P3cPMj-J' />
    	<link rel="shortcut icon" href="http://tinyentertainment.biz/scalesseafood/wp-content/uploads/2013/02/favicon.ico"/>
    
    	<style type="text/css">
    
    		/* Body: background-color -> BG color */
    		body {
    						background-color: #2D1912;
    					}
    
    		/* Layout: background-color -> BG color */
    		header.header,
    		.content-home,
    		footer.footer,
    		.widget-area-footer,
    		.content { background-color: #2D1912; }
    
    		/* Primary navigation: color -> BG color */
    		nav.navigation ul li li a,
    		nav.navigation ul li li li a,
    		nav.navigation ul li li:hover li a,
    		nav.navigation ul li:hover li:hover li a,
    		nav.navigation-mobile li li a,
    		nav.navigation-mobile .menu li .sub-menu li a,
    		nav.navigation-mobile .menu li .children li a { color: #2D1912 !important; }
    
    		/* White alert: color -> BG color */
    		.alert-box.white,
    		.alert-box.white a { color: #2D1912 !important; }
    
    		/* Callouts: color -> BG color */
    		.callouts .callout-content { color: #2D1912; }
    
    		/* Callouts: background-color -> BG color */
    		.callouts .callout-image { background-color: #2D1912; }
    
    		/* Link: background-color -> Primary color */
    		a:hover { background-color: #5476bf; }
    
    		/* Various: color -> Primary color */
    		h3,
    		label,
    		p.featured,
    		nav.navigation ul li:hover a,
    		nav.navigation ul li a:hover,
    		nav.navigation-mobile li:hover a,
    		nav.navigation-mobile li a:hover,
    		nav.navigation-categories li .children a,
    		.widget_reservation h4,
    		.widget_testimonial .testimonial-content,
    		.list-menucard-block .post-price,
    		.comments .comment-author .fn,
    		.comments .comment-author .fn a,
    		.single-menucard .post-description,
    		.widget_categories .children a,
    		.widget_nav_menu .sub-menu a,
    		.widget-area-footer .post-info,
    		.widget-area-footer .post-info a,
    		.widget-area-sidebar .post-info,
    		.widget-area-sidebar .post-info a,
    		.list-posts .post-header h2 a:hover,
    		.list-menucard-block .post-header h3 a,
    		.list-menucard-block .post-header h3,
    		.list-photos-block .list-photos-block-header h2 a,
    		blockquote { color: #5476bf; }
    
    		/* Various: background-color -> Primary color */
    		.callouts .callout-title a,
    		.callouts .callout-title.without-link,
    		.list-posts .post-info .post-date,
    		.list-posts .post-info .post-comments:hover,
    		.page-header h1 .post-price,
    		.alert-box.custom { background-color: #5476bf; }
    
    		/* Various: border -> Primary color */
    		.callouts .callout-content .button a,
    		.bypostauthor .avatar,
    		blockquote { border-color: #5476bf; }
    
    		/* Button: background-color -> Primary color */
    		button,
    		.button a,
    		button.button-standard,
    		.button-standard a,
    		button.standard,
    		.standard a,
    		.comments .reply a,
    		a#cancel-comment-reply-link,
    		.widget_tag_cloud a:hover,
    		.comments #submit { background-color: #5476bf; }
    
    		/* Primary navigation: border -> Primary color */
    		nav.navigation ul li:hover,
    		nav.navigation-mobile li:hover { border-color: #5476bf; }
    
    		/* Primary navigation: background-color -> Primary color */
    		nav.navigation ul li li:hover a,
    		nav.navigation ul li:hover li:hover li:hover a,
    		nav.navigation-mobile .menu li:hover a,
    		nav.navigation-mobile .menu li .sub-menu li:hover a,
    		nav.navigation-mobile .menu li .children li:hover a { background-color: #5476bf !important; }
    
    		/* Primary navigation: color -> Primary color */
    		nav.navigation li.current-menu-item a { color: #5476bf; }
    
    		/* UI components -> Primary color */
    		.ui-widget-header { background-color: #5476bf; }
    		.ui-state-highlight,
    		.ui-widget-content .ui-state-highlight,
    		.ui-widget-header .ui-state-highlight { background-color: #5476bf !important; background-image: none !important; }
    		.ui-state-hover,
    		.ui-widget-content .ui-state-hover,
    		.ui-widget-header .ui-state-hover,
    		.ui-state-focus,
    		.ui-widget-content
    		.ui-state-focus,
    		.ui-widget-header .ui-state-focus { background: #5476bf !important; }
    		.ui-state-active,
    		.ui-widget-content .ui-state-active,
    		.ui-widget-header .ui-state-active { border: 1px solid #5476bf; color: #5476bf; }
    
        </style>
    
    			<script type="text/javascript">
    		// Preloading Images
    		//<![CDATA[
    			jQuery(function () {
    				jQuery('.image img').css("display","none");
    			});
    			var i = 0;
    			var int=0;
    			jQuery(window).bind("load", function() {
    				var int = setInterval("loadImage(i)",100);
    			});
    			function loadImage() {
    				var imgs = jQuery('.image img').length;
    				if (i >= imgs) {
    					clearInterval(int);
    				}
    				jQuery('.image img:hidden').eq(0).fadeIn(200);
    				i++;
    			}
    		//]]>
    		</script>
    			<script type="text/javascript">
    		//<![CDATA[
    			jQuery(document).ready(function(){
    				jQuery('.content img').each(function(){
    					jQuery(this).removeAttr('width')
    					jQuery(this).removeAttr('height');
    				});
    			});
    		//]]>
    		</script>
    		<style type="text/css">.recentcomments a{display:inline !important;padding:0 !important;margin:0 !important;}</style>
    <script type="text/javascript">
    /* <![CDATA[ */
    	var wpNotesIsJetpackClient = true;
    /* ]]> */
    </script>
    
    </head>
    
    <body class="page page-id-45 page-template page-template-page-full-php logged-in">
    
        <header id="top" class="header shadow-bottom left">
            <div class="header-container left">
    
                <div class="topbar">
                	<div class="topbar-container">
    
                                    <div class="tagline left">
                        Great Seafood, Pizza, Ice Cream, and more.                </div><!-- tagline -->
    
                                    <div class="socials right">
                        <ul>
                                                                            <li class="facebook left"><a href="http://www.facebook.com/pages/Scales-Seafood-More/138083716292587?fref=ts" title="Facebook" target="_blank"></a></li>
                                                                                                                                                                                                                                                                            <li class="rss left"><a href="http://tinyentertainment.biz/scalesseafood/feed/" title="RSS" target="_blank"></a></li>
                                                </ul>
                    </div><!-- socials -->
    
                    					 <div class="phone right">
    					 	508-865-3377                     </div>
    
                    </div><!-- topbar-container -->
    
                </div><!-- topbar -->
    
                <div class="logo">
                                        <div class="logo-image left">
    						                        	<a href="http://tinyentertainment.biz/scalesseafood" title="Scales Restaurant, Seafood & Ice Cream, Millbury, MA">
                                	<img src="http://tinyentertainment.biz/scalesseafood/wp-content/uploads/2013/02/newlogo1.png" alt="Scales Restaurant, Seafood & Ice Cream, Millbury, MA" />
    							</a>
    											</div><!-- logo-image -->
                                </div>
    
            <br class="clear" />
            </div><!-- header-container -->
        </header><!-- header -->
    
        <div class="canvas">
            <header class="page-header">
                <h1>{EMAIL_SUBJECT}</h1>
            </header><!-- page-header -->
    
    		<div class="content shadow-top left">
                <div class="content-container">
    
                    <div class="page-full left">
                    	<div class="page-full-container">
    
    						                                                                <div class="content-page left">
                                        <div class="content-page-container">
    
    									<h2>From : {FROM_NAME}</h2>
    									<hr />
    {EMAIL_BODY}
    									<pre>{CONTACT_INFO}</pre>
                                        </div><!-- content-page-container -->
                                    </div><!-- content-page -->
    
    					</div><!-- page-full-container -->
                    </div><!-- page-full -->
    
                <br class="clear" />
                </div><!-- content-container -->
            </div><!-- content -->
    
        <br class="clear" />
        </div><!-- footer-areas -->
    
        <footer class="footer left">
            <div class="footer-container">
    
                <div class="copyright left">
    				Copyright &copy; 2013 Scales Restaurant, Seafood & Ice Cream. All rights reserved. * <a href="http://www.solariswebdesign.com">Solaris Web Design</a>            </div>
    
                            <div class="socials right">
                    <ul>
    					                                        <li class="facebook left"><a href="http://www.facebook.com/pages/Scales-Seafood-More/138083716292587?fref=ts" title="Facebook" target="_blank"></a></li>
                                                                                                                                                                                                                                <li class="rss left"><a href="http://tinyentertainment.biz/scalesseafood/feed/" title="RSS" target="_blank"></a></li>
                                        </ul>
                </div>
    
                <br class="clear" />
            </div>
        </footer><!-- footer -->
    
    	    	<div style="display:none">
    	</div>
    <link rel='stylesheet' id='notes-admin-bar-rest-css'  href='http://s0.wp.com/wp-content/mu-plugins/notes/admin-bar-rest.css?ver=2.2-201309' type='text/css' media='all' />
    <link rel='stylesheet' id='noticons-css'  href='http://s0.wp.com/i/noticons/noticons.css?ver=2.2-201309' type='text/css' media='all' />
    <script type='text/javascript' src='http://s0.wp.com/wp-content/js/devicepx-jetpack.js?ver=201309'></script>
    <script type='text/javascript' src='http://s.gravatar.com/js/gprofiles.js?ver=2013Febaa'></script>
    <script type='text/javascript'>
    /* <![CDATA[ */
    var WPGroHo = {"my_hash":"afaf82aa15c6e469aa93568c187a4821"};
    /* ]]> */
    </script>
    <script type='text/javascript' src='http://tinyentertainment.biz/scalesseafood/wp-content/plugins/jetpack/modules/wpgroho.js?ver=3.5.1'></script>
    <script type='text/javascript' src='http://tinyentertainment.biz/scalesseafood/wp-includes/js/jquery/ui/jquery.ui.core.min.js?ver=1.9.2'></script>
    <script type='text/javascript' src='http://s1.wp.com/wp-content/js/mustache.js?ver=2.2-201309'></script>
    <script type='text/javascript' src='http://tinyentertainment.biz/scalesseafood/wp-includes/js/underscore.min.js?ver=1.4.0'></script>
    <script type='text/javascript' src='http://tinyentertainment.biz/scalesseafood/wp-includes/js/backbone.min.js?ver=0.9.2'></script>
    <script type='text/javascript' src='http://s0.wp.com/wp-content/js/postmessage.js?ver=2.2-201309'></script>
    <script type='text/javascript' src='http://tinyentertainment.biz/scalesseafood/wp-content/plugins/jetpack/_inc/spin.js?ver=1.2.4'></script>
    <script type='text/javascript' src='http://tinyentertainment.biz/scalesseafood/wp-content/plugins/jetpack/_inc/jquery.spin.js?ver=3.5.1'></script>
    <script type='text/javascript' src='http://s0.wp.com/wp-content/mu-plugins/notes/notes-rest-common.js?ver=2.2-201309'></script>
    <script type='text/javascript' src='http://s0.wp.com/wp-content/mu-plugins/notes/admin-bar-rest.js?ver=2.2-201309'></script>
    
    </body>
    </html>
  • Brian Purkiss

    Unfortunately this question is a little beyond the scope of support we offer here and more into the realm of Custom Development. If you are willing to pay someone to develop this, you should take a look at the WPMU Job Board or Tweaky.

    However, I can tell you that email templates do not function like websites. Getting email templates to work and display consistently is almost like coding for Internet Explorer 5.

    Try and remain extremely simple with your layouts and CSS.

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.